Cabecera de portada

Código

Copiar el marcado

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/masthead.min.css" integrity="sha384-Z8LZh/hdX8e75aVw/+7wsEa/DGjmU5P5Jr3gDfMgW5yUXZw0JBlB1bEZt8nUX9nx" crossorigin="anonymous">

Con la búsqueda de catalog en la fila superior:

<header class="luz-masthead">
  <div class="o-container o-container--inline o-stack">
    <div class="o-row luz-masthead__top">
      <p class="luz-masthead__date"><time datetime="2026-10-14">Wednesday, 14 October 2026</time></p>
      <div class="o-row luz-masthead__actions">
        <luz-search>…</luz-search>
      </div>
    </div>
    <a class="luz-masthead__brand" href="/">The Vejer Review</a>
    <div class="o-row luz-masthead__sections">
      <button class="luz-nav-toggle" type="button" popovertarget="masthead-nav" aria-label="Sections">…</button>
      <nav class="luz-navbar" id="masthead-nav" aria-label="Sections" popover>…</nav>
    </div>
  </div>
</header>

Variantes y opciones

Ningún modificador. La cabecera de portada es una clase de catalog aplicada a un <header> nativo, maquetada con los objetos de core en el marcado.

Cómo funciona

CSS de components/masthead.css de @luz-ds/catalog aplicado a los objetos de core y a la barra de navegación de catalog. Sin JavaScript.

• La cabecera de portada solo aporta la apariencia: la superficie de la página, la marca, las líneas de la fila de secciones y la fecha. Core se ocupa del resto: .o-container--inline los márgenes laterales, .o-row y .o-stack las filas, y la barra de navegación los enlaces y su panel.
• La cabecera de portada no es fija: tres filas pegadas arriba ocuparían un tercio de la pantalla del móvil. La marca mide 49 px a partir de 1024 px, 39 px por debajo y 31 px a 640 px o menos (--luz-text-4xl, -3xl y -2xl, los escalones del hero).
• La cabecera de portada, y la fila de secciones dentro de ella, se identifican como el ancla --luz-bar, dentro de su propio ámbito. En los navegadores compatibles con el posicionamiento de anclas CSS, el panel de la barra de navegación se abre debajo de la fila de secciones. En los demás se abre a --luz-bar-h de la parte superior de la ventana (consulta Problemas conocidos).
• Con @luz-ds/catalog, la lista de su <luz-lang-switch> se abre debajo de la cabecera de portada. Sin él, no cambia nada: las reglas que amplían los elementos del catálogo no coinciden con ninguno.

Sin JavaScript

No cambia nada: el menú es una ventana emergente que abre popovertarget del botón, sin scripts; los enlaces son enlaces normales y la búsqueda del catálogo muestra un enlace al índice alfabético.

Teclado y ARIA

• Orden: el del código fuente: acciones de la fila superior, marca, botón de menú y secciones.
• Teclas: Enter o Espacio en el botón de menú abre y cierra el panel; Escape lo cierra y devuelve el foco al botón. El panel no es modal: al pulsar Tab después del último enlace se continúa por la página.
• Nombres: tanto <nav> como el botón de menú se llaman «Secciones»; el navegador expone el estado expandido del botón. La sección del artículo lleva aria-current="true" y el índice de la propia sección, aria-current="page"; ambos aparecen subrayados.
• Marca: un enlace, nunca un encabezado: el título del artículo es el único h1 de la página. El logotipo es un <img> cuyo alt contiene el nombre de la publicación, sin texto al lado.
• Puntos de referencia: un <header> que es hijo directo de <body> es el banner. Pon antes el enlace para saltar al contenido.

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

Diseño

Cuándo usarlo

Usa la cabecera de portada al principio de la portada y de las secciones de un periódico, donde el nombre y la fecha marcan el tono y quien lee llega a cada sección.

Cuándo no usarlo

No la uses en todas las páginas de un blog: para una sola fila que permanece arriba, usa la cabecera del sitio con --publication.

• Una cabecera por página, nunca dentro de un componente o artículo: es el banner de la página.
• No fijes la cabecera de portada ni pongas la fecha en una barra de una fila: en una sola fila competiría con el nombre.

Qué hacer y qué no

Cómo escribir el contenido

La marca es el nombre de la publicación; las secciones usan los nombres que quienes leen dan a sus apartados.

• Marca: el nombre completo, tal como aparece en la publicación. Se parte en varias líneas si el ancho es reducido; nunca lo acortes con puntos suspensivos.
• Secciones: entre cuatro y siete, de una o dos palabras cada una, con los mismos nombres que los títulos de sus páginas de índice.
• Fecha: escrita con palabras en el idioma de la página, «miércoles, 14 de octubre de 2026», con el mismo día en datetime.
• Botón de menú: «Secciones», traducido como el resto de la página.

Contraste y foco

El texto se muestra sobre la superficie de la página, tanto en las filas como en el panel abierto. La capa oscura empieza debajo de la cabecera de portada, así que esta nunca queda atenuada.

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: cada enlace y botón de la cabecera conserva el anillo de core, de 2 px y color --luz-focus-ring. La sección actual también está subrayada, así que la indicación no depende solo del color.
• Bordes: las dos líneas de la fila de secciones (--luz-divider) son decorativas y no tienen un mínimo; se conservan con colores forzados.

Tokens que usa

Los 15 tokens que usan las reglas de .luz-masthead de components/masthead.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-divider, --luz-surface-page, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-control-lg, --luz-space-2xs, --luz-space-md, --luz-space-xs

Typography

--luz-font-heading, --luz-font-sans, --luz-text-2xl, --luz-text-3xl, --luz-text-4xl, --luz-text-sm

Layout and breakpoints

--luz-bar-h

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