Waimia.
Réserver un audit →

Hero Header Sections

tunnel-step-hero

stable Bibliothèque Contenu inline (instance)

Énoncer la proposition de valeur

Hero d'étape tunnel V2 : kicker calculé (offre_label + step/progress_total) + barre [NN] + h1 (hero ou section) + lede.

hero tunnel step progress funnel kicker-computed
Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Intention

Énoncer la proposition de valeur

Rôle de page

Héros

Modèle de contenu

Contenu inline (instance)

Éléments

Illustration au trait

Mise en page

1 colonne

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
offre_label Contenu text Oui · ·
step Contenu number Oui · ·
progress_total Contenu number Oui · ·
h1 Contenu text Oui fr / en ·
lede Contenu text Oui fr / en ·

Déclinaisons · 13

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.

  • tunnel-step-hero · split

    générée
    tunnel-step-hero--split

  • tunnel-step-hero · centré

    générée
    tunnel-step-hero--centered

  • tunnel-step-hero · masthead

    générée
    tunnel-step-hero--masthead

  • tunnel-step-hero · entonnoir

    générée
    tunnel-step-hero--funnel

  • tunnel-step-hero · image pleine

    générée
    tunnel-step-hero--full-bleed-image

  • tunnel-step-hero · empilé

    générée
    tunnel-step-hero--stacked

  • tunnel-step-hero · minimal

    générée
    tunnel-step-hero--minimal

  • tunnel-step-hero · avec formulaire

    générée
    tunnel-step-hero--with-form

  • tunnel-step-hero · split inversé

    générée
    tunnel-step-hero--split-reverse

  • tunnel-step-hero · fond vidéo

    générée
    tunnel-step-hero--video-bg

  • tunnel-step-hero · centré étroit

    générée
    tunnel-step-hero--centered-narrow

  • tunnel-step-hero · avec bande de logos

    générée
    tunnel-step-hero--with-logos-strip

Comparer les déclinaisons · 12

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.

  • tunnel-step-hero · split

    générée
    tunnel-step-hero--split
    layout:split
    Ouvrir dans le builder

  • tunnel-step-hero · centré

    générée
    tunnel-step-hero--centered
    layout:centered
    Ouvrir dans le builder

  • tunnel-step-hero · masthead

    générée
    tunnel-step-hero--masthead
    layout:masthead
    Ouvrir dans le builder

  • tunnel-step-hero · entonnoir

    générée
    tunnel-step-hero--funnel
    layout:funnel
    Ouvrir dans le builder

  • tunnel-step-hero · image pleine

    générée
    tunnel-step-hero--full-bleed-image
    layout:full-bleed-image
    Ouvrir dans le builder

  • tunnel-step-hero · empilé

    générée
    tunnel-step-hero--stacked
    layout:stacked
    Ouvrir dans le builder

  • tunnel-step-hero · minimal

    générée
    tunnel-step-hero--minimal
    layout:minimal
    Ouvrir dans le builder

  • tunnel-step-hero · avec formulaire

    générée
    tunnel-step-hero--with-form
    layout:with-form
    Ouvrir dans le builder

  • tunnel-step-hero · split inversé

    générée
    tunnel-step-hero--split-reverse
    layout:split-reverse
    Ouvrir dans le builder

  • tunnel-step-hero · fond vidéo

    générée
    tunnel-step-hero--video-bg
    layout:video-bg
    Ouvrir dans le builder

  • tunnel-step-hero · centré étroit

    générée
    tunnel-step-hero--centered-narrow
    layout:centered-narrow
    Ouvrir dans le builder

  • tunnel-step-hero · avec bande de logos

    générée
    tunnel-step-hero--with-logos-strip
    layout:with-logos-strip
    Ouvrir 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).

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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).

hero Hero Header Sections 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.

hero Hero Header Sections 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).

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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).

hero Hero Header Sections 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.

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

Similaires

hero-tunnel-step stable

Hero d'étape de tunnel : kicker accent + barre de progression [01][02]... + h1 (variante hero ou section) + lede.

hero Hero Header Sections Illustration au trait1 colonne 16 décl.
hero-full-bleed stable

Hero immersif plein écran pour créer un impact visuel fort avec mouvement ou canvas.

hero Hero Header Sections Apparition au scrollDéfilementIllustration au trait +1 14 décl.
hero-liquid stable

Hero manifeste à fond canvas liquide (terracotta animé) : eyebrow, grand titre display italique, lede et CTAs sur fond sombre.

hero Hero Header Sections Apparition au scrollDéfilementBoutons +2 13 décl.
hero-scope-minimap stable

Héro plein écran asymétrique (~60/40) : colonne dominante (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec une mini-map de 6 capacités en 2 colonnes (label mono accent + items), hairlines. Montre le périmètre, pas un média. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +3 14 décl.
hero-summary-rail stable

Héro plein écran asymétrique (~70/30) façon revue : colonne principale (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec un sommaire typographique de 3 entrées (label mono accent + titre serif court + sous-ligne). Zéro média. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +3 14 décl.
hero-editorial-kpi stable

Héro plein écran éditorial asymétrique (~65/35) : colonne dominante (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail léger à droite avec 3 KPI serif verticaux séparés par hairlines. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +4 14 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "tunnel-step-hero",
  "offre_label": "Activation IA",
  "step": 2,
  "progress_total": 4,
  "h1_fr": "Votre site <i>actuel</i> coûte plus qu'il ne rapporte.",
  "h1_en": "Your <i>current</i> website costs more than it brings in.",
  "lede_fr": "Mesurons cela en 4 étapes. Pas de slide. Pas de discovery. Des chiffres.",
  "lede_en": "Let's measure it in 4 steps. No slide. No discovery. Numbers."
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/tunnel-step-hero.json

Chemin du détail machine

/library/section/tunnel-step-hero.json