CSS: hero ​

div[class~="instui-hero"] — Section d'en-tête pleine largeur avec titre, sous-titre et image d'arrière-plan optionnelle.

✅ Utiliser Hero quand :

  • Vous avez besoin d'un en-tête de page proéminent avec une hiérarchie visuelle

  • La page bénéficie d'une grande section d'ouverture accrocheuse

  • Vous souhaitez inclure des images d'arrière-plan ou des accents en dégradé 🚫 Ne pas utiliser Hero quand :

  • Vous construisez un en-tête de page simple — utilisez Page-Layout à la place

  • Le hero entre en concurrence avec du contenu critique — priorisez la lisibilité

Accessibilité ​

  • Ensure the title is in an <h1> tag for semantic structure
  • If using background images, provide sufficient color contrast for text
  • Avoid autoplay on video or animation that could distract from content

Utilisation ​

css
@import "@pantoken/plugin-layouts/layouts.css";

Emplacements ​

EmplacementDescription
subtitleContenu du sous-titre du Hero
titleContenu du titre du Hero

Parties ​

PartieDescription
.instui-actionsBoutons d'action ou liens optionnels.
.instui-backgroundCouche d'arrière-plan optionnelle (image ou dégradé).
.instui-contentConteneur pour le texte et les actions du hero.
.instui-overlaySuperposition semi-transparente optionnelle pour le contraste du texte.
.instui-subtitleTexte d'accompagnement ou description optionnels.
.instui-titleMain hero title (typically <h1>).

Pseudo-éléments ​

Pseudo-élémentDescription
::before—

États ​

ÉtatDescription
:optional—

Tokens consommés ​

TokenTypeValeur
--instui-color-primary-background——
--instui-font-size-hero<length>—
--instui-font-size-large<length>—
--instui-font-weight-bold——
--instui-space-large——
--instui-space-medium——

Connexe ​