Hero Header Sections
hero-essay
stable Sur waimia · 1 Contenu inline (instance)Énoncer la proposition de valeur
Hero d'article éditorial avec accroche italique et métadonnées auteur, date et temps de lecture.
Instances sur le site
Global 0 instance en page composable
-
src/components/templates/EssayTemplate.astro
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
kicker | Contenu | text | Oui | fr / en | · |
h1 | Contenu | text | Oui | fr / en | · |
lede | Contenu | text | Oui | fr / en | · |
author | Contenu | text | Oui | · | · |
date | Contenu | text | Oui | · | · |
reading_time | Contenu | text | Non | fr / en | · |
hero_image | Contenu | image | Non | · | · |
hero_image_alt | Contenu | image | Non | fr / en | · |
illustration | Contenu | object | Non | · | · |
Déclinaisons · 16
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 3 curées, 13 générées. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.
-
Hero essai · papier 2
curéehero-essay--paper-2 -
Hero essai · papier 3
curéehero-essay--paper-3 -
Hero essai · encre
curéehero-essay--ink -
hero-essay · split
généréehero-essay--split -
hero-essay · centré
généréehero-essay--centered -
hero-essay · masthead
généréehero-essay--masthead -
hero-essay · entonnoir
généréehero-essay--funnel -
hero-essay · image pleine
généréehero-essay--full-bleed-image -
hero-essay · empilé
généréehero-essay--stacked -
hero-essay · minimal
généréehero-essay--minimal -
hero-essay · avec formulaire
généréehero-essay--with-form -
hero-essay · split inversé
généréehero-essay--split-reverse -
hero-essay · fond vidéo
généréehero-essay--video-bg -
hero-essay · centré étroit
généréehero-essay--centered-narrow -
hero-essay · avec bande de logos
généréehero-essay--with-logos-strip
Comparer les déclinaisons · 15
Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.
-
Hero essai · papier 2
curéehero-essay--paper-2background:paper-2Ouvrir dans le builder -
Hero essai · papier 3
curéehero-essay--paper-3background:paper-3Ouvrir dans le builder -
Hero essai · encre
curéehero-essay--inkbackground:inkOuvrir dans le builder -
hero-essay · split
généréehero-essay--splitlayout:splitOuvrir dans le builder -
hero-essay · centré
généréehero-essay--centeredlayout:centeredOuvrir dans le builder -
hero-essay · masthead
généréehero-essay--mastheadlayout:mastheadOuvrir dans le builder -
hero-essay · entonnoir
généréehero-essay--funnellayout:funnelOuvrir dans le builder -
hero-essay · image pleine
généréehero-essay--full-bleed-imagelayout:full-bleed-imageOuvrir dans le builder -
hero-essay · empilé
généréehero-essay--stackedlayout:stackedOuvrir dans le builder -
hero-essay · minimal
généréehero-essay--minimallayout:minimalOuvrir dans le builder -
hero-essay · avec formulaire
généréehero-essay--with-formlayout:with-formOuvrir dans le builder -
hero-essay · split inversé
généréehero-essay--split-reverselayout:split-reverseOuvrir dans le builder -
hero-essay · fond vidéo
généréehero-essay--video-bglayout:video-bgOuvrir dans le builder -
hero-essay · centré étroit
généréehero-essay--centered-narrowlayout:centered-narrowOuvrir dans le builder -
hero-essay · avec bande de logos
généréehero-essay--with-logos-striplayout:with-logos-stripOuvrir dans le builder
Sections liées
Même famille
hero-academy-hub stable Hero hub académie : kicker mono, h1 display, lede et bande de stats mono (cours, parcours, alumni).
Apparition au scrollSurvolDéfilement +8 16 décl.hero-asymmetric-grid stable Héro plein écran en grille multi-lignes asymétrique : titre serif pleine largeur, rangée 2 colonnes (label + lede + 2 CTA à gauche, label + puces fléchées à droite), puis bande de 4 KPI dont la dernière cellule est inversée en ink. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.hero-atlas stable Hero Atlas en deux colonnes avec signature grid, copy éditoriale, CTAs et mini-map des quatre piliers.
Apparition au scrollDéfilementImage de fond +4 16 décl.hero-author stable Hero de page auteur : 2-col copy/portrait, breadcrumb équipe, role eyebrow, h1 split prénom+nom italic accent, lede display.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-baseline-stats stable Héro plein écran à impact typographique : kicker, titre serif géant et lede court en tête, rangée de 4 KPI poussée en baseline (séparée par une hairline forte). CTA optionnel, pas de média. Variante paper et ink, responsive (KPI 2 colonnes sur mobile).
BoutonsListeChiffres clés +1 14 décl.hero-capability-band stable Héro plein écran : titre serif accent et lede alignés à gauche (~70 % de large), puis une bande de capacités asymétrique pleine largeur de 5 cellules dont la 3e (large, accent) porte un KPI serif, les 4 autres des capacités mono. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.Même catégorie
hero-academy-hub stable Hero hub académie : kicker mono, h1 display, lede et bande de stats mono (cours, parcours, alumni).
Apparition au scrollSurvolDéfilement +8 16 décl.hero-asymmetric-grid stable Héro plein écran en grille multi-lignes asymétrique : titre serif pleine largeur, rangée 2 colonnes (label + lede + 2 CTA à gauche, label + puces fléchées à droite), puis bande de 4 KPI dont la dernière cellule est inversée en ink. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.hero-atlas stable Hero Atlas en deux colonnes avec signature grid, copy éditoriale, CTAs et mini-map des quatre piliers.
Apparition au scrollDéfilementImage de fond +4 16 décl.hero-author stable Hero de page auteur : 2-col copy/portrait, breadcrumb équipe, role eyebrow, h1 split prénom+nom italic accent, lede display.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-baseline-stats stable Héro plein écran à impact typographique : kicker, titre serif géant et lede court en tête, rangée de 4 KPI poussée en baseline (séparée par une hairline forte). CTA optionnel, pas de média. Variante paper et ink, responsive (KPI 2 colonnes sur mobile).
BoutonsListeChiffres clés +1 14 décl.hero-capability-band stable Héro plein écran : titre serif accent et lede alignés à gauche (~70 % de large), puis une bande de capacités asymétrique pleine largeur de 5 cellules dont la 3e (large, accent) porte un KPI serif, les 4 autres des capacités mono. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.Similaires
hero-hub-listing deprecated (déprécié → hero-hub-masthead variant=listing) Hero éditorial de hub avec titre monumental et lede courte, sans appel à l'action, pour pages de listing.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-course stable Hero de page cours/formation : kicker accent + title + lede + meta-pills (niveau/durée/format/prix) + cta-group primary/ghost.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-centered stable Hero centré pour poser une proposition de valeur claire et guider vers une action principale.
Apparition au scrollSurvolDéfilement +8 17 décl.hero-case-study stable Hero d'étude de cas avec décor géométrique, titre et barre de spécifications (client, secteur, durée).
Apparition au scrollSurvolDéfilement +8 19 décl.hero-landing stable Hero magnétique landing : eyebrow mono, h1 italique avec emphasis, lede, double CTA et bandeau de disponibilité.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-service-detail stable Hero de page service avec numéro éditorial, titre, accroche et barre de preuves chiffrées optionnelle.
Apparition au scrollSurvolDéfilement +8 16 décl.Code
Données de la section (à placer dans sections[])
{
"type": "hero-essay",
"kicker_fr": "§ Essay · CRM",
"kicker_en": "§ Essay · CRM",
"h1_fr": "Câbler son CRM en <i>10 jours</i> : audit, score, action, mesure.",
"h1_en": "Wiring your CRM in <i>10 days</i>: audit, score, act, measure.",
"lede_fr": "Protocole en 4 phases : audit pipeline, scoring comportemental, séquences automatisées, tableau de bord mesure. Opérationnel en 10 jours.",
"lede_en": "A 4-phase protocol: pipeline audit, behavioural scoring, automated sequences, measurement dashboard. Operational in 10 days.",
"author": "Simon Beros",
"date": "28 avril 2026",
"reading_time_fr": "6 min de lecture",
"reading_time_en": "6 min read",
"illustration": {
"src": "/images/illustrations/ds/man-and-woman-hi-paper.webp",
"alt_fr": "Illustration : deux personnes se saluent, relation client, duotone éditorial.",
"alt_en": "Illustration: two people greeting, client relationship, editorial duotone.",
"side": "right"
}
}/library/section/hero-essay.json
Chemin du détail machine
/library/section/hero-essay.json