Core · Mostrar contenido
Franja
Aplica un tono a un bloque de la página de lado a lado, mientras su contenido conserva el ancho de columna.
Ejemplo
Una franja que indica a los visitantes cuándo termina el plazo de inscripción, con un tono que llega hasta los bordes del marco.
Registration closes on 30 April
The hall holds 400 people, and the Two days ticket sold out last year.
The tint runs to the edges of this frame; in a page, to the edges of the window. The content keeps the column.
Problemas conocidos
La franja tiene tres problemas, todos relacionados con la forma en que se dibuja el tono.
- Se recorta la información sobre herramientas que sobresale por arriba. La franja recorta cualquier elemento que sobresalga por arriba o por abajo. Una información sobre herramientas CSS de un control situado al principio de la franja se recorta con texto al 200 % o más. Empieza la franja con un encabezado y no pongas información sobre herramientas en el primer control. Los menús desplegables y otros popovers no se recortan.
- Botones de contorno y fantasma. Su color al pasar el puntero es el mismo tono de la franja, así que no se aprecia ningún cambio. La etiqueta y el contorno siguen identificándolos. Usa un botón principal y uno de contorno para ofrecer una alternativa.
- Colores forzados. Se elimina el tono, de modo que la franja queda compuesta por el encabezado, el texto y los botones entre dos líneas finas del color de texto del sistema.
Código
Copiar el marcado
<main id="main-content" class="o-container o-stack">
<!-- other sections -->
<section class="o-stack luz-band" aria-labelledby="last-seats-title">
<h2 id="last-seats-title">Registration closes on 30 April</h2>
<p>The hall holds 400 people, and the Two days ticket sold out last year.</p>
<div class="o-actions">
<a class="luz-btn luz-btn--primary" href="/register/">Register now</a>
</div>
</section>
</main>Variantes y opciones
No hay variantes: una clase que puedes aplicar a cualquier bloque. El diseño interior depende de ti: .o-stack distribuye el espacio entre sus elementos.
| Clase | Efecto |
|---|---|
.luz-band | El bloque usa el tono --luz-brand-subtle de lado a lado de la página, con 48 px (--luz-space-2xl) por encima y por debajo del contenido. El contenido conserva el ancho de columna de la página |
Cómo funciona
CSS de @luz-ds/core. No necesita JavaScript.
- La franja se mantiene dentro de la columna de la página, por lo que el texto conserva el borde inicial de la columna. El tono se dibuja con un
box-shadowque se extiende más allá del bloque y se recorta por arriba y por abajo conclip-path. La sombra no añade ancho desplazable;100vwsí lo haría cuando la página tiene una barra de desplazamiento. En un.o-shell, el tono termina en.o-main. - Cualquier bloque puede ser una franja: un
<section>con su encabezado o un<div>normal. - Colócala en la propia página, dentro de la columna principal. Dentro de una tarjeta o un elemento con fondo propio, el tono se dibuja sobre esa superficie y se sale del elemento si este es más ancho que la ventana.
Sin JavaScript
No cambia nada: la franja está hecha con CSS.
Teclado y ARIA
La franja no es interactiva ni añade ningún role.
- Un
<section>identificado conaria-labelledbyse convierte en un punto de referencia de tipo región; una franja<div>es solo un bloque. - El tono no transmite significado ni es lo que agrupa la franja: lo hacen la sección y su encabezado. La agrupación se conserva sin el tono (en colores forzados o al imprimir).
- Los controles de la franja conservan su propio anillo de foco. Los 48 px de espacio por arriba y por abajo dejan sitio para él con texto al 200 % y a 320 px de ancho.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa una franja para una llamada a la acción cerca del final de una página larga o para marcar una pausa en medio de ella.
Cuándo no usarlo
No pongas una franja en cada sección: si todo destaca, nada destaca.
- Como máximo, una franja por cada altura de pantalla; dos seguidas se perciben como un nuevo fondo, no como una llamada a la acción.
- No uses el tono para comunicar algo (un aviso o un estado): no transmite significado y los colores forzados lo eliminan. Usa una alerta.
- No pongas una franja dentro de una tarjeta, sobre un área
--luz-surfaceni alrededor de toda la página. En modo oscuro, el botón principal sobre un tono colocado encima de--luz-surfacebaja a 2,7:1, por debajo del 3:1 que necesita el borde de un control. - No pongas un
.luz-btn--secondaryen la franja: su relleno tiene el mismo color que el tono y parece texto normal.
Qué hacer y qué no
Cómo escribir el contenido
En una franja, el encabezado explica por qué actuar ahora, no cuál es la acción: «El plazo de inscripción termina el 30 de abril», no «Inscríbete».
- Añade una frase de apoyo, un botón principal y, si necesitas ofrecer una alternativa, un botón de contorno.
Contraste y foco
La franja coloca el contenido sobre --luz-brand-subtle, encima de la página.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Encabezado y texto | --luz-text-primary on --luz-brand-subtle over --luz-surface-page | 14.3:1 | 12.7:1 | 20.1:1 | 4.5:1 |
Texto secundario | --luz-text-secondary on --luz-brand-subtle over --luz-surface-page | 5.6:1 | 6.3:1 | 18.5:1 | 4.5:1 |
Enlace y etiqueta y borde del botón de contorno | --luz-brand-primary on --luz-brand-subtle over --luz-surface-page | 5.1:1 | 6.5:1 | 13.6:1 | 4.5:1 |
Relleno del botón principal | --luz-brand-fill on --luz-brand-subtle over --luz-surface-page | 5.1:1 | 3.0:1 | 13.6:1 | 3:1 |
Etiqueta del botón principal | --luz-text-on-fill on --luz-brand-fill | 6.0:1 | 4.9:1 | 14.1:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-brand-subtle over --luz-surface-page | 5.1:1 | 6.5:1 | 20.1:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco y bordes de controles.
- Foco: la franja no lo recibe; los elementos de su interior conservan su propio anillo
--luz-focus-ring, dibujado a 4 px. Los 48 px de relleno de la franja lo mantienen dentro del tono. - Combinación con poco contraste: el relleno del botón principal tiene una relación de 3,0:1 con el tono en modo oscuro. Su etiqueta alcanza 4,9:1 e identifica el control, por lo que este sigue siendo reconocible; coloca la franja en la página, nunca sobre una superficie.
- Colores forzados: se elimina el tono y dos líneas de 1 px
CanvasTextmarcan los bordes superior e inferior de la franja.
Tokens que usa
Los 2 tokens que lee components/band.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Spacing and sizing
--luz-space-2xl
El teclado y ARIA están en la pestaña Código.