Hero Header Sections
hero-sector
stable Bibliothèque Contenu inline (instance)Énoncer la proposition de valeur
Hero de page secteur ou département : SVG rotated 15° accent, dept kicker, h1 + lead italique, CTA et meta, tags secteurs.
Instances sur le site
Global 0 instance en page composable
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
hero_variant | Contenu | enum | Non | · | equilibre · showcase · encadre · editorial |
dept | Contenu | text | Oui | fr / en | · |
h1 | Contenu | text | Oui | fr / en | · |
lead | Contenu | text | Oui | fr / en | · |
cta | Contenu | object | Oui | · | · |
cta_secondary | Contenu | object | Non | · | · |
meta | Contenu | text | Non | fr / en | · |
tags | Contenu | array | Non | · | 0..8 |
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 secteur · papier 2
curéehero-sector--paper-2 -
Hero secteur · papier 3
curéehero-sector--paper-3 -
Hero secteur · encre
curéehero-sector--ink -
hero-sector · split
généréehero-sector--split -
hero-sector · centré
généréehero-sector--centered -
hero-sector · masthead
généréehero-sector--masthead -
hero-sector · entonnoir
généréehero-sector--funnel -
hero-sector · image pleine
généréehero-sector--full-bleed-image -
hero-sector · empilé
généréehero-sector--stacked -
hero-sector · minimal
généréehero-sector--minimal -
hero-sector · avec formulaire
généréehero-sector--with-form -
hero-sector · split inversé
généréehero-sector--split-reverse -
hero-sector · fond vidéo
généréehero-sector--video-bg -
hero-sector · centré étroit
généréehero-sector--centered-narrow -
hero-sector · avec bande de logos
généréehero-sector--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 secteur · papier 2
curéehero-sector--paper-2background:paper-2Ouvrir dans le builder -
Hero secteur · papier 3
curéehero-sector--paper-3background:paper-3Ouvrir dans le builder -
Hero secteur · encre
curéehero-sector--inkbackground:inkOuvrir dans le builder -
hero-sector · split
généréehero-sector--splitlayout:splitOuvrir dans le builder -
hero-sector · centré
généréehero-sector--centeredlayout:centeredOuvrir dans le builder -
hero-sector · masthead
généréehero-sector--mastheadlayout:mastheadOuvrir dans le builder -
hero-sector · entonnoir
généréehero-sector--funnellayout:funnelOuvrir dans le builder -
hero-sector · image pleine
généréehero-sector--full-bleed-imagelayout:full-bleed-imageOuvrir dans le builder -
hero-sector · empilé
généréehero-sector--stackedlayout:stackedOuvrir dans le builder -
hero-sector · minimal
généréehero-sector--minimallayout:minimalOuvrir dans le builder -
hero-sector · avec formulaire
généréehero-sector--with-formlayout:with-formOuvrir dans le builder -
hero-sector · split inversé
généréehero-sector--split-reverselayout:split-reverseOuvrir dans le builder -
hero-sector · fond vidéo
généréehero-sector--video-bglayout:video-bgOuvrir dans le builder -
hero-sector · centré étroit
généréehero-sector--centered-narrowlayout:centered-narrowOuvrir dans le builder -
hero-sector · avec bande de logos
généréehero-sector--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-tech-layer stable Hero de couche technologique : triangles SVG signature, layer badge (claude/os/orch), h1 + lead italique, CTA et meta.
Apparition au scrollSurvolDéfilement +7 16 décl.hero-offer-detail stable Hero de page offre détail : SVG cercles concentriques signature, breadcrumb, tier kicker, h1 + lead italique, CTA et meta.
Apparition au scrollSurvolDéfilement +7 16 décl.hero-card-cover stable Héro plein écran en deux colonnes : discours éditorial (kicker, titre serif, lede, badges pills, 2 CTA) à gauche, carte ink sombre (média line-art + mini-KPI) à droite. La carte reste sombre en mode paper. Variante paper et ink, responsive (1 colonne sur mobile).
SurvolImageIllustration au trait +8 14 décl.hero-masthead-card stable Héro plein écran asymétrique (~64/36) : colonne principale (kicker, titre serif accent, lede, badges pills mono, 2 CTA, sous-CTA), rail droit avec une carte média line-art ink réduite + 2 micro-KPI mono. Variante paper et ink, responsive.
Illustration au traitImageBoutons +5 17 décl.hero-thin-media stable Héro plein écran très asymétrique (~72/28) : colonne dominante (kicker, titre serif accent, lede, badges pills mono, 2 CTA), rail droit avec une bande média line-art verticale mince (currentColor, lisible paper et ink). Variante paper et ink, responsive.
ImageIllustration au traitBoutons +5 14 décl.hero-form-inline stable Hero de capture lead above-the-fold : promesse à gauche, formulaire email/CTA à droite postant sur /api/newsletter, points de réassurance optionnels.
Apparition au scrollDéfilementListe +3 16 décl.Code
Données de la section (à placer dans sections[])
{
"type": "hero-sector",
"dept_fr": "§ Secteur · Services B2B",
"dept_en": "§ Sector · B2B Services",
"h1_fr": "Cabinets B2B : <i class=\"acc\">câbler</i> l'<i class=\"acc\">IA</i> dans votre delivery.",
"h1_en": "B2B firms: <i class=\"acc\">wire</i> <i class=\"acc\">AI</i> into your delivery.",
"lead_fr": "Audit en 5 jours, premier workflow en production, mesure dès le premier mois. <span>ROI prouvé secteur.</span>",
"lead_en": "5-day audit, first workflow in production, measured from month one. <span>Proven sector ROI.</span>",
"cta": {
"label_fr": "Réserver un audit secteur →",
"label_en": "Book a sector audit →",
"href": "/contact?sector=b2b",
"variant": "primary"
},
"meta_fr": "Disponibilité · T3 2026",
"meta_en": "Availability · Q3 2026",
"tags": [
{
"label_fr": "Conseil",
"label_en": "Consulting"
},
{
"label_fr": "Cabinet juridique",
"label_en": "Law firm"
},
{
"label_fr": "Agence",
"label_en": "Agency"
},
{
"label_fr": "Cabinet compta",
"label_en": "Accounting firm"
}
],
"hero_variant": "editorial",
"illustration": {
"src": "/images/illustrations/ds/woman-and-people-paper.webp",
"alt_fr": "Illustration : une intervenante face à un groupe, delivery B2B, duotone éditorial.",
"alt_en": "Illustration: a speaker facing a group, B2B delivery, editorial duotone.",
"side": "right"
}
}/library/section/hero-sector.json
Chemin du détail machine
/library/section/hero-sector.json