Hero

Un hero est la première chose sur une page d’accueil marketing ou de documentation. Il rend une <section> contenant un <h1> — c’est donc le titre de la page, pas une bannière décorative qui se trouve être grande.

Hero de base

Des sites statiques, sans le framework

Écrivez des fonctions qui renvoient du HTML. Obtenez un site complet.

hero({
  level: 2,
  title: 'Des sites statiques, sans le framework',
  description: 'Écrivez des fonctions qui renvoient du HTML. Obtenez un site complet.',
},
  button({ size: 'lg' }, 'Commencer'),
  button({ size: 'lg', variant: 'outline', color: 'neutral' }, 'Lire la documentation'),
)

Avec un surtitre

Une courte ligne au-dessus du titre — une version, une catégorie, une annonce.

sitelo 2.7

Désormais avec une bibliothèque de composants

Soixante-dix composants, aucun runtime, un script facultatif.

Parcourir les composants

hero({
  level: 2,
  eyebrow: 'sitelo 2.7',
  title: 'Désormais avec une bibliothèque de composants',
  description: 'Soixante-dix composants, aucun runtime, un script facultatif.',
},
  button({ size: 'lg', href: '/fr/ui' }, 'Parcourir les composants'),
)

Aligné à gauche

Open source

Construit au grand jour

Sous licence MIT, et assez petit pour se lire en un après-midi.

Voir sur GitHub

hero({
  level: 2,
  align: 'start',
  eyebrow: 'Open source',
  title: 'Construit au grand jour',
  description: 'Sous licence MIT, et assez petit pour se lire en un après-midi.',
},
  button({ href: 'https://github.com/paul-browne/sitelo' }, 'Voir sur GitHub'),
)

Avec un média

Passer media bascule sur deux colonnes dès qu’il y a la place, et revient à une seule sur un écran étroit. Cela se marie naturellement avec mockup().

Voyez-le tourner

Chaque page est du HTML statique au moment où elle atteint le navigateur.

example.com

Bonjour le monde

Rendu au moment du build.

hero({
  level: 2,
  align: 'start',
  title: 'Voyez-le tourner',
  description: 'Chaque page est du HTML statique au moment où elle atteint le navigateur.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
      text({ variant: 'h5', as: 'div' }, 'Bonjour le monde'),
      text({ variant: 'small', tone: 'muted' }, 'Rendu au moment du build.'),
    ),
  ),
},
  button('Commencer'),
)

Dans un conteneur

Un hero n’a pas de limite de largeur propre — mettez-le dans un container() pour qu’il s’aligne avec le reste de la page.

Contenu

Le conteneur fixe la largeur ; le hero fixe le rythme.

container({ size: 'md', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  hero({
    level: 2,
    title: 'Contenu',
    description: 'Le conteneur fixe la largeur ; le hero fixe le rythme.',
  }),
)

Niveau de titre

Le titre est par défaut le <h1> de la page, ce qui est juste pour une page d’accueil. Un hero placé en milieu de page n’est pas le titre de la page : abaissez-le avec level — c’est ce que fait chaque démo ici, puisque la page a déjà son propre h1.

Rien qu’un titre

Chaque partie est facultative, et rien de vide n’est rendu.

Documentation

hero({ level: 2, title: 'Documentation' })

Props

Prop	Type	Défaut	Description
`eyebrow`	`Child`	—	Petite ligne en capitales au-dessus du titre.
`title`	`Child`	—	Rendu comme le h1 de la page.
`description`	`Child`	—	La phrase en dessous.
`media`	`Child`	—	À côté du texte sur écran large, au-dessus sur écran étroit.
`align`	`'center' \| 'start'`	`'center'`	Alignement du texte en l’absence de média.
`level`	`number`	`1`	Niveau de titre. À abaisser pour un hero en milieu de page.
`as`	`string`	`'section'`	Élément à rendre.

Les enfants deviennent la rangée d’actions sous la description.