Hero

Un hero es lo primero de una portada de marketing o de documentación. Dibuja una <section> con un <h1> dentro, así que es el encabezado de la página, no un cartel decorativo que resulta ser grande.

Hero básico

Sitios estáticos, sin el framework

Escribe funciones que devuelven HTML. Obtén un sitio completo.

hero({
  level: 2,
  title: 'Sitios estáticos, sin el framework',
  description: 'Escribe funciones que devuelven HTML. Obtén un sitio completo.',
},
  button({ size: 'lg' }, 'Empezar'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Leer la documentación'),
)

Con antetítulo

Una línea corta sobre el título: una versión, una categoría, un anuncio.

sitelo 2.7

Ahora con biblioteca de componentes

Setenta componentes, sin runtime, con un script opcional.

Ver los componentes

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Ahora con biblioteca de componentes',
  description: 'Setenta componentes, sin runtime, con un script opcional.',
},
  button({ size: 'lg', href: '/es/ui' }, 'Ver los componentes'),
)

Alineado a la izquierda

Código abierto

Hecho a la vista de todos

Licencia MIT, y lo bastante pequeño como para leerlo en una tarde.

Verlo en GitHub

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Código abierto',
  title: 'Hecho a la vista de todos',
  description: 'Licencia MIT, y lo bastante pequeño como para leerlo en una tarde.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'Verlo en GitHub'),
)

Con medios

Pasar media cambia a dos columnas en cuanto hay sitio para ellas, y vuelve a apilar en una sola en pantallas estrechas. Casa de forma natural con mockup().

Míralo funcionando

Cuando llega al navegador, cada página ya es HTML estático.

example.com

Hola mundo

Renderizado en la compilación.

hero({
  level: 2,
  align: 'start',
  title: 'Míralo funcionando',
  description: 'Cuando llega al navegador, cada página ya es HTML estático.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Hola mundo'),
      text({ variant: 'small', tone: 'muted' }, 'Renderizado en la compilación.'),
    ),
  ),
},
  button('Empezar'),
)

Dentro de un contenedor

Un hero no tiene límite de ancho propio: mételo en un container() para que quede alineado con todo lo demás de la página.

Contenido

El contenedor fija el ancho; el hero fija el ritmo.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'Contenido',
    description: 'El contenedor fija el ancho; el hero fija el ritmo.',
  }),
)

Nivel de encabezado

El título es por defecto el <h1> de la página, que es lo correcto en una página de aterrizaje. Un hero usado a media página no es el encabezado de la página, así que bájalo con level — todas las demos de esta página lo hacen, porque la página ya tiene su propio h1.

Solo un título

Cada parte es opcional, y nada vacío se dibuja.

Documentación

hero({ level: 2, title: 'Documentación' })

Props

Prop	Tipo	Por defecto	Descripción
`eyebrow`	`Child`	—	Línea pequeña en mayúsculas sobre el título.
`title`	`Child`	—	Se dibuja como el h1 de la página.
`description`	`Child`	—	La frase que va debajo.
`media`	`Child`	—	Al lado del texto en pantalla ancha, encima en pantalla estrecha.
`align`	`'center' \| 'start'`	`'center'`	Alineación del texto cuando no hay medios.
`level`	`number`	`1`	Nivel de encabezado del título. Bájalo para un hero a media página.
`as`	`string`	`'section'`	Elemento que se renderiza.

Los hijos pasan a ser la fila de acciones bajo la descripción.