Un hero est un composant qui s'appuie sur le composant section et fait la part belle à l'image (contenue dans une vignette) et à des textes courts. Il fait donc appel aux balisage de ces deux composants.
Un hero peut contenir des éléments de layout comme une cheminée ou des colonnes, mais aussi bien entendu des éléments de contenus comme des tuiles, des textes avec une ombre dessus...
Par défaut, un hero est horizontal et s'adapte à la hauteur des éléments qu'il contient.
<section class="fw-section hero"> <div class="vignette vignette_photo"> <div class="hero__container section__container">
See the Pen Hero - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
fw-section* hero section__container hero__container * on peut aussi placer le hero DANS une balise fw-section
La classe hero_v sert uniquement à modifier le recadrage de la vignette.
Pour bien gérer les alignements verticaux, il est nécessaire de mettre le hero à l'intérieur de la fh-section.
<section class="fw-section fh-section"> <div class="hero hero_v block_v-center"> <div class="vignette vignette_photo"> <div class="hero__container section__container">
See the Pen Hero vertical - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
fw-section fh-section hero hero_v block_v-center hero__container section__container
Ci-dessous, le hero vertical est placé à l'intérieur d'une colonne qui divise la section fh+fw en deux.
<section class="fw-section fh-section"> <div class="columns block_no-margin"> <div class="column column_1-2 fh-section block_no-margin"> <div class="hero hero_v block_v-center"> <div class="vignette vignette_photo"> <div class="hero__container section__container">
See the Pen Hero vertical colonne - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.