# 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.

### 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.

### Copiar el marcado
Meta line markup
```html
<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.

Meta line facts markup
```html
<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`.

- `.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--facts`: 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.

### 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](https://nandovejer.github.io/luz/es/docs/components/table/).
- Una ruta de páginas es una [miga de pan](https://nandovejer.github.io/luz/es/docs/components/breadcrumb/); un conjunto de etiquetas es una fila de [etiquetas](https://nandovejer.github.io/luz/es/docs/components/tag/).