Catálogo · Todo el sitio
Anuncio
Comunica una sola cosa breve a todas las personas que visitan el sitio, en la parte superior de la página, como una oferta, un evento o un mantenimiento previsto.
Encaja mejor en: cualquier sitio — un aviso breve para todas las personas que visitan el sitio, como una oferta o un mantenimiento previsto
Ejemplo
Dos anuncios: una invitación a una jornada de puertas abiertas y un aviso de mantenimiento previsto.
Open day. Visit the winery on Saturday 25 October, from 11:00 to 18:00. Book a visit
Planned maintenance. The shop will be closed on Monday 3 November from 07:00 to 09:00. See what still works
On a site the announcement goes above the header, as wide as the window, and its text starts where the header’s row starts. Here it is as wide as the example.
Problemas conocidos
No se puede cerrar: un botón de cierre necesita un script, y para recordar una elección entre páginas hace falta almacenamiento. Mantén el anuncio breve y elimínalo del marcado cuando ya no haga falta.
En los navegadores sin posicionamiento de anclas CSS (anteriores a Chrome y Edge 125, Safari 26 y Firefox 147), el menú de la cabecera, a 768 px o menos, se abre en la parte superior de la ventana; antes de desplazarse por la página, cubre parte de la cabecera bajo el anuncio. Se cierra con Escape o al hacer clic fuera.
Código
Copiar el marcado
import "@luz-ds/catalog/components/announcement.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/announcement.min.css" integrity="sha384-q0dIp3JUb6xhG3u2VrEi+FU6Pgte4vL+70kh9fakM9rl9ARR/E8M/OilkMZiaNbC" crossorigin="anonymous">Un <luz-announcement> alrededor de un <section>, cuyo nombre indican sus primeras palabras. Va después del enlace para saltar al contenido y del consentimiento de cookies, y antes de la cabecera de la página (la cabecera del sitio o la cabecera de periódico, por ejemplo).
<a class="luz-skip-link" href="#main">Skip to main content</a>
<luz-announcement>
<section aria-labelledby="announcement-label">
<p><strong id="announcement-label">Open day.</strong> Visit the winery on Saturday 25 October,
from 11:00 to 18:00. <a href="/visits/">Book a visit</a></p>
</section>
</luz-announcement>
<header>…</header>Variantes y opciones
| Etiqueta o atributo | Efecto |
|---|---|
<luz-announcement> | Envuelve un solo <section>, que se convierte en una franja del ancho de su contenedor, con una superficie atenuada y una línea inferior, en texto sans pequeño. El texto empieza donde empieza la fila de la cabecera. Una etiqueta que ningún script define: no tiene clase ni rol propios. |
tone="warning" | En la etiqueta, el único tono: los colores de aviso, para algo que impide a quien visita la página hacer lo que venía a hacer, como un mantenimiento. Exprésalo también con palabras: «Mantenimiento previsto». Cualquier otro valor deja la franja sencilla. |
Cómo funciona
CSS de @luz-ds/catalog. Sin JavaScript: <luz-announcement> es una etiqueta que ningún script define.
- Es una franja de la página, dentro del flujo: se desplaza con la página y una cabecera
.o-stickypermanece fija arriba, debajo. No cubre la página. - Su relleno en línea alinea el texto con la fila de la cabecera, hasta un ancho de
--luz-content-max, en ambas direcciones de escritura. - No tiene botón de cierre. Para cerrarlo de forma permanente se necesita un script y un valor almacenado en el navegador; nunca se muestra un botón que no hace nada sin un script. Un anuncio dura poco: elimina su marcado cuando termina el evento.
- No hay un tono de éxito o error: un anuncio no responde a algo que haya hecho quien visita la página. Para eso, usa una alerta en la página.
Sin JavaScript
No cambia nada: no hay ningún script.
Teclado y ARIA
- Orden: su enlace va después del enlace para saltar al contenido y antes de la cabecera.
- Región: no es la región
banner, que es el<header>de la página; por eso se llama anuncio. Un<section>con nombre es una región, así que el lector de pantalla la incluye entre las regiones de la página; asígnale un nombre conaria-labelledbyque apunte a sus primeras palabras. Si solo contiene esa frase, basta un<div>sin nombre. - No es una región dinámica: aparece al cargar la página, así que no necesita
role="status"nirole="alert"; el lector de pantalla lo lee junto con el resto de la página.
Contraste y foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Úsalo para comunicar durante unos días y en todas las páginas una sola cosa breve y oportuna que deba saber quien visita el sitio: una oferta, un evento, un mantenimiento previsto o un cambio de horario.
Cuándo no usarlo
No lo uses para algo que corresponda a una sola página o a una persona: inclúyelo en la página o responde con una alerta o un aviso emergente.
- No muestres dos anuncios a la vez ni dejes uno durante meses: si una franja nunca cambia, la gente deja de leerla.
- No lo uses para pedir consentimiento para las cookies: usa el banner de consentimiento de cookies.
- No incluyas un formulario ni más de un enlace.
Sustituye las barras de anuncios que cada sitio crea con su propio CSS. No elimina nada de LUZ.
Qué hacer y qué no
Cómo escribir el contenido
Una frase, dos como máximo. Empieza indicando el tema en negrita y termina con un punto: «Jornada de puertas abiertas.» o «Mantenimiento previsto.».
- Indica la fecha y la hora, incluido el día de la semana, para que la información siga siendo válida aunque se lea más tarde.
- Termina con un enlace que explique adónde lleva: «Reserva una visita», no «Más información».
- Escribe con mayúscula inicial y sin signos de exclamación.
Contraste y foco
El texto y el enlace aparecen sobre la superficie de la franja.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Texto | --luz-text-primary on --luz-surface-muted | 15.8:1 | 15.1:1 | 20.1:1 | 4.5:1 |
Enlace | --luz-brand-primary on --luz-surface-muted | 5.6:1 | 7.7:1 | 13.5:1 | 4.5:1 |
Texto, aviso | --luz-text-primary on --luz-color-warning-bg over --luz-surface-page | 16.0:1 | 11.5:1 | 20.0:1 | 4.5:1 |
Enlace, aviso | --luz-brand-primary on --luz-color-warning-bg over --luz-surface-page | 5.7:1 | 5.9:1 | 13.5:1 | 4.5:1 |
Anillo de foco en el enlace | --luz-focus-ring on --luz-surface-muted | 5.6:1 | 7.7:1 | 20.1:1 | 3:1 |
Anillo de foco en el enlace, aviso | --luz-focus-ring on --luz-color-warning-bg over --luz-surface-page | 5.7:1 | 5.9:1 | 20.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo AA de WCAG 2.2 es: 4,5:1 para texto y 3:1 para anillos de foco.
- Foco: contorno de 2 px de core con
--luz-focus-ringalrededor del enlace. - El enlace está subrayado, como todos los enlaces dentro del texto: no se distingue solo por el color.
- El amarillo del aviso nunca es la única señal: las primeras palabras explican de qué se trata.
Tokens que usa
Los 11 tokens que leen las reglas de components/announcement.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.
- Color
--luz-color-warning-accent,--luz-color-warning-bg,--luz-divider,--luz-surface-muted,--luz-text-primary- Spacing and sizing
--luz-space-xs,--luz-space-md,--luz-space-xl- Typography
--luz-font-sans,--luz-text-sm- Layout and breakpoints
--luz-content-max
Teclado y ARIA están en la pestaña Código.