Lista de artículos

Código

Copiar el marcado

import "@luz-ds/catalog/components/post-list.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/post-list.min.css" integrity="sha384-kK6zd16AVte8C1ge85pYFbh52scr+Tf3HNyUDxai1uQkIAT9+/5HJOWZZ/zzFn8H" crossorigin="anonymous">

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:

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

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

La pestaña Diseño incluye Contraste y foco.

Diseño

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. Productos, personas y planes son tarjetas en un .o-grid--auto.
• Para las páginas de una lista larga, añade paginación después.

Qué hacer y qué no

Cómo escribir el contenido

• Título: el del artículo, igual que en el artículo. Que se ajuste, nunca recortarlo.
• Resumen: una frase, de unos 120 caracteres como máximo. Omítelo en los artículos que acompañan a la destacada y en la lista compacta.
• Datos: la fecha, en un <time>, y después el tiempo de lectura o la sección. El mismo orden en todas las tarjetas.
• Nivel de encabezado: el título de la tarjeta es un encabezado un nivel por debajo del de la página o sección de la lista.
• Resultados de búsqueda: di cuántos resultados hay y de qué (3 results for "tide"), en el encabezado, el <title> y el <h1> de una página que se carga entera. Si no hay ninguno, dilo y explica cómo seguir: revisa la ortografía o prueba una palabra más corta.

Contraste y foco

Las tarjetas aparecen sobre la superficie de la página, con los mismos colores que cualquier tarjeta.

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

• Foco: el anillo es el de la tarjeta: 2 px de --luz-focus-ring alrededor de toda la tarjeta, desde el enlace del título.
• Área de activación: toda la tarjeta es el enlace, muy por encima de 24 px.
• Bordes: el borde en reposo (--luz-divider) es decorativo y no tiene un mínimo.

Tokens que usa

Los 5 tokens que leen las reglas de .luz-post-list de components/post-list.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres; consulta Tokens en Figma.

Spacing and sizing

--luz-space-3xs, --luz-space-md, --luz-space-sm, --luz-space-xs

Typography

--luz-text-xl

La pestaña Código incluye Teclado y ARIA.