Catálogo · Estructura de página
Cabecera de página de blog
Da título y una frase explicativa a una página que no sea un artículo, como «Acerca de» o «Contacto».
Encaja mejor en: blog — una página que no es un artículo, como «Acerca de» o «Contacto»
Ejemplo
La cabecera de una página «Acerca de», con su título y una frase.
About the Review
An independent paper for Vejer and the coast, paid for by its readers.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
import "@luz-ds/catalog/components/page-header.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-header.min.css" integrity="sha384-ztr1TpMlxsr0pNxReBhVERsfWxHXAiYMNVCFT+0huLQ7YHwnUvU04TQSacaMQClw" crossorigin="anonymous"><div class="luz-page-header">
<h1 class="luz-page-header__title">About the Review</h1>
<p class="luz-page-header__lead">An independent paper for Vejer and the coast, paid for by its readers.</p>
</div>Variantes y opciones
No hay modificadores. La entradilla es opcional.
| Clase | Qué hace |
|---|---|
.luz-page-header | El bloque, con 32 px de espacio debajo |
.luz-page-header | El título: tipografía de encabezado, tamaño 3xl y peso ligero; 2xl a 640 px o menos |
.luz-page-header | Un párrafo en el color de texto secundario, con un máximo de 600 px de ancho |
Cómo funciona
Un contenedor con título y entradilla, con estilos de components/page-header.css de @luz-ds/catalog. Sin JavaScript.
- Las clases solo cambian el aspecto. El título debe ser el
<h1>de la página. - En árabe, el título no tiene espaciado entre letras, ya que separaría los caracteres unidos de la escritura.
- Los artículos usan la cabecera de artículo, con su sección, entradilla y firma.
Sin JavaScript
No cambia nada: la cabecera de página usa HTML y CSS.
Teclado y ARIA
La cabecera de página no tiene interacciones.
- El título
<h1>permite encontrar el título de la página en la lista de encabezados del lector de pantalla. - Ponla dentro de
<main>para que el enlace para saltar al contenido lleve justo antes de ella.
La pestaña Diseño contiene el contraste y el foco.
Diseño
Cuándo usarlo
Usa una cabecera de página al principio de una página de blog o periódico que no sea un artículo (Acerca de, Contacto o el índice de una sección) para darle título y explicar su propósito en una frase.
Cuándo no usarlo
No la uses para una sección dentro de la página: usa un encabezado normal del nivel adecuado.
- Una cabecera de página por página.
- Los artículos usan la cabecera de artículo, que incluye autor y fecha.
Qué hacer y qué no
Cómo escribir el contenido
El título nombra la página en pocas palabras y con mayúscula inicial.
- La entradilla es una frase de menos de 25 palabras que explica qué puede hacer aquí quien lee.
- Haz que el título coincida con el enlace que lleva a esta página y con el principio de
<title>.
Contraste y foco
En la página, el título usa el color de texto principal y la entradilla, el secundario.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo necesario |
|---|---|---|---|---|---|
Título | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Entradilla | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
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.
Tokens que usa
Los 8 tokens que usan las reglas de .luz-page-header de components/page-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.
- Spacing and sizing
--luz-space-2xs,--luz-space-xl- Typography
--luz-font-heading,--luz-text-2xl,--luz-text-3xl,--luz-text-base
La pestaña Código contiene el teclado y ARIA.