Timelines

method-timeline

stable Sur waimia · 2 Contenu inline (instance)

Expliquer une méthode

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

Instances sur le site

Global 1 instance sur 1 page

Page	Position	Contenu	Variante
/services/template-service-ref	`section 6`	Méthode Waimia	paper-2

Composé inline inline · non éditable ici

src/pages/cas-clients/[...slug].astro

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	·
`lede`	Contenu	`text`	Non	fr / en	·
`steps`	Contenu	`array`	Oui	·	2..6
`layout`	Présentation	`enum`	Non	·	vertical-stack · numbered-rows · horizontal · grid-steps
`columns`	Présentation	`enum`	Non	·	2 · 3 · 4 · auto
`density`	Présentation	`enum`	Non	·	compact · base · ample
`contentAlign`	Présentation	`enum`	Non	·	start · center · end
`placement`	Présentation	`object`	Non	·	·

Déclinaisons · 19

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

Méthode · frise · papier
curée
method-timeline--paper
Méthode · frise · encre
curée
method-timeline--ink
Méthode · étapes empilées
curée
method-timeline--vertical-stack
Méthode · lignes numérotées
curée
method-timeline--numbered-rows
Méthode · rail horizontal
curée
method-timeline--horizontal
Méthode · cartes en grille (auto)
curée
method-timeline--grid-steps-auto
Méthode · cartes en grille (3 col.)
curée
method-timeline--grid-steps-3
Méthode · cartes en grille (2 col.)
curée
method-timeline--grid-steps-2
Méthode · lignes numérotées · titre centré
curée
method-timeline--numbered-rows-center
Méthode · rail horizontal · aéré
curée
method-timeline--horizontal-ample
Méthode · header centré (atomique)
curée
method-timeline--atomic-header-center
Méthode · header en dessous (atomique)
curée
method-timeline--atomic-header-last
method-timeline · grille étapes
générée
method-timeline--grid-steps
method-timeline · diagramme
générée
method-timeline--diagram
method-timeline · zigzag
générée
method-timeline--zigzag
method-timeline · ligne connectée
générée
method-timeline--connected-line
method-timeline · cartes étapes
générée
method-timeline--cards-steps
method-timeline · serpentin
générée
method-timeline--snake
method-timeline · vertical alterné
générée
method-timeline--vertical-alternating

Comparer les déclinaisons · 19

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.

Méthode · frise · papier
curée
method-timeline--paper
background:paper
Ouvrir dans le builder
Méthode · frise · encre
curée
method-timeline--ink
background:ink
Ouvrir dans le builder
Méthode · étapes empilées
curée
method-timeline--vertical-stack
layout:vertical-stack
Ouvrir dans le builder
Méthode · lignes numérotées
curée
method-timeline--numbered-rows
layout:numbered-rows
Ouvrir dans le builder
Méthode · rail horizontal
curée
method-timeline--horizontal
layout:horizontal
Ouvrir dans le builder
Méthode · cartes en grille (auto)
curée
method-timeline--grid-steps-auto
layout:grid-stepscolumns:auto
Ouvrir dans le builder
Méthode · cartes en grille (3 col.)
curée
method-timeline--grid-steps-3
layout:grid-stepscolumns:3
Ouvrir dans le builder
Méthode · cartes en grille (2 col.)
curée
method-timeline--grid-steps-2
layout:grid-stepscolumns:2
Ouvrir dans le builder
Méthode · lignes numérotées · titre centré
curée
method-timeline--numbered-rows-center
layout:numbered-rowscontentAlign:center
Ouvrir dans le builder
Méthode · rail horizontal · aéré
curée
method-timeline--horizontal-ample
layout:horizontaldensity:ample
Ouvrir dans le builder
Méthode · header centré (atomique)
curée
method-timeline--atomic-header-center
layout:grid-stepscolumns:3placement
Ouvrir dans le builder
Méthode · header en dessous (atomique)
curée
method-timeline--atomic-header-last
layout:vertical-stackplacement
Ouvrir dans le builder
method-timeline · grille étapes
générée
method-timeline--grid-steps
layout:grid-steps
Ouvrir dans le builder
method-timeline · diagramme
générée
method-timeline--diagram
layout:diagram
Ouvrir dans le builder
method-timeline · zigzag
générée
method-timeline--zigzag
layout:zigzag
Ouvrir dans le builder
method-timeline · ligne connectée
générée
method-timeline--connected-line
layout:connected-line
Ouvrir dans le builder
method-timeline · cartes étapes
générée
method-timeline--cards-steps
layout:cards-steps
Ouvrir dans le builder
method-timeline · serpentin
générée
method-timeline--snake
layout:snake
Ouvrir dans le builder
method-timeline · vertical alterné
générée
method-timeline--vertical-alternating
layout:vertical-alternating
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.

steps-horizontal stable

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

timeline Timelines Liste4 colonnes 12 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.

steps-horizontal stable

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

timeline Timelines Liste4 colonnes 12 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.

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.

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.

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.

Code

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

{
  "type": "method-timeline",
  "kicker_fr": "Méthode · 4 étapes",
  "kicker_en": "Method · 4 steps",
  "h2_fr": "Le <i>processus</i> en quatre temps",
  "h2_en": "The <i>process</i> in four steps",
  "lede_fr": "De l'audit initial au déploiement, chaque étape produit un livrable mesurable.",
  "lede_en": "From initial audit to deployment, each step ships a measurable artifact.",
  "steps": [
    {
      "num": "01",
      "label_fr": "Audit",
      "label_en": "Audit",
      "body_fr": "Cartographie stack, données, équipe, frictions.",
      "body_en": "Map stack, data, team, frictions.",
      "meta_fr": "Semaine 1",
      "meta_en": "Week 1"
    },
    {
      "num": "02",
      "label_fr": "Diagnostic",
      "label_en": "Diagnostic",
      "body_fr": "Priorisation des chantiers par ROI mesurable.",
      "body_en": "Prioritization by measurable ROI.",
      "meta_fr": "Semaine 2",
      "meta_en": "Week 2"
    },
    {
      "num": "03",
      "label_fr": "Pilote",
      "label_en": "Pilot",
      "body_fr": "Premier workflow en production sous 5 jours.",
      "body_en": "First workflow in production in 5 days.",
      "meta_fr": "Semaines 3-4",
      "meta_en": "Weeks 3-4"
    },
    {
      "num": "04",
      "label_fr": "Industrialisation",
      "label_en": "Industrialization",
      "body_fr": "Extension à 6-10 semaines après mesure.",
      "body_en": "Extension over 6-10 weeks after measurement.",
      "meta_fr": "Semaines 5-8",
      "meta_en": "Weeks 5-8"
    },
    {
      "num": "05",
      "label_fr": "Formation",
      "label_en": "Training",
      "body_fr": "Montée en autonomie des équipes sur les agents livrés.",
      "body_en": "Teams reach autonomy on the delivered agents.",
      "meta_fr": "Semaine 9",
      "meta_en": "Week 9"
    },
    {
      "num": "06",
      "label_fr": "Mesure & itération",
      "label_en": "Measure & iterate",
      "body_fr": "Boucle de mesure continue, ajustements pilotés par la donnée.",
      "body_en": "Continuous measurement loop, data-driven adjustments.",
      "meta_fr": "En continu",
      "meta_en": "Ongoing"
    }
  ]
}

Pour un agent / MCP

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

/library/section/method-timeline.json

Chemin du détail machine

/library/section/method-timeline.json