Hero Header Sections

tier-pyramid-svg

stable Bibliothèque Contenu inline (instance)

Énoncer la proposition de valeur

Pyramide SVG isocèle à trois niveaux pour visualiser la progression Découverte · Transformation · Partenariat.

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)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`aria_label`	Contenu	`text`	Oui	fr / en	·
`tiers`	Contenu	`array`	Oui	·	·

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é.

tier-pyramid-svg · split
générée
tier-pyramid-svg--split
tier-pyramid-svg · centré
générée
tier-pyramid-svg--centered
tier-pyramid-svg · masthead
générée
tier-pyramid-svg--masthead
tier-pyramid-svg · entonnoir
générée
tier-pyramid-svg--funnel
tier-pyramid-svg · image pleine
générée
tier-pyramid-svg--full-bleed-image
tier-pyramid-svg · empilé
générée
tier-pyramid-svg--stacked
tier-pyramid-svg · minimal
générée
tier-pyramid-svg--minimal
tier-pyramid-svg · avec formulaire
générée
tier-pyramid-svg--with-form
tier-pyramid-svg · split inversé
générée
tier-pyramid-svg--split-reverse
tier-pyramid-svg · fond vidéo
générée
tier-pyramid-svg--video-bg
tier-pyramid-svg · centré étroit
générée
tier-pyramid-svg--centered-narrow
tier-pyramid-svg · avec bande de logos
générée
tier-pyramid-svg--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.

tier-pyramid-svg · split
générée
tier-pyramid-svg--split
layout:split
Ouvrir dans le builder
tier-pyramid-svg · centré
générée
tier-pyramid-svg--centered
layout:centered
Ouvrir dans le builder
tier-pyramid-svg · masthead
générée
tier-pyramid-svg--masthead
layout:masthead
Ouvrir dans le builder
tier-pyramid-svg · entonnoir
générée
tier-pyramid-svg--funnel
layout:funnel
Ouvrir dans le builder
tier-pyramid-svg · image pleine
générée
tier-pyramid-svg--full-bleed-image
layout:full-bleed-image
Ouvrir dans le builder
tier-pyramid-svg · empilé
générée
tier-pyramid-svg--stacked
layout:stacked
Ouvrir dans le builder
tier-pyramid-svg · minimal
générée
tier-pyramid-svg--minimal
layout:minimal
Ouvrir dans le builder
tier-pyramid-svg · avec formulaire
générée
tier-pyramid-svg--with-form
layout:with-form
Ouvrir dans le builder
tier-pyramid-svg · split inversé
générée
tier-pyramid-svg--split-reverse
layout:split-reverse
Ouvrir dans le builder
tier-pyramid-svg · fond vidéo
générée
tier-pyramid-svg--video-bg
layout:video-bg
Ouvrir dans le builder
tier-pyramid-svg · centré étroit
générée
tier-pyramid-svg--centered-narrow
layout:centered-narrow
Ouvrir dans le builder
tier-pyramid-svg · avec bande de logos
générée
tier-pyramid-svg--with-logos-strip
layout:with-logos-strip
Ouvrir dans le builder

Sections liées

Même famille

maturity-pyramid stable

Pyramide de maturité à quatre paliers avec timeline d'étapes, SVG progressif et grille de cartes asymétriques.

pyramid Timelines Apparition au scrollSurvolDéfilement +5 13 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-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-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.

tunnel-step-hero stable

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

hero Hero Header Sections Illustration au trait1 colonne 13 décl.

hero-problem-index stable

Hero d'index par problème : décor SVG rectangle rotated 12°, h1 monumental, lede italique et phrase canonique.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 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).

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 19 décl.

hero-centered stable

Hero centré pour poser une proposition de valeur claire et guider vers une action principale.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 17 décl.

Code

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

{
  "type": "tier-pyramid-svg",
  "aria_label_fr": "Pyramide des offres Waimia, trois tiers",
  "aria_label_en": "Waimia offers pyramid, three tiers",
  "tiers": [
    {
      "roman": "I",
      "label_fr": "Découverte",
      "label_en": "Discovery"
    },
    {
      "roman": "II",
      "label_fr": "Transformation",
      "label_en": "Transformation"
    },
    {
      "roman": "III",
      "label_fr": "Partenariat",
      "label_en": "Partnership"
    }
  ]
}

Pour un agent / MCP

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

/library/section/tier-pyramid-svg.json

Chemin du détail machine

/library/section/tier-pyramid-svg.json