Todos los componentes (204)

Título

Tipografía · Title · .amset-title

Qué es y cuándo usarlo

Encabezado. Separa el NIVEL —que es semántica— del TAMAÑO —que es aspecto—, que es justo lo que se mezcla mal a mano.

Cuándo usarlo

En todo encabezado de una sección. El level coloca la página en el índice con el que un lector de pantalla salta por el contenido.
Cuando un título tiene que verse más pequeño, se baja el size, nunca el level: bajarlo a h3 para que se vea pequeño rompe ese índice.

Cuándo no

Por debajo de 16 px ya no se lee como encabezado: ahí lo que hace falta es Text con weight="bold".
El título de un diálogo o de una tarjeta lo ponen ellos (el title de Dialog y de Card): el diálogo lo enlaza con aria-labelledby y la tarjeta lo usa de nombre de su botón o su enlace.

Teclado: no participa, pero SÍ es una parada de navegación por encabezados en un lector de pantalla — que es su razón de ser.

Accesibilidad: una página lleva un solo level={1} y no se salta niveles hacia abajo (de un 2 no se pasa a un 4). El texto se equilibra solo (text-wrap: balance) para que no quede una palabra suelta en la última línea.

Aspecto fino: --amset-title-family, --amset-title-size, --amset-title-weight, --amset-title-color, --amset-title-leading y --amset-title-spacing. La escala llega a 36 px; por encima es un reclamo de portada y se pide con --amset-title-size.

Cómo se ve

Un titular de seccion

Y uno mas abajo

<Title level={2}>Un titular de seccion</Title>
<Title level={3}>Y uno mas abajo</Title>

Props

Se importa con import { Title } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`level`obligatoria	`3 \| 4 \| 2 \| 5 \| 1 \| 6`	Nivel semantico, de 1 a 6. Obligatorio: un encabezado sin nivel no coloca en el indice de la pagina, y es el indice lo que usa un lector de pantalla para saltar por el contenido. Una pagina lleva un solo `1` y no se salta niveles hacia abajo.
`align`	`"center" \| "start" \| "end" \| "justify"`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`id`	`string`	—
`ink`	`"secondary" \| "primary"`	—
`lines`	`number`	Recorta a N lineas. Manda sobre `truncate`.
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	Tamaño, aparte del nivel a proposito. Un `h2` que en esta tarjeta tiene que verse pequeño sigue siendo un `h2`: bajarlo a `h3` para que se vea mas pequeño rompe el indice de la pagina.
`spacing`	`"wide"`	—
`style`	`CSSProperties`	—
`title`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`transform`	`"uppercase"`	—
`truncate`	`boolean`	Una sola linea con puntos suspensivos. El texto sigue entero en el DOM.
`weight`	`"normal" \| "bold" \| "medium"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-title-family`	`var(--amset-font)`
`--amset-title-size`	`var(--amset-text-2xl)`
`--amset-title-weight`	`var(--amset-weight-bold)`
`--amset-title-color`	`var(--amset-ink)`
`--amset-title-leading`	`var(--amset-line-tight)`
`--amset-title-spacing`	`-0.01em`

Cómo se cambia

.amset-title {
  --amset-title-family: ...;
  --amset-title-size: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: