Process Sections

journey-steps

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

Parcours en 3 temps : icône cercle avec badge numéro, titre, description et pill highlight par étape, connecteur accent entre étapes. Horizontal desktop, vertical mobile. Idéal funnel ou onboarding.

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

Expliquer une méthode

Rôle de page

Corps

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
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`steps`	Contenu	`array`	Oui	·	2..4

Déclinaisons · 14

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 10 générées.

Parcours en étapes · papier
curée
journey-steps--paper
Parcours en étapes · papier 2
curée
journey-steps--paper-2
Parcours en étapes · papier 3
curée
journey-steps--paper-3
Parcours en étapes · encre
curée
journey-steps--ink
journey-steps · pile verticale
générée
journey-steps--vertical-stack
journey-steps · horizontal
générée
journey-steps--horizontal
journey-steps · lignes numérotées
générée
journey-steps--numbered-rows
journey-steps · grille étapes
générée
journey-steps--grid-steps
journey-steps · diagramme
générée
journey-steps--diagram
journey-steps · zigzag
générée
journey-steps--zigzag
journey-steps · ligne connectée
générée
journey-steps--connected-line
journey-steps · cartes étapes
générée
journey-steps--cards-steps
journey-steps · serpentin
générée
journey-steps--snake
journey-steps · vertical alterné
générée
journey-steps--vertical-alternating

Comparer les déclinaisons · 14

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.

Parcours en étapes · papier
curée
journey-steps--paper
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Parcours en étapes · papier 2
curée
journey-steps--paper-2
background:paper-2
Ouvrir dans le builder
Parcours en étapes · papier 3
curée
journey-steps--paper-3
background:paper-3
Ouvrir dans le builder
Parcours en étapes · encre
curée
journey-steps--ink
background:ink
Ouvrir dans le builder
journey-steps · pile verticale
générée
journey-steps--vertical-stack
layout:vertical-stack
Ouvrir dans le builder
journey-steps · horizontal
générée
journey-steps--horizontal
layout:horizontal
Ouvrir dans le builder
journey-steps · lignes numérotées
générée
journey-steps--numbered-rows
layout:numbered-rows
Ouvrir dans le builder
journey-steps · grille étapes
générée
journey-steps--grid-steps
layout:grid-steps
Ouvrir dans le builder
journey-steps · diagramme
générée
journey-steps--diagram
layout:diagram
Ouvrir dans le builder
journey-steps · zigzag
générée
journey-steps--zigzag
layout:zigzag
Ouvrir dans le builder
journey-steps · ligne connectée
générée
journey-steps--connected-line
layout:connected-line
Ouvrir dans le builder
journey-steps · cartes étapes
générée
journey-steps--cards-steps
layout:cards-steps
Ouvrir dans le builder
journey-steps · serpentin
générée
journey-steps--snake
layout:snake
Ouvrir dans le builder
journey-steps · vertical alterné
générée
journey-steps--vertical-alternating
layout:vertical-alternating
Ouvrir dans le builder

Sections liées

Même famille

diagnostic-stages stable

Auto-diagnostic « Où en êtes-vous ? » : 4 à 6 stades de maturité en cards horizontales cliquables, le stade courant relevé en accent (« vous êtes ici »). Situe le visiteur et l’oriente vers l’étape suivante (conversion + qualification). Déclinaison optionnelle `quizCta` : bande CTA (carte ink illustration + bouton) sous la piste, qui pousse au quiz d’auto-positionnement.

process-steps Process Sections Apparition au scrollDéfilementIcônes +2 19 décl.

method-diagram-list stable

Bloc methode : entete + diagramme de process (SVG de marque) + liste numerotee de phases (numero mono + titre + corps).

process-steps Process Sections Apparition au scrollIllustration au traitListe +1 10 décl.

process-steps stable

« Comment ça marche » en étapes numérotées verticales : numéro, titre, description et meta par étape, connecteurs visuels entre paliers, fonds paper à ink.

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

system-flow stable

Rangée horizontale de cartes d'étapes sur fond ink, reliées par des flèches accent, qui raconte le flux du système (site → lead → scoring → CRM → apprentissage). En-tête « Fig. N » + méta mono, grand titre serif avec dernier mot en accent, lede courte, puis une ligne « ↺ boucle d'amélioration continue ». Reveal-stagger, responsive (scroll horizontal / colonne empilée en mobile).

process-steps Feature Sections Apparition au scrollDéfilementIllustration au trait +3 16 décl.

Même catégorie

diagnostic-stages stable

process-steps Process Sections Apparition au scrollDéfilementIcônes +2 19 décl.

method-diagram-list stable

Bloc methode : entete + diagramme de process (SVG de marque) + liste numerotee de phases (numero mono + titre + corps).

process-steps Process Sections Apparition au scrollIllustration au traitListe +1 10 décl.

process-steps stable

« Comment ça marche » en étapes numérotées verticales : numéro, titre, description et meta par étape, connecteurs visuels entre paliers, fonds paper à ink.

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

Similaires

steps-horizontal stable

Etapes numerotees en ligne avec pastilles et connecteurs hairline. Passage vertical sous 760px.

timeline Timelines Liste4 colonnes 12 décl.

timeline-block stable

Bloc chronologique pour raconter une progression, un historique ou une séquence d'événements.

timeline Timelines ListeFrise chronologique2 colonnes +2 12 décl.

editorial-timeline stable

Frise chronologique éditoriale composant l'atome Timeline : axe gauche, points, numéros, dates, titres et descriptions, vertical ou horizontal. Pour une méthode ou un parcours en N phases.

timeline Timelines Frise chronologique1 colonne 17 décl.

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.

timeline-horizontal stable

Frise chronologique horizontale datée (roadmap) : événements à statut (done/active/upcoming), date, label et body, scroll-snap horizontal, empilement vertical sur mobile.

timeline Timelines Défilement horizontalGlisser pour faire défilerIllustration au trait +4 12 décl.

how-we-ship stable

Section "comment on livre", sticky pin scrub : N étapes avec numline et stage cards animées au scroll (graceful degradation mobile).

timeline Timelines Cartes empiléesDéfilementIllustration au trait +3 10 décl.

Code

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

{
  "type": "journey-steps",
  "background": "paper",
  "kicker_fr": "Le parcours",
  "kicker_en": "The journey",
  "h2_fr": "Du brief à la <i class=\"acc\">publication</i>",
  "h2_en": "From brief to <i class=\"acc\">publish</i>",
  "steps": [
    {
      "icon": "🔍",
      "title_fr": "Audit",
      "title_en": "Audit",
      "body_fr": "On cartographie vos pages, vos mots-clés et vos signaux IA pour viser juste.",
      "body_en": "We map your pages, keywords and AI signals to aim precisely.",
      "highlight_fr": "Étape 1",
      "highlight_en": "Step 1"
    },
    {
      "icon": "✍️",
      "title_fr": "Production assistée",
      "title_en": "Assisted production",
      "body_fr": "Les agents rédigent les premières versions, vous gardez la ligne éditoriale.",
      "body_en": "Agents draft first versions, you keep the editorial line.",
      "highlight_fr": "Étape 2",
      "highlight_en": "Step 2"
    },
    {
      "icon": "🚀",
      "title_fr": "Relecture et publication",
      "title_en": "Review and publish",
      "body_fr": "Un humain valide, le contenu part en ligne et la mesure démarre aussitôt.",
      "body_en": "A human validates, content goes live and measurement starts at once.",
      "highlight_fr": "Étape 3",
      "highlight_en": "Step 3"
    }
  ]
}

Pour un agent / MCP

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

/library/section/journey-steps.json

Chemin du détail machine

/library/section/journey-steps.json