# Hero

> Parte de arriba de una página: encabezado de página, editorial, foto a sangre, dividido y de landing, con captura y página de ejemplo.

Categoría: Contenido · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

El hero es la parte de arriba de una página, justo bajo el header: dice de qué trata la página y, si hace falta, cuál es la acción principal. Elige la variante según el tipo de página.

        Variante | Para qué página | Lleva

        Encabezado de página | Páginas interiores de contenido: un servicio, una guía, una noticia. Es la que más se repite. | Migas de pan, ceja, título, bajada, fecha de actualización y una acción opcional.

        Editorial | Portada de una sección o de un sitio sin una foto que aporte. | Titular grande, bajada, un botón y un enlace opcionales, y un párrafo al lado.

        Foto a sangre | Portada de un sitio o una campaña con una foto real del lugar, las personas o el producto. Una por sitio. | Foto con velo Ink, titular, bajada y dos botones.

        Dividido | Portada de un subsitio o de un servicio que quiere mostrar una foto sin poner texto encima. | Texto y foto lado a lado; en el celular, el texto primero.

        De landing | Eventos y campañas (Patrones › Landings de conversión). Sugerida, no obligatoria. | Titular que es una idea, bajada, fecha, horario y lugar, y el botón principal.

- Un solo protagonista: el título es el único h1 de la página y la bajada va un paso más chica, para que no compita con él.

- Un botón con peso: uno principal que dice lo que pasa al apretarlo («Solicitar certificado», no «Saber más»). Si hay un segundo, va como contorno o enlace.

- Que asome lo que sigue: ningún hero ocupa la pantalla completa. La foto a sangre llega al 80 % del alto, para que se vea el comienzo del contenido.

- Fotos reales, como <img>: con texto alternativo y fetchpriority="high", nunca como fondo de CSS. El texto va en HTML, nunca dentro de la imagen.

- Sin hero en tableros, resultados de búsqueda ni páginas sin un mensaje principal: ahí manda el contenido.

- Para destacar algo dentro de la página (una inscripción, una campaña), usa Banners.

Por qué:
  Con un hero a pantalla completa, 6 de 8 personas no notaron que la página seguía hacia abajo (Nielsen Norman Group, 2016). Las fotos de stock y las decorativas se ignoran; las reales sí se miran (NN/g, 2010). Lo que va arriba en un recuadro llamativo o con el texto dentro de la imagen se salta como si fuera publicidad (NN/g, 2018). La portada dice qué haces con una frase clara y destaca una sola acción (NN/g, 2024). Investigación completa en docs/solar/investigacion-heros.md.

Cada variante muestra una captura en escritorio. Al hacer clic se abre su página de ejemplo, con el header y el contenido que sigue; achica la ventana para verla en el celular.

## Encabezado de página

Para páginas interiores de contenido. Ubica a la persona con las migas de pan y la ceja, dice de qué trata la página y cuándo se actualizó. La acción es opcional: va a la derecha en escritorio y debajo en el celular. Sin foto ni fondo de color.

Ejemplo en página completa: https://utiliza.me/solar/demos/hero/encabezado-de-pagina.html

```html
<section class="border-b border-ccs-line dark:border-ccs-dark-line">
  <div class="mx-auto max-w-ccs px-4 pb-10 pt-8 sm:px-6 lg:pb-12 lg:pt-10">
    <nav aria-label="Migas de pan">
      <ol class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-ccs-slate dark:text-ccs-dark-text-2">
        <li><a href="#" class="rounded-lg hover:text-ccs-ink hover:underline dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inicio</a></li>
        <li aria-hidden="true" class="text-ccs-line-strong dark:text-ccs-dark-line-strong">/</li>
        <li><a href="#" class="rounded-lg hover:text-ccs-ink hover:underline dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Servicios</a></li>
        <li aria-hidden="true" class="text-ccs-line-strong dark:text-ccs-dark-line-strong">/</li>
        <li><span aria-current="page" class="text-ccs-ink dark:text-ccs-dark-text">Certificado de origen</span></li>
      </ol>
    </nav>
    <div class="mt-6 grid gap-6 lg:grid-cols-12 lg:items-end lg:gap-12">
      <div class="lg:col-span-8">
        <p class="text-xs font-semibold uppercase tracking-widest text-ccs-blue dark:text-ccs-dark-accent">Servicio</p>
        <h1 class="mt-3 text-ccs-h1 md:text-ccs-h1-hero-sm">Certificado de origen</h1>
        <p class="mt-4 max-w-2xl text-ccs-body-l text-ccs-slate dark:text-ccs-dark-text-2">Acredita que tus productos se fabricaron en Chile para acceder a las rebajas de arancel de los acuerdos comerciales.</p>
        <div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-ccs-slate dark:text-ccs-dark-text-2">
          <span class="inline-flex h-6 items-center rounded-full bg-ccs-blue/10 px-2.5 text-xs font-semibold text-ccs-blue dark:bg-ccs-dark-overlay dark:text-ccs-dark-accent">Trámite en línea</span>
          <p>Actualizado el <time datetime="2026-11-10">10 de noviembre de 2026</time></p>
        </div>
      </div>
      <div class="lg:col-span-4 lg:flex lg:justify-end">
        <a href="#" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs bg-ccs-blue px-6 text-base font-medium text-white shadow-ccs-sm transition hover:bg-ccs-blue-mid active:scale-95 motion-reduce:active:scale-100 dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Solicitar certificado</a>
      </div>
    </div>
  </div>
</section>
```

## Editorial

Para la portada de una sección o de un sitio sin una foto que aporte: el titular grande hace de imagen. Display con punto final y, como máximo, una parte destacada con el degradado de marca. Si el titular pasa de 18 caracteres, usa H1 Hero en vez de Display. La bajada va en Body XL (Body L en el celular) y el párrafo del lado es opcional.

Ejemplo en página completa: https://utiliza.me/solar/demos/hero/editorial.html

```html
<section>
  <div class="mx-auto max-w-ccs px-4 pb-12 pt-12 sm:px-6 lg:pb-20 lg:pt-20">
    <p class="text-xs font-semibold uppercase tracking-widest text-ccs-blue dark:text-ccs-dark-accent">Comercio exterior</p>
    <h1 class="mt-5 text-ccs-display">Exportar, <span class="bg-ccs-banner-dark bg-clip-text text-transparent dark:bg-none dark:text-ccs-dark-accent">sin vueltas.</span></h1>
    <div class="mt-8 grid gap-8 lg:mt-12 lg:grid-cols-12 lg:items-end lg:gap-10">
      <div class="lg:col-span-7">
        <p class="max-w-xl text-ccs-body-l lg:text-ccs-body-xl">Certificados, visaciones y datos de tu operación en un solo lugar, para que tu carga salga a tiempo.</p>
        <div class="mt-8 flex flex-wrap items-center gap-3">
          <a href="#" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs bg-ccs-blue px-6 text-base font-medium text-white shadow-ccs-sm transition hover:bg-ccs-blue-mid active:scale-95 motion-reduce:active:scale-100 dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver servicios</a>
          <a href="#" class="inline-flex h-12 items-center gap-2 whitespace-nowrap rounded-ccs px-4 text-base font-medium text-ccs-blue transition hover:bg-ccs-blue/5 active:scale-95 motion-reduce:active:scale-100 dark:text-ccs-dark-accent dark:hover:bg-ccs-dark-hover dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
            Hablar con una persona
            <svg aria-hidden="true" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
      <p class="max-w-md text-ccs-body text-ccs-slate dark:text-ccs-dark-text-2 lg:col-span-4 lg:col-start-9">Para empresas que exportan o importan, de cualquier tamaño. Puedes hacer la mayoría de los trámites en línea.</p>
    </div>
  </div>
</section>
```

## Foto a sangre

Para la portada de un sitio o de una campaña con una foto real (el lugar, las personas, el producto); si la foto es decorativa, usa Editorial. Ocupa el 80 % del alto de la pantalla para que asome lo que sigue. Velo Ink de al menos 60 %, medido con la foto más clara posible. Botón blanco como principal y Contorno sobre fondo oscuro como segundo. Va con un header transparente sobre la foto (Header › S2). Una por sitio, solo en la portada.

Ejemplo en página completa: https://utiliza.me/solar/demos/hero/foto-a-sangre.html

```html
<section class="relative isolate flex min-h-[80svh] items-end overflow-hidden bg-ccs-ink text-white">
  <picture>
    <source media="(max-width: 767px)" srcset="assets/img/hero-foto-vertical.jpg">
    <img src="assets/img/hero-foto-horizontal.jpg" alt="Describe aquí qué muestra la foto" fetchpriority="high" class="absolute inset-0 -z-20 h-full w-full object-cover object-[70%_center]">
  </picture>
  <div aria-hidden="true" class="absolute inset-0 -z-10 bg-ccs-ink/60"></div>
  <div class="mx-auto w-full max-w-ccs px-4 pb-12 pt-32 sm:px-6 lg:pb-16">
    <p class="text-xs font-semibold uppercase tracking-widest text-ccs-dark-text-2">Cámara de Comercio de Santiago</p>
    <h1 class="mt-4 max-w-3xl text-ccs-h1 sm:text-ccs-h1-hero-sm lg:text-ccs-h1-hero">Hacemos que comerciar sea más simple.</h1>
    <p class="mt-5 max-w-xl text-ccs-body-l text-ccs-dark-text-2 lg:text-ccs-body-xl">Servicios, datos y una red de empresas para que tu negocio crezca en Chile y afuera.</p>
    <div class="mt-8 flex flex-wrap gap-3">
      <a href="#" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs bg-white px-6 text-base font-medium text-ccs-blue transition hover:bg-ccs-bg active:scale-95 motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-ccs-ink">Hazte socio</a>
      <a href="#" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs border border-white/40 bg-white/10 px-6 text-base font-medium text-white backdrop-blur-md transition hover:border-white hover:bg-white/20 active:scale-95 motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Conoce los beneficios</a>
    </div>
  </div>
</section>
```

## Dividido

Para la portada de un subsitio o de un servicio que quiere mostrar una foto real sin poner texto encima: el texto se lee siempre, sea cual sea la foto. En el celular va primero el texto y después la foto (4:3). La franja de datos bajo los botones es opcional: datos concretos, no cifras infladas.

Ejemplo en página completa: https://utiliza.me/solar/demos/hero/dividido.html

```html
<section>
  <div class="mx-auto grid max-w-ccs gap-8 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:items-center lg:gap-12 lg:py-16">
    <div>
      <p class="text-xs font-semibold uppercase tracking-widest text-ccs-blue dark:text-ccs-dark-accent">Para empresas socias</p>
      <h1 class="mt-4 max-w-xl text-ccs-h1 lg:text-ccs-h1-hero-sm">Haz crecer tu empresa con la red de la Cámara.</h1>
      <p class="mt-5 max-w-lg text-ccs-body-l text-ccs-slate dark:text-ccs-dark-text-2">Beneficios, capacitación y contactos para empresas de todos los tamaños, en un solo lugar.</p>
      <div class="mt-8 flex flex-wrap gap-3">
        <a href="#" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs bg-ccs-blue px-6 text-base font-medium text-white shadow-ccs-sm transition hover:bg-ccs-blue-mid active:scale-95 motion-reduce:active:scale-100 dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Hazte socio</a>
        <a href="#" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs border border-ccs-line-strong bg-white px-6 text-base font-medium text-ccs-ink transition hover:border-ccs-blue hover:text-ccs-blue active:scale-95 motion-reduce:active:scale-100 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver beneficios</a>
      </div>
      <dl class="mt-8 flex flex-wrap gap-x-10 gap-y-4 border-t border-ccs-line pt-6 dark:border-ccs-dark-line">
        <div class="flex flex-col-reverse">
          <dt class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">para responder tu solicitud</dt>
          <dd class="text-ccs-h3">48 horas hábiles</dd>
        </div>
        <div class="flex flex-col-reverse">
          <dt class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">sin trámites en papel</dt>
          <dd class="text-ccs-h3">100 % en línea</dd>
        </div>
      </dl>
    </div>
    <img src="assets/img/hero-foto-horizontal.jpg" alt="Describe aquí qué muestra la foto" fetchpriority="high" class="aspect-[4/3] w-full rounded-ccs object-cover object-[78%_center] lg:aspect-auto lg:h-full lg:min-h-[28rem]">
  </div>
</section>
```

## De landing

Para eventos y campañas, según Patrones › Landings de conversión: el titular es una idea, la bajada dice qué es y para quién, y la fecha (con día de la semana), el horario y el lugar se ven sin leer párrafos. Una sola palabra destacada en el titular. El botón principal dice lo mismo en toda la página. Es una propuesta de partida: la landing puede tener otro hero.

Ejemplo en página completa: https://utiliza.me/solar/demos/hero/de-landing.html

```html
<section class="relative isolate overflow-hidden bg-ccs-ink text-white">
  <div class="mx-auto grid max-w-ccs gap-10 px-4 pb-12 pt-12 sm:px-6 lg:grid-cols-12 lg:items-end lg:gap-14 lg:pb-16 lg:pt-20">
    <div class="lg:col-span-7">
      <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-ccs-dark-text-2"><span aria-hidden="true" class="h-1.5 w-1.5 rounded-full bg-ccs-green-br"></span>XI edición · Santiago</p>
      <h1 class="mt-4 max-w-2xl text-ccs-h1 sm:text-ccs-h1-hero-sm lg:text-ccs-h1-hero">El próximo cliente no hace <span class="text-ccs-green-br">clic.</span></h1>
      <p class="mt-5 max-w-xl text-ccs-body-l text-ccs-dark-text-2">Un día con quienes ya operan el comercio agéntico, el live shopping y el retail media en Chile.</p>
      <div class="mt-8 flex flex-wrap items-center gap-3">
        <a href="#entradas" class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-ccs bg-ccs-success-fill px-6 text-base font-semibold text-white transition hover:bg-ccs-success-fill-hover active:scale-95 motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Compra tu entrada</a>
        <a href="#programa" class="inline-flex h-12 items-center gap-2 whitespace-nowrap rounded-ccs px-4 text-base font-medium text-white underline underline-offset-4 transition hover:bg-white/10 active:scale-95 motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white">Ver programa</a>
      </div>
    </div>
    <dl class="border-t border-white/20 lg:col-span-5">
      <div class="grid grid-cols-[6rem_1fr] items-baseline gap-3 border-b border-white/20 py-4">
        <dt class="text-xs font-semibold uppercase tracking-widest text-ccs-dark-text-2">Fecha</dt>
        <dd><span class="block text-ccs-h3">Jueves 4 de diciembre</span><span class="block text-sm text-ccs-dark-text-2">2026</span></dd>
      </div>
      <div class="grid grid-cols-[6rem_1fr] items-baseline gap-3 border-b border-white/20 py-4">
        <dt class="text-xs font-semibold uppercase tracking-widest text-ccs-dark-text-2">Horario</dt>
        <dd><span class="block text-ccs-h3">9:00 a 18:00 h</span><span class="block text-sm text-ccs-dark-text-2">Acreditación desde las 8:00</span></dd>
      </div>
      <div class="grid grid-cols-[6rem_1fr] items-baseline gap-3 border-b border-white/20 py-4">
        <dt class="text-xs font-semibold uppercase tracking-widest text-ccs-dark-text-2">Lugar</dt>
        <dd><span class="block text-ccs-h3">Centro de eventos</span><span class="block text-sm text-ccs-dark-text-2">Dirección, comuna</span></dd>
      </div>
    </dl>
  </div>
</section>
```

## Guía: Comportamiento

- Ninguna variante necesita JavaScript.

- Foto a sangre usa min-h-[80svh]: el 80 % del alto visible, también en el celular cuando aparece o se esconde la barra del navegador. La foto vertical entra bajo 768 px con <picture>.

- Con el header transparente sobre la foto (Header › S2), el hero empieza arriba de todo y deja 128 px de margen superior para que el header no tape el texto.

- De landing: la cuenta regresiva es opcional y necesita JavaScript del proyecto. Cuando el evento pasa, el titular cambia (por ejemplo, «Gracias por la XI. Nos vemos en 2027»).

- En el celular los botones bajan a su propia línea y la acción de Encabezado de página queda bajo los metadatos.

## Guía: Accesibilidad

- Un solo h1 por página, y es el título del hero. La ceja va antes, como p.

- Migas de pan en un nav con aria-label y la página actual con aria-current="page".

- La foto lleva texto alternativo que dice qué muestra. Si es solo decorativa, alt="", y conviene la variante Editorial.

- Texto sobre foto: blanco o ccs-dark-text-2 sobre el velo Ink. El contraste se mide con APCA sobre la zona más clara de la foto, no sobre el promedio.

- La fecha de actualización va en <time datetime>; los datos del evento, en una lista de definiciones (<dl>).

- Botones de 48 px de alto, con foco visible en fondo claro y oscuro.