04/Estructura

Hero

Portada con etiqueta numerada, titular grande, texto, acciones, nota y chips. La cuadrícula de fondo es opcional.

Con cuadrícula

01/Plataforma

Facturación clara
para tu negocio.

Un párrafo corto que explica qué haces y para quién. Dos o tres líneas como máximo.

Empezar ↗ Ver demo

Sin tarjeta de crédito. Más información

Laravel Livewire Alpine.js

HTML

<section class="cb-section cb-hero cb-hero--grid border-b-0">
  <div class="cb-wrap">
    <div class="cb-label"><b>01/</b>Plataforma</div>
    <h1 class="cb-h1">Facturación clara<br>para tu <em>negocio.</em></h1>
    <p class="cb-lead">Un párrafo corto que explica qué haces y para quién. Dos o tres líneas como máximo.</p>
    <div class="cb-actions">
      <a href="#" class="cb-btn cb-btn--primary">Empezar ↗</a>
      <a href="#" class="cb-btn cb-btn--outline">Ver demo</a>
    </div>
    <p class="cb-note">Sin tarjeta de crédito. <a href="#">Más información</a></p>
    <div class="cb-chips cb-hero__chips">
      <span class="cb-chip"><i class="cb-chip__swatch" style="--cb-chip-color: var(--cb-accent-700)"></i>Laravel</span>
      <span class="cb-chip"><i class="cb-chip__swatch"></i>Livewire</span>
      <span class="cb-chip"><i class="cb-chip__swatch" style="--cb-chip-color: var(--cb-accent-300)"></i>Alpine.js</span>
    </div>
  </div>
</section>

Centrado y sin cuadrícula

v2Nueva versión

Menos pasos.
Más trabajo hecho.

Usa cb-cta para centrar el texto, el párrafo y las acciones.

Probar gratis ↗

HTML

<section class="cb-section cb-hero cb-cta border-b-0">
  <div class="cb-wrap">
    <div class="cb-label"><b>v2</b>Nueva versión</div>
    <h1 class="cb-h1">Menos pasos.<br><em>Más trabajo hecho.</em></h1>
    <p class="cb-lead">Usa <code>cb-cta</code> para centrar el texto, el párrafo y las acciones.</p>
    <div class="cb-actions"><a href="#" class="cb-btn cb-btn--primary">Probar gratis ↗</a></div>
  </div>
</section>

Clases y modificadores

Clase	Descripción
`.cb-hero`	Espaciado de portada (96/80px, 64/56px en móvil).
`.cb-hero--grid`	Agrega la cuadrícula de fondo con máscara radial.
`.cb-h1`	Titular con `clamp(40px, 7.4vw, 92px)` y tracking -0.06em. `em` lo atenúa.
`.cb-lead`	Párrafo introductorio, máximo 640px.
`.cb-actions`	Fila de botones. En móvil ocupan todo el ancho.
`.cb-note`	Nota pequeña bajo las acciones.
`.cb-hero__chips`	Margen superior para la fila de chips.
`cb-grid-bg`	Utilidad: la cuadrícula en cualquier contenedor. Tamaño con `--cb-grid-size`.

Accesibilidad

Usa un solo h1 por página.
La cuadrícula es un pseudoelemento decorativo sin contenido.