# Lista de artículos

Dispone una lista de artículos en cuadrícula, con el último más grande, o como una lista compacta de filas. Cada artículo es una tarjeta.

### Problemas conocidos
No se conocen.

### Copiar el marcado
Una lista con una tarjeta en cada elemento. En la lista destacada, el primer elemento lleva su texto en un `<div>` junto a la imagen:

Post list markup
```html
<ul class="luz-post-list luz-post-list--lead" role="list">
  <li>
    <article class="luz-card">
      <div class="luz-image luz-image--3x2"><img src="/media/tide.jpg" width="600" height="400" alt="" loading="lazy"></div>
      <div>
        <p class="luz-tag luz-tag--gray u-mb-sm">Coast</p>
        <h2 class="luz-card__title"><a href="/2026/10/tide-records/">What ten years of tide records say about the bay</a></h2>
        <p class="luz-card__body">Volunteers have read the gauge in the port twice a day since 2016.</p>
        <p class="luz-meta"><time datetime="2026-10-12">12 October 2026</time> <span>6 min read</span></p>
      </div>
    </article>
  </li>
  <!-- one li for each post; the others have no div around their text -->
</ul>
```

Una plantilla para la página de resultados de una búsqueda: un `<search>` con su formulario, un encabezado que dice cuántos resultados hay y la lista compacta. La búsqueda de tu sitio rellena los resultados; el texto de aquí es de ejemplo.

Search results markup
```html
<search>
  <form action="/search/">
    <label for="q">Search the blog</label>
    <input type="search" id="q" name="q" value="tide">
    <button type="submit">Search</button>
  </form>
</search>
<h2 id="results-title">3 results for "tide"</h2>
<ul class="luz-post-list luz-post-list--compact" role="list" aria-labelledby="results-title">
  <li>
    <article class="luz-card">
      <h3 class="luz-card__title"><a href="/2026/10/tide-records/">What ten years of tide records say about the bay</a></h3>
      <p class="luz-meta"><time datetime="2026-10-12">12 October 2026</time> <span>Coast</span></p>
    </article>
  </li>
  <!-- one li for each result -->
</ul>
```

### Variantes y opciones
- `.luz-post-list`: En un `<ul>`: tantas columnas iguales como quepan, ninguna de menos de `--luz-post-list-min` (16rem), sin viñetas. Cada tarjeta mide lo que la más alta de su fila
- `.luz-post-list--lead`: Desde 40rem de ancho de lista, el primer elemento ocupa dos columnas y su tarjeta pone la imagen junto al texto, con un título más grande
- `.luz-post-list--compact`: Una columna, una fila por artículo: el título y, al final, los datos si hay sitio. Omite la imagen y el resumen
- `--luz-post-list-min`: El ancho mínimo de una columna. Defínelo en la lista o en un ancestro

### Cómo funciona
CSS de `components/post-list.css` de `@luz-ds/catalog`. Define la disposición; el artículo es la tarjeta de core, con la imagen, la etiqueta, el título, el resumen y la [línea de datos](https://nandovejer.github.io/luz/es/docs/components/meta/) que elijas.

- La lista es su propio contenedor de tamaño, así que la destacada sigue el espacio que tiene y no la ventana. Dale un padre que fije su ancho: un elemento flex o grid dimensionado por su contenido la deja sin ancho.
- Por debajo de 40rem, la destacada es una tarjeta como las demás, con la imagen encima.
- El enlace del título convierte toda la tarjeta en un solo enlace, como en cualquier tarjeta.

### Sin JavaScript
No cambia nada. Es una lista de tarjetas y el paquete no incluye ningún script.

### Teclado y ARIA
- **Orden:** el del código, que es el de lectura. En la destacada la imagen va antes del texto; cada tarjeta es una sola parada de tabulación, en el enlace del título.
- **Lista:** el `<ul>` se anuncia con su número de elementos («lista, 12 elementos»). Conserva `role="list"`: algunos navegadores quitan la semántica de lista a un `<ul>` sin viñetas.
- **Nombres:** cada enlace se llama como el título de su artículo. Una imagen que solo decora el artículo lleva `alt=""`. Da a la lista un encabezado, o un `aria-label`, cuando la página tenga más de una.
- **Resultados de búsqueda:** `<search>` es el punto de referencia de búsqueda, así que el formulario que contiene no necesita `role="search"`: añadirlo anidaría un segundo punto de referencia. Pon los resultados fuera de `<search>`, en el `<main>`. Si la página tiene más de un `<search>`, da nombre a cada uno con `aria-label`. Da nombre a la lista con el encabezado que cuenta los resultados, mediante `aria-labelledby`.
- **Anunciar los resultados:** una página de resultados que se carga entera no necesita una región en vivo: pon el número y la consulta en el `<title>` y en el `<h1>`. Si tu sitio filtra la lista en el mismo sitio, pon el número en un elemento aparte con `role="status"`: un encabezado no es en vivo, así que el lector de pantalla no avisa del cambio.

### Cuándo usarlo
Úsala siempre que una página muestre varios artículos, para que todas las listas del sitio tengan la misma disposición.

- Base: los artículos de una categoría o de una etiqueta.
- Destacada: la portada, cuando un artículo debe leerse primero.
- Compacta: un archivo por fechas o los resultados de una búsqueda.

### Cuándo no usarlo
No la uses para una sola tarjeta ni para elementos que no sean artículos.

- Un artículo suelto es una [tarjeta](https://nandovejer.github.io/luz/es/docs/components/card/). Productos, personas y planes son tarjetas en un `.o-grid--auto`.
- Para las páginas de una lista larga, añade [paginación](https://nandovejer.github.io/luz/es/docs/components/pagination/) después.