SectionHeader

Bloque de apertura de página

stable v1.0.0

Preview

12 mayo 2026 · Diseño estratégico

El veloz murciélago hindú

Pack my box with five dozen liquor jugs and bring them quickly.

Componente real a tamaño real (title 64px desktop / 36px mobile). Única concesión: as="h2", el h1 de esta página de docs es el título de arriba; en uso real el title es siempre h1.

Anatomía

ElementoFamiliaTamañoRequerido
MetadataGeorama14px / 400, secondaryNo
Title (h1)Aleo64px / 500 → 36px mobile
LeadAleo28px / 400 → 22px mobileNo
Hero imagen/aFull width, radius 4pxNo

Props

PropTipoNota
titlestringRequerida
leadstringOpcional. Máximo un párrafo.
metadatastringOpcional
heroImage, heroAltstringOpcional
as'h1' | 'h2'Default h1. h2 solo para contextos donde el h1 ya existe (como esta página).

Variantes

VarianteEjemplo
Solo títuloPáginas de listado
Título + leadPágina about
Título + metadataArtículo sin hero
Título + metadata + heroArtículo con imagen destacada

Restricciones

  • Uno por página.
  • Title siempre h1.
  • Lead máximo un párrafo.
  • Sin botones CTA. Sin back link.

Decisiones

DecisiónPor qué
Metadata encima del títuloContexto antes del heading
Sin back linkNavPill lo maneja. Back links desperdician espacio valioso.
Lead en AleoPuente visual entre h1 y body