Timelines

steps-horizontal

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

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

Instances sur le site

Global 3 instances sur 3 pages

Page	Position	Contenu	Variante
/cas-usages/reduire-reporting	`section 3`	De trois jours à quelques minutes de relecture	paper
/cas-usages/reduire-temps-cms	`section 3`	Du chantier permanent à l'édition en minutes	paper
/cas-usages/standardiser-processus	`section 3`	Comprendre, simplifier, formaliser, outiller	paper

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

Déclinaisons · 12

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

Étapes horizontales · papier
curée
steps-horizontal--paper
Étapes horizontales · papier 2
curée
steps-horizontal--paper-2
Étapes horizontales · papier 3
curée
steps-horizontal--paper-3
Étapes horizontales · encre
curée
steps-horizontal--ink
steps-horizontal · événements verticaux
générée
steps-horizontal--vertical-events
steps-horizontal · événements horizontaux
générée
steps-horizontal--horizontal-events
steps-horizontal · alternance
générée
steps-horizontal--alternating
steps-horizontal · rail de jalons
générée
steps-horizontal--milestone-rail
steps-horizontal · liste datée
générée
steps-horizontal--dated-list
steps-horizontal · frise serpentin
générée
steps-horizontal--snake-timeline
steps-horizontal · frise en cartes
générée
steps-horizontal--cards-timeline
steps-horizontal · dates compactes
générée
steps-horizontal--compact-dates

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.

Étapes horizontales · papier
curée
steps-horizontal--paper
background:paper
Ouvrir dans le builder
Étapes horizontales · papier 2
curée
steps-horizontal--paper-2
background:paper-2
Ouvrir dans le builder
Étapes horizontales · papier 3
curée
steps-horizontal--paper-3
background:paper-3
Ouvrir dans le builder
Étapes horizontales · encre
curée
steps-horizontal--ink
background:ink
Ouvrir dans le builder
steps-horizontal · événements verticaux
générée
steps-horizontal--vertical-events
layout:vertical-events
Ouvrir dans le builder
steps-horizontal · événements horizontaux
générée
steps-horizontal--horizontal-events
layout:horizontal-events
Ouvrir dans le builder
steps-horizontal · alternance
générée
steps-horizontal--alternating
layout:alternating
Ouvrir dans le builder
steps-horizontal · rail de jalons
générée
steps-horizontal--milestone-rail
layout:milestone-rail
Ouvrir dans le builder
steps-horizontal · liste datée
générée
steps-horizontal--dated-list
layout:dated-list
Ouvrir dans le builder
steps-horizontal · frise serpentin
générée
steps-horizontal--snake-timeline
layout:snake-timeline
Ouvrir dans le builder
steps-horizontal · frise en cartes
générée
steps-horizontal--cards-timeline
layout:cards-timeline
Ouvrir dans le builder
steps-horizontal · dates compactes
générée
steps-horizontal--compact-dates
layout:compact-dates
Ouvrir dans le builder

Sections liées

Même famille

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.

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.

method-stepline stable

Timeline de méthode horizontale sur fond clair : ligne hairline traversée de nœuds accent, chaque nœud surmonté d'un numéro mono, d'un titre serif et d'un sous-label mono. En-tête kicker à gauche, durée à droite. Reveal-stagger, empilage en colonne en mobile.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.

method-timeline stable

Timeline méthodologique pour expliquer les étapes d'un accompagnement ou d'un processus.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.

tech-integration-flow stable

Position dans la stack en frise verticale numérotée (Timeline + Dingbat), un nœud par étape d intégration.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +3 8 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.

Même catégorie

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.

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.

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.

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.

method-stepline stable

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.

method-timeline stable

Timeline méthodologique pour expliquer les étapes d'un accompagnement ou d'un processus.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.

Similaires

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.

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.

journey-steps stable

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.

process-steps Process Sections Illustration au traitListeIcônes +3 14 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.

sticky-scroll-storytelling stable

Storytelling au scroll : rail de texte sticky dont l'etape active passe en accent, colonne media sticky dont l'image change en fondu. Mobile = stepper empile.

scroll-interactive Feature Sections Média collantApparition au scrollFondu enchaîné +7 12 décl.

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.

Code

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

{
  "type": "steps-horizontal",
  "kicker_fr": "Méthode · 4 étapes",
  "kicker_en": "Method · 4 steps",
  "h2_fr": "Un processus <i>clair</i> du premier jour",
  "h2_en": "A <i>clear</i> process from day one",
  "steps": [
    {
      "title_fr": "Audit initial",
      "title_en": "Initial audit",
      "body_fr": "Analyse de votre stack, de vos données et de vos flux en 2 jours ouvrables.",
      "body_en": "Analysis of your stack, data, and workflows in 2 business days."
    },
    {
      "title_fr": "Plan d'action",
      "title_en": "Action plan",
      "body_fr": "Priorisation des chantiers IA selon impact et faisabilité.",
      "body_en": "Prioritisation of AI projects by impact and feasibility."
    },
    {
      "title_fr": "Mise en oeuvre",
      "title_en": "Implementation",
      "body_fr": "Déploiement des premiers workflows automatisés avec votre équipe.",
      "body_en": "Deployment of the first automated workflows with your team."
    },
    {
      "title_fr": "Mesure et ajustement",
      "title_en": "Measure and refine",
      "body_fr": "Suivi des indicateurs, itérations rapides, transfert de compétences.",
      "body_en": "Tracking metrics, rapid iterations, and skills transfer."
    }
  ]
}

Pour un agent / MCP

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

/library/section/steps-horizontal.json

Chemin du détail machine

/library/section/steps-horizontal.json