> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/hero-section.md). # Hero section {% hint style="info" %} Noms des composants : **heroHeader**, **heroUltraLarge** {% endhint %} {% tabs %} {% tab title="Simple" %} {% embed url="" %} {% endtab %} {% tab title="Text" %} {% embed url="" %} {% endtab %} {% tab title="Image" %} {% embed url="" %} {% endtab %} {% tab title="Action" %} {% embed url="" %} {% endtab %} {% tab title="Famille" %} {% embed url="" %} {% endtab %} {% tab title="Ultra Large" %} {% embed url="" %} {% endtab %} {% endtabs %} *** ### Principes #### Impact La Hero Section doit capter l'attention en moins d'une seconde. Qu'il s'agisse d'un titre fort (variant simple) ou d'une image immersive (variant ultra large), la hiérarchie visuelle doit diriger l'œil instantanément vers le message principal ou l'offre commerciale. #### Clarté du Message L'équilibre entre le texte et l'image est primordial. Pour les variants avec visuels (image, action, famille), l'utilisation de zones d'ombre (overlay) ou de contrastes maîtrisés est indispensable pour garantir la lisibilité parfaite de la typographie, sans nuire à la qualité de l'image. #### Incitation à l'Action Sur les formats orientés conversion (variant action ou ultra large), le bouton d'action (CTA) doit être le point focal. Son positionnement et son contraste par rapport au fond doivent rendre l'étape suivante du parcours client évidente et irrésistible. #### Flexibilité de Composition Le système de variantes permet de moduler l'intensité de la section selon le besoin. Le design doit rester cohérent, que l'on utilise une structure minimaliste centrée sur le texte ou une mise en page complexe intégrant des visuels de vie (lifestyle).