Applied Pattern

Hero Pattern

El hero es una de las aperturas más importantes de una interfaz. Este patrón muestra cómo construirlo usando el sistema sin salir de la lógica del framework.

Overview

Qué resuelve este patrón

Un hero introduce una página o sección principal, establece jerarquía, presenta el mensaje central y normalmente ofrece una o dos acciones clave.

Este patrón no depende de clases nuevas. Se construye combinando section, container, stack, width, text y align.

Modules Used

Módulos que intervienen

Sections

Define la respiración vertical amplia del bloque.

Containers

Controla el ancho general del hero.

Stack

Organiza internamente kicker, título, texto y acciones.

Typography

Construye la jerarquía del contenido principal.

Width

Permite controlar el ancho de lectura del texto introductorio.

Align

Organiza CTAs o acciones en fila o columna según el viewport.

Live Structure

Ejemplo visual del patrón

Framework Documentation

Build Better Interfaces

Un sistema CSS modular para construir interfaces claras, escalables y consistentes.

Primary Action Secondary Action

HTML Structure

Código base del patrón

<section class="section section-lg">
  <div class="container container-lg">
    <div class="stack stack-lg text-center">

      <div class="stack stack-sm">
        <p class="meta ls-sm">Framework Documentation</p>
        <h1 class="title title-xl fnt-uppercase">Build Better Interfaces</h1>
      </div>

      <p class="narrow centered">
        Un sistema CSS modular para construir interfaces claras, escalables y consistentes.
      </p>

      <div class="align align-col sm:align-row justify-center gap-2 wrap">
        <a href="#">Primary Action</a>
        <a href="#">Secondary Action</a>
      </div>

    </div>
  </div>
</section>

Variants

Variantes comunes

Centered

Hero centrado

Ideal para documentación, productos, portadas o mensajes principales claros.

Split

Hero dividido

Útil cuando el contenido textual comparte espacio con media o visual.

Minimal

Hero mínimo

Versión más contenida para páginas internas o módulos secundarios.

Split Example

Ejemplo de hero dividido

<section class="section section-lg">
  <div class="container container-xl">
    <div class="grid cols-1 lg:cols-1-1 gap-lg items-center">
      <div class="stack stack-md">
        <p class="meta ls-sm">Category</p>
        <h1 class="title title-xl fnt-uppercase">Split Hero</h1>
        <p class="medium">Texto principal del bloque.</p>
        <div class="align align-col sm:align-row gap-2 wrap">
          ...
        </div>
      </div>

      <div>
        Media / Illustration / Preview
      </div>
    </div>
  </div>
</section>

Design Decisions

Decisiones clave del patrón

El hero necesita ritmo amplio, por eso usa section-lg.
El contenido textual necesita jerarquía clara, por eso usa meta + title + texto de apoyo.
El texto secundario debe tener ancho controlado, por eso usa narrow o medium.
Las acciones deben reacomodarse en móvil, por eso usan align-col sm:align-row.