# Cabecera de portada Abre la portada y las secciones de un periódico con la fecha, una búsqueda, el nombre de la publicación en letra grande y sus secciones, en tres filas que se desplazan con la página. ### Problemas conocidos El problema propio de la cabecera de portada y los de las piezas de las que se compone. - **El menú de la cabecera de portada sin posicionamiento de anclas.** En los navegadores sin posicionamiento de anclas CSS, el menú de secciones se abre cerca de la parte superior de la ventana y, mientras está abierto, cubre el nombre de la publicación y el botón de menú. Pulsa Escape o haz clic fuera del menú para cerrarlo y volver a la página. - **El panel del menú.** Si sigues pulsando Tab después del último enlace del menú abierto, el foco avanza por la página y el menú permanece abierto encima; Escape lo cierra. Consulta los [problemas conocidos de la barra de navegación](https://nandovejer.github.io/luz/es/docs/catalog/navbar/#known-issues). ### Copiar el marcado Con la búsqueda de catalog en la fila superior: Masthead markup ```html ``` ### Variantes y opciones Ningún modificador. La cabecera de portada es una clase de catalog aplicada a un `

` nativo, maquetada con los objetos de core en el marcado. - `.luz-masthead`: En `

`: la cabecera de portada del periódico. La superficie de la página, tres filas en un `.o-stack`, 16 px arriba y abajo, no fija - `.luz-masthead__top`: En un `.o-row`: la fecha al inicio y las acciones al final, en una sola fila - `.luz-masthead__date`: La fecha de hoy en un ``, pequeña y secundaria; se ajusta para dejar su espacio a las acciones - `.luz-masthead__actions`: En un `.o-row`: la [búsqueda](https://nandovejer.github.io/luz/es/docs/catalog/search/) de catalog y después su [selector de idioma](https://nandovejer.github.io/luz/es/docs/catalog/lang-switch/) - `.luz-masthead__brand`: El nombre de la publicación como enlace a la página de inicio, con la fuente de los títulos, grande y centrado, seminegrita y subrayado solo al pasar el cursor. Un `` de logotipo dentro mide 88 px de alto - `.luz-masthead__sections`: En un `.o-row`: el botón de menú y la barra de navegación entre dos líneas, centrados a partir de 769 px; su panel se abre debajo de esta fila - `.o-container.o-container--inline.o-stack` (core): El ancho y los márgenes laterales de la página, para que la cabecera de portada empiece donde empieza el contenido, y sus tres filas - `.luz-nav-toggle`, `.luz-navbar` (catalog): El botón de menú y las secciones: consulta la [barra de navegación](https://nandovejer.github.io/luz/es/docs/catalog/navbar/) ### 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 `` 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 `

` 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 `` cuyo `alt` contiene el nombre de la publicación, sin texto al lado. - **Puntos de referencia:** un `

` que es hijo directo de `` es el banner. Pon antes el [enlace para saltar al contenido](https://nandovejer.github.io/luz/es/docs/components/skip-link/). ### 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](https://nandovejer.github.io/luz/es/docs/catalog/site-header/) 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.