Core · Mostrar contenido
Línea de metadatos
Muestra en una línea algunos datos sobre un elemento, como la fecha, el tiempo de lectura y el autor, separados por puntos.
Ejemplo
Una línea bajo el título de un artículo con el autor, la fecha y el tiempo de lectura.
En una portada, datos con etiqueta como dónde, cuándo y cuánto, con la etiqueta sobre su valor. Los datos son de ejemplo: cámbialos por los tuyos.
Problemas conocidos
Los lectores de pantalla ocultan los puntos mediante texto alternativo para el contenido generado, compatible con Firefox desde la versión 128 y con Safari desde la 17.4. En navegadores anteriores, el lector de pantalla lee cada punto.
Aún no se ha probado con un lector de pantalla.
Código
Copiar el marcado
<p class="luz-meta">
<span>By <a href="/authors/ana-ruiz/">Ana Ruiz</a></span>
<time datetime="2026-10-12">12 October 2026</time>
<span>6 min read</span>
</p>Para datos con etiqueta en una portada, una lista de descripciones con un <div> por dato. El texto es de ejemplo: escribe el tuyo.
<dl class="luz-meta luz-meta--facts">
<div><dt>Location</dt><dd>Plaza Mayor, Seville</dd></div>
<div><dt>Date</dt><dd><time datetime="2027-03-20">20 March 2027</time></dd></div>
<div><dt>Price</dt><dd>From 45 euros</dd></div>
</dl>Variantes y opciones
Un modificador: .luz-meta--facts.
| Clase o elemento | Qué hace |
|---|---|
.luz-meta | La línea: datos en una fila que salta de línea, con tipografía sans y el color de texto secundario |
Cada elemento secundario | Un dato: un elemento <time>, un enlace o un <span> de texto. Antes de cada elemento, salvo el primero, aparece un punto |
.luz-meta | En un <dl>: los datos como pares con etiqueta, sin puntos. Cada elemento secundario es un <div> con un <dt> (la etiqueta, en el color de texto secundario) sobre su <dd> (el valor, en el color primario y en seminegrita) |
Cómo funciona
Solo CSS, en components/meta.css: una fila flexible que salta de línea y un punto dibujado con ::before en cada dato después del primero. .luz-meta--facts quita los puntos y da estilo a la etiqueta y al valor de cada par.
- El punto queda en el espacio anterior al dato. La línea recorta los bordes inicial y final, de modo que, si un dato salta al principio de una línea nueva, su punto queda fuera: ninguna línea empieza con un punto.
- La línea tiene 4 px de relleno en cada extremo, espacio para el anillo de foco de un enlace dentro del recorte y un margen negativo del mismo tamaño, para que sus líneas de texto queden alineadas con el texto anterior.
- Los datos con etiqueta son la misma fila que salta de línea: cada par se mantiene unido y el que no cabe pasa a la línea siguiente, así que nada se corta a 320 px ni con un tamaño de texto grande.
- El punto se escribe como
content: "·" / "": un texto alternativo vacío para que los lectores de pantalla no lo lean. - No hay ningún elemento posicionado, así que, en una tarjeta cuyo enlace de título cubra toda la tarjeta, esta sigue siendo un único enlace.
Sin JavaScript
No cambia nada: la línea de metadatos está hecha con CSS. Sin CSS, los datos se unen en una sola línea con los espacios del marcado: deja un espacio o un salto de línea entre los elementos.
Teclado y ARIA
La línea no recibe el foco ni añade ningún rol. Pulsa Tab para llegar a los enlaces que contiene, en orden.
- El lector de pantalla lee los datos uno tras otro, sin los puntos. Escribe cada dato para que tenga sentido por sí solo: «6 min de lectura», no «6».
- Asigna a las fechas un elemento
<time datetime>para que el software pueda leerlas. - Los datos con etiqueta son una lista de descripciones, así que el lector de pantalla dice cada etiqueta con su valor («Location, Plaza Mayor, Seville»). Envolver cada par en un
<div>es HTML válido y mantiene los pares unidos.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa una línea de metadatos para mostrar entre dos y cuatro datos breves sobre una entrada, una historia o un elemento: el autor, la fecha, el tiempo de lectura o la sección.
Cuándo no usarlo
No la uses para una frase ni para datos que haya que comparar entre varios elementos.
- Datos con etiqueta en una portada: usa
.luz-meta--facts. Los datos que se comparan entre varios elementos van en una tabla. - Una ruta de páginas es una miga de pan; un conjunto de etiquetas es una fila de etiquetas.
Qué hacer y qué no
Cómo escribir el contenido
Datos breves, empezando por el más útil: normalmente el autor y después la fecha.
- Escribe la fecha con palabras, con el mes desplegado, en el idioma de quien lee.
- Incluye entre dos y cuatro datos. Si hay más, forma una lista, no una línea.
Contraste y foco
Los datos y los puntos usan el color de texto secundario; en la variante de datos con etiqueta, la etiqueta usa el texto secundario y el valor el texto primario; los enlaces de la línea conservan el color de los enlaces.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Dato y punto | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Valor de un par (variante de datos) | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Enlace | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
- Foco: un enlace conserva el contorno de 2 px
--luz-focus-ringde core, dentro del recorte de la línea.
Tokens que usa
Los 7 tokens que lee components/meta.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Spacing and sizing
--luz-space-2xs,--luz-space-md,--luz-space-xs- Typography
--luz-font-sans,--luz-text-md
El teclado y ARIA están en la pestaña Código.