CTA Sections

tunnel-step-nav

stable Bibliothèque Contenu inline (instance)

Pousser à l'action

Pied de navigation d'étape tunnel : lien prev optionnel + cta (primary/accent/ghost) + barre méta (lecture + retour offre).

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

Pousser à l'action

Rôle de page

Conversion

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
`prev_href`	Contenu	`url`	Non	·	·
`prev_label`	Contenu	`text`	Non	fr / en	·
`cta`	Contenu	`object`	Oui	·	·
`reading`	Contenu	`text`	Non	fr / en	·
`back_href`	Contenu	`url`	Oui	·	·
`back_label`	Contenu	`text`	Oui	·	·

Déclinaisons · 17

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

Nav de tunnel · papier 2
curée
tunnel-step-nav--paper-2
Nav de tunnel · papier 3
curée
tunnel-step-nav--paper-3
Nav de tunnel · encre
curée
tunnel-step-nav--ink
tunnel-step-nav · grille uniforme
générée
tunnel-step-nav--grid-uniform
tunnel-step-nav · grille auto
générée
tunnel-step-nav--grid-auto
tunnel-step-nav · grille asymétrique
générée
tunnel-step-nav--grid-asym
tunnel-step-nav · liste
générée
tunnel-step-nav--list
tunnel-step-nav · lignes séparées
générée
tunnel-step-nav--rows-divided
tunnel-step-nav · bento vedette
générée
tunnel-step-nav--bento-feature
tunnel-step-nav · vedette + split
générée
tunnel-step-nav--featured-split
tunnel-step-nav · deux colonnes
générée
tunnel-step-nav--two-col
tunnel-step-nav · alternance
générée
tunnel-step-nav--alternating
tunnel-step-nav · jeu de cartes
générée
tunnel-step-nav--cards-deck
tunnel-step-nav · liste média à gauche
générée
tunnel-step-nav--list-media-left
tunnel-step-nav · grille 3 + vedette
générée
tunnel-step-nav--grid-3-featured

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.

Nav de tunnel · papier 2
curée
tunnel-step-nav--paper-2
background:paper-2
Ouvrir dans le builder
Nav de tunnel · papier 3
curée
tunnel-step-nav--paper-3
background:paper-3
Ouvrir dans le builder
Nav de tunnel · encre
curée
tunnel-step-nav--ink
background:ink
Ouvrir dans le builder
tunnel-step-nav · grille uniforme
générée
tunnel-step-nav--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
tunnel-step-nav · grille auto
générée
tunnel-step-nav--grid-auto
layout:grid-auto
Ouvrir dans le builder
tunnel-step-nav · grille asymétrique
générée
tunnel-step-nav--grid-asym
layout:grid-asym
Ouvrir dans le builder
tunnel-step-nav · liste
générée
tunnel-step-nav--list
layout:list
Ouvrir dans le builder
tunnel-step-nav · lignes séparées
générée
tunnel-step-nav--rows-divided
layout:rows-divided
Ouvrir dans le builder
tunnel-step-nav · bento vedette
générée
tunnel-step-nav--bento-feature
layout:bento-feature
Ouvrir dans le builder
tunnel-step-nav · vedette + split
générée
tunnel-step-nav--featured-split
layout:featured-split
Ouvrir dans le builder
tunnel-step-nav · deux colonnes
générée
tunnel-step-nav--two-col
layout:two-col
Ouvrir dans le builder
tunnel-step-nav · alternance
générée
tunnel-step-nav--alternating
layout:alternating
Ouvrir dans le builder
tunnel-step-nav · jeu de cartes
générée
tunnel-step-nav--cards-deck
layout:cards-deck
Ouvrir dans le builder
tunnel-step-nav · liste média à gauche
générée
tunnel-step-nav--list-media-left
layout:list-media-left
Ouvrir dans le builder
tunnel-step-nav · grille 3 + vedette
générée
tunnel-step-nav--grid-3-featured
layout:grid-3-featured
Ouvrir dans le builder

Sections liées

Même famille

coming-soon-pills stable

Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.

list Feature Sections ListeBadge1 colonne 16 décl.

curriculum-timeline stable

Bloc curriculum : entete + frise verticale (experience / formation / distinctions) sur fond paper-2. Compose l’atome Timeline.

list Timelines Apparition au scrollFrise chronologique1 colonne 15 décl.

decision-list stable

Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.

list Feature Sections Apparition au scrollDéfilementListe +1 17 décl.

inclusions-list stable

Liste d'inclusions inline séparée par point médian pour expliciter le périmètre d'un engagement.

list Feature Sections Liste1 colonne 17 décl.

learning-path-list stable

Liste de parcours : titre de section et une ligne par parcours (titre en gras + description).

list Index Sections 1 colonne 17 décl.

list-index-section stable

Masthead de listing avec filtres optionnels, conteneur de liste ouvert et footer custom.

list Index Sections Apparition au scrollDéfilement1 colonne 17 décl.

Même catégorie

branded-callout stable

Callout de marque fond paper-2 avec kicker §, titre display italique et corps de deux paragraphes, CTA optionnel.

band CTA Sections Apparition au scrollDéfilementBoutons +1 20 décl.

closing-cta-band stable

Bande CTA de cloture sur fond ink : kicker + titre display-lg (accent italique) + bouton primaire. Titre rendu en HTML (accent <em>).

band CTA Sections Apparition au scrollSurvolBoutons +1 17 décl.

cta-band stable

Bandeau CTA horizontal pour relancer une action au milieu ou en fin de parcours.

band CTA Sections BoutonsPleine largeur 17 décl.

cta-final stable

CTA final pour conclure une page et orienter vers l'action de conversion principale.

band CTA Sections Apparition au scrollSurvolDéfilement +3 18 décl.

cta-form-inline stable

Bande CTA avec mini-formulaire inline (email et bouton), pour capter un lead ou une inscription newsletter à l'instant d'intention.

form-panel CTA Sections SurvolBoutonsFormulaire +3 13 décl.

cta-inline stable

CTA inline discret pour insérer une action contextuelle dans un contenu existant.

band CTA Sections BoutonsPleine largeur 18 décl.

Similaires

cta-split-visual stable

Bandeau CTA asymetrique 2 colonnes : texte kicker/titre/body/boutons a gauche, visuel SVG decoratif a droite. Distinct des CTA centres.

split-media CTA Sections Apparition au scrollDéfilementIllustration au trait +4 17 décl.

department-cta stable

Clôture CTA sur fond ink : Dingbat, titre display italique, body et deux boutons (rendez-vous + lien secondaire).

band CTA Sections Apparition au scrollSurvolDéfilement +3 14 décl.

newsletter-band stable

Bande newsletter fond sombre : titre éditorial large à gauche, formulaire capture email à droite.

band CTA Sections Apparition au scrollSurvolDéfilement +4 12 décl.

footer-cta-band stable

Bande CTA finale pleine largeur (titre, sous-titre, un à deux boutons), pensée comme le climax juste avant le footer. Sombre par défaut pour trancher avec la page.

band CTA Sections Boutons2 colonnesScindé 27 décl.

used-service-callout stable

Encadre compact « offre(s) utilisee(s) » : liste de cross-liens vers les services mobilises sur un projet, bord gauche accent.

list Index Sections SurvolListe1 colonne 17 décl.

cta-newsletter-footer stable

Capture email compacte multi-colonne de type pré-footer : titre, champ, bouton et mention RGPD sur une ligne. Sombre par défaut pour clore la page sur l’abonnement.

band Newsletter Sections Illustration au traitBoutonsFormulaire +3 17 décl.

Code

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

{
  "type": "tunnel-step-nav",
  "prev_href": "#",
  "prev_label_fr": "← Étape précédente",
  "prev_label_en": "← Previous step",
  "cta": {
    "label_fr": "Continuer →",
    "label_en": "Continue →",
    "href": "#",
    "variant": "primary"
  },
  "reading_fr": "Temps de lecture : 2 min",
  "reading_en": "2 min read",
  "back_href": "#",
  "back_label": "← Activation IA"
}

Pour un agent / MCP

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

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

Chemin du détail machine

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