Cabecera de artículo

Código

Copiar el marcado

import "@luz-ds/catalog/components/article-header.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/article-header.min.css" integrity="sha384-CcF15TBfLmCLd5Zwh61D6udMRigUVTBJIag9a9m9AiT9rcJkGsbezhKC21x6xdJf" crossorigin="anonymous">

<header class="luz-article-header">
  <p class="luz-article-header__kicker"><a href="/coast/">Coast</a></p>
  <h1 class="luz-article-header__title">What ten years of tide records say about the bay</h1>
  <p class="luz-article-header__standfirst">Volunteers have read the gauge in the port twice a day since 2016. The sea is four centimetres higher, and winter storms now reach the old town's walls.</p>
  <div class="luz-article-header__byline">
    <span class="luz-avatar luz-avatar--lg"><img src="/authors/ana-ruiz-96.jpg" width="48" height="48" alt=""></span>
    <div>
      <p>By <a href="/authors/ana-ruiz/">Ana Ruiz</a></p>
      <p class="luz-meta"><time datetime="2026-10-12">12 October 2026</time> <span>6 min read</span></p>
    </div>
  </div>
  <figure class="luz-article-header__media">
    <div class="luz-image">
      <img src="/img/tide-gauge-1280.jpg" width="1280" height="720" alt="A green gauge post marked in centimetres, standing in shallow water by a stone quay" fetchpriority="high" decoding="async">
    </div>
    <figcaption>The tide gauge in the port, at low tide. Photo: Ana Ruiz.</figcaption>
  </figure>
</header>

Variantes y opciones

No hay modificadores. Solo el título es obligatorio: omite las partes que no tengas.

Cómo funciona

Una cuadrícula de una columna, con estilos de components/article-header.css de @luz-ds/catalog, que se carga después de core y de los componentes del catálogo que use la página. Sin JavaScript.

• Cada parte aplica sus estilos al texto mediante la herencia, así que puedes poner la clase en el elemento que contiene el texto o en un contenedor. Una plantilla de CMS que envuelve la entradilla en un <div> funciona igual que un <p> sin contenedor. En una plantilla de bloques de WordPress, asigna a cada bloque su clase en className.
• El antetítulo es un enlace si las secciones tienen página propia; si no, es texto sin enlace. El título debe ser el <h1> de la página; las clases solo cambian su aspecto.
• La imagen inicial usa el marco de imagen de core: mantiene su proporción y muestra una superficie plana hasta que se carga. No le asignes loading="lazy": está cerca del principio de la página.
• La fecha visible es un <time> con un datetime legible por máquinas. Si el artículo se actualiza después de publicarse, añade una segunda línea: Updated <time datetime="…">…</time>.

Sin JavaScript

No cambia nada: la cabecera del artículo usa HTML y CSS.

Teclado y ARIA

La cabecera no tiene interacciones propias: al pulsar Tab se llega primero al enlace del antetítulo y después al del autor.

• El título <h1> permite encontrar el artículo en la lista de encabezados del lector de pantalla. El antetítulo aparece antes en el código fuente, igual que en pantalla; es breve y no retrasa la lectura del título.
• Dentro de <article>, <header> no es un punto de referencia; no necesita etiqueta.
• El avatar que aparece junto al nombre del autor es decorativo: las iniciales llevan aria-hidden="true" y la foto, alt="".

La pestaña Diseño contiene el contraste y el foco.

Diseño

Cuándo usarlo

Usa una cabecera de artículo al principio de una noticia, una entrada o un reportaje: una página con autor y fecha que se lee de principio a fin.

Cuándo no usarlo

No la uses en una página sin autor ni fecha, como una página de contacto o de sección: usa la cabecera de página.

• Para el primer bloque de una página de inicio o de aterrizaje, usa el hero.
• Para un artículo de una lista, usa una tarjeta de artículo: la cabecera es para la página del artículo.

Qué hacer y qué no

Cómo escribir el contenido

El título cuenta lo ocurrido o lo que aprenderá quien lo lea, con mayúscula inicial y sin punto final. No superes los 90 caracteres: las listas y los resultados de búsqueda recortan los más largos.

• El antetítulo tiene una o dos palabras: la sección o el tipo de artículo («Análisis», «Entrevista»).
• La entradilla consta de una o dos frases, menos de 40 palabras, que complementan el título. A menudo es la descripción que el CMS muestra en las listas y en los buscadores.
• Escribe la fecha con palabras y el mes completo, en el idioma de quien lee. «6 min de lectura» calcula unas 200 palabras por minuto; omítelo en las entradas cortas.
• El pie de foto indica qué muestra la imagen y quién la hizo. alt describe lo que necesita saber quien no puede verla; nunca repite el pie.

Contraste y foco

Todas las partes son texto sobre la página. Consulta los pares de contraste del avatar en su página.

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

• Foco: la cabecera no recibe el foco; sus enlaces conservan el anillo de core.
• Los enlaces están subrayados, así que el color no es la única indicación (WCAG 1.4.1).

Tokens que usa

Los 14 tokens que usan las reglas de .luz-article-header de components/article-header.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde figuran los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-space-sm, --luz-space-xl, --luz-space-xs

Typography

--luz-font-heading, --luz-font-mono, --luz-font-sans, --luz-text-2xl, --luz-text-3xl, --luz-text-base, --luz-text-lg, --luz-text-md, --luz-text-xs

La pestaña Código contiene el teclado y ARIA.