Hero

Código

Copiar el marcado

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/hero.min.css" integrity="sha384-yY6Z5/WOdLWJ5gJVsJd6tYONFWiaFA3uu8P2nHPqbXqdGhDCL5lVbif0VJ2a5CnB" crossorigin="anonymous">

<section class="luz-hero o-grid o-grid--split" aria-labelledby="hero-title">
  <div class="luz-hero__copy">
    <p class="luz-hero__eyebrow">12 and 13 May 2027 · Seville</p>
    <h1 class="luz-hero__title" id="hero-title">Acme Summit 2027</h1>
    <p class="luz-hero__lead">Two days of talks and workshops for retail teams.</p>
    <div class="o-actions">
      <a class="luz-btn luz-btn--primary" href="#register">Register</a>
      <a class="luz-btn luz-btn--outline" href="#programme">See the programme</a>
    </div>
  </div>
  <div class="luz-hero__media">
    <div class="luz-image luz-image--4x3">
      <img src="/img/venue-1280.jpg" width="1280" height="960" alt="The main hall, full, before the opening talk" fetchpriority="high" decoding="async">
    </div>
  </div>
</section>

Variantes y opciones

Dos modificadores, --centered y __media--bleed, como en la plantilla de página de producto. La etiqueta superior, la entradilla y la imagen son opcionales; sin imagen, el texto ocupa todo el ancho.

El bloque es una clase de landing sobre la cuadrícula dividida de core.

Cómo funciona

Un <section> con el nombre de su título, maquetado con la cuadrícula dividida de core y con estilos de components/hero.css de @luz-ds/catalog. No usa JavaScript.

• Las columnas son la cuadrícula dividida intrínseca de core: dependen del espacio disponible para el hero, no del ancho de la ventana. Un hero tan ancho como la página se divide a partir de unos 900 px de ventana; en una columna estrecha o con texto más grande permanece en una sola columna.
• El orden es el del código fuente: el texto va primero, a la izquierda en una página de izquierda a derecha y a la derecha en una de derecha a izquierda.
• Las acciones son el grupo de acciones de core, .o-actions: a 640 px o menos, los botones se apilan y ocupan todo el ancho.
• El desbordamiento mide la ventana sin una unidad de viewport, que cuenta la barra de desplazamiento y mueve la página lateralmente: la raíz de la página se convierte en un contenedor de tamaño (container-type: inline-size). La columna debe centrarse respecto a la ventana, como hace .o-container de core.
• El em de un título toma el color de --luz-title-accent, que por defecto es el del título.
• Las clases solo cambian el aspecto. El título debe ser el <h1> de la página.

Sin JavaScript

No cambia nada: el hero es HTML y CSS.

Teclado y ARIA

El hero no tiene interacción propia: Tab recorre sus enlaces en el orden del código fuente.

• aria-labelledby en <section> apunta al título, así que el hero es una región con el nombre de la página.
• Déjalo al principio de <main> para que el enlace para saltar al contenido llegue justo antes.

Contraste y foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un hero al principio de una página de inicio, una landing o una portada para explicar en pocas palabras de qué trata el sitio o el evento y qué hacer primero.

Cuándo no usarlo

No lo uses en una página a la que se llega para leer o completar una tarea: utiliza un <h1> sencillo y una entradilla, que ocupan menos espacio.

• Un hero por página y solo al principio.
• No lo uses para un mensaje en medio de la página: utiliza una sección y, si tiene que destacar, una banda de core.

Buenas y malas prácticas

Redacción del contenido

El título explica de qué trata el sitio o el evento, en estilo de frase y con menos de diez palabras.

• La etiqueta superior es un dato que hace falta conocer enseguida (una fecha y un lugar, el nombre de un producto), no un eslogan. Omítela si no la necesitas.
• La entradilla tiene una o dos frases breves: explica qué obtiene quien lee.
• Los botones empiezan con un verbo e indican adónde llevan: «Inscríbete», «Ver el programa».
• El alt de la imagen indica qué muestra, o queda vacío si es solo decorativa. Es lo primero de la página: no uses loading="lazy".

Contraste y foco

El título usa el color de texto principal y la etiqueta superior y la entradilla, el secundario, sobre la página. Los botones son de core.

Calculado a partir de los valores de los tokens de cada modo, redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: el hero no recibe el foco; sus botones conservan el anillo de foco del botón.
• Acento: el em de un título tiene el color del título, salvo que definas --luz-title-accent. El color es tuyo: comprueba el contraste con la superficie de la página en todos los modos que ofrezcas; el texto necesita 4,5:1.
• No pongas el texto sobre la imagen: el contraste dependería de ella y no hay ningún token que lo controle.

Tokens que utiliza

Los 19 tokens que leen, por familia, las reglas de .luz-hero en components/hero.css. 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-text-primary, --luz-text-secondary

Spacing and sizing

--luz-space-2xl, --luz-space-3xl, --luz-space-lg, --luz-space-md, --luz-space-sm, --luz-space-xl, --luz-space-xs

Typography

--luz-font-heading, --luz-font-mono, --luz-font-sans, --luz-text-2xl, --luz-text-3xl, --luz-text-4xl, --luz-text-base, --luz-text-lg, --luz-text-xl, --luz-text-xs

Teclado y ARIA están en la pestaña Código.