Timelines

method-stepline

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

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.

Ouvrir dans le builder

Instances sur le site

Global 29 instances sur 29 pages

Page	Position	Contenu	Variante
/lp/site-web-intelligent	`section 7`	De l'audit gratuit aux premiers résultats.	paper
/lp/systeme-acquisition	`section 9`	De l'audit gratuit aux premiers résultats	paper-3
/lp/systeme-ia-marketing	`section 6`	Ce qui sépare un système fiable d'un gadget.	paper-3
/lp/visibilite-google-ia	`section 5`	Les 6 couches d'une visibilité qui tient.	paper-3
/services/agent-support-client	`section 7`	Les 6 niveaux d'un support assisté	paper-3
/services/applications-internes	`section 6`	Les 6 niveaux d'un outil métier interne	paper-3
/services/automatisation-n8n	`section 7`	Les 6 niveaux d'automatisation avec n8n	paper-3
/services/cold-email-b2b	`section 7`	Les 6 niveaux d'un cold email	paper-3
/services/consultant-ia-claude	`section 6`	Les 6 niveaux d'une décision IA	paper-3
/services/crm-scoring-routing	`section 6`	Les 6 niveaux d'un CRM	paper-3
/services/integration-claude	`section 6`	Les 6 niveaux de maturité IA	paper-3
/services/integration-crm	`section 6`	Les 6 niveaux d'une intégration CRM	paper-3
/services/landing-page-google-ads	`section 6`	Les 6 niveaux d'une landing Google Ads	paper-3
/services/landing-pages-tunnels	`section 6`	Les 6 niveaux d'un tunnel de conversion	paper-3
/services/maintenance-growth	`section 6`	Les 6 niveaux d'un site entretenu	paper-3
/services/mvp-saas	`section 6`	Les 6 niveaux d'un produit SaaS	paper-3
/services/prospection-automatisee	`section 7`	Les 6 niveaux d'une prospection	paper-3
/services/publicite-en-ligne	`section 6`	Les 6 niveaux d'une publicité en ligne	paper-3
/services/referencement-ia	`section 6`	Les 6 niveaux de citabilité IA	paper-3
/services/relance-devis	`section 6`	Les 6 niveaux d'une relance de devis	paper-3
/services/seo-geo-contenu	`section 6`	Les 6 niveaux de visibilité SEO et GEO	paper-3
/services/seo-local	`section 6`	Les 6 niveaux de visibilité locale	paper-3
/services/sequences-de-suivi	`section 6`	Les 6 niveaux d'un suivi	paper-3
/services/site-web-ia	`section 6`	Les 6 niveaux d'un site web intelligent	paper-3
/services/sur-mesure-headless	`section 6`	Les 6 niveaux d'un site qui reste le vôtre	paper-3
/services/systeme-acquisition	`section 6`	Les 6 niveaux d'acquisition	paper-3
/services/systeme-commercial	`section 6`	Les 6 niveaux d'un développement commercial	paper-3
/services/webflow	`section 6`	Les 6 niveaux d'un Webflow	paper-3
/services/wordpress	`section 6`	Les 6 états d'un WordPress	paper-3

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
`layout`	Présentation	`text`	Non	·	·
`density`	Présentation	`enum`	Non	·	compact · base · ample
`contentAlign`	Présentation	`enum`	Non	·	start · center · end
`actionsAlign`	Présentation	`enum`	Non	·	start · center · end · spread
`placement`	Présentation	`object`	Non	·	·
`columns`	Présentation	`enum`	Non	·	2 · 3 · 4 · auto
`colRatio`	Présentation	`enum`	Non	·	equal · 1-2 · 2-1 · 1-1-2 · 2-3 · golden
`itemHeight`	Présentation	`enum`	Non	·	auto · even · square · video
`proportion`	Présentation	`enum`	Non	·	1-1 · 1-2 · 2-1 · 2-3 · 3-2
`mediaSide`	Présentation	`enum`	Non	·	left · right
`surface`	Présentation	`enum`	Non	·	flat · outlined · filled · elevated · ghost
`divider`	Présentation	`enum`	Non	·	none · hairline · rule
`radius`	Présentation	`enum`	Non	·	none · sm · md · lg
`accentEdge`	Présentation	`enum`	Non	·	none · top · left
`colsMobile`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · auto
`colsTablet`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · auto
`layoutMobile`	Présentation	`text`	Non	·	·
`titleScale`	Présentation	`enum`	Non	·	sm · base · lg · xl
`eyebrow`	Présentation	`enum`	Non	·	none · kicker · badge
`justifyContent`	Présentation	`enum`	Non	·	start · center · end · between · around · evenly
`alignItems`	Présentation	`enum`	Non	·	start · center · end · stretch · baseline
`justifyItems`	Présentation	`enum`	Non	·	start · center · end · stretch
`alignContent`	Présentation	`enum`	Non	·	start · center · end · between · stretch
`cellAlignX`	Présentation	`enum`	Non	·	start · center · end
`cellAlignY`	Présentation	`enum`	Non	·	top · middle · bottom · between
`cellPad`	Présentation	`enum`	Non	·	none · sm · base · lg
`mediaFit`	Présentation	`enum`	Non	·	cover · contain
`mediaRatio`	Présentation	`enum`	Non	·	auto · 1-1 · 4-3 · 3-2 · 16-9
`reveal`	Présentation	`enum`	Non	·	none · fade · slide-up · slide-down · slide-left · slide-right · scale-in · blur-in · mask-up
`hover`	Présentation	`enum`	Non	·	none · lift · zoom · glow · border · tint · underline · reveal-cta · media-zoom
`pressFeedback`	Présentation	`enum`	Non	·	none · press
`focusRing`	Présentation	`enum`	Non	·	auto · ring · inset · none
`transitionSpeed`	Présentation	`enum`	Non	·	instant · fast · base · slow
`transitionEase`	Présentation	`enum`	Non	·	standard · out · spring
`selectedState`	Présentation	`enum`	Non	·	none · outline · fill · accent-edge
`openState`	Présentation	`enum`	Non	·	auto
`revealStagger`	Présentation	`bool`	Non	·	·
`revealDelay`	Présentation	`enum`	Non	·	none · sm · md
`loop`	Présentation	`enum`	Non	·	none · marquee · pulse · float
`scrollMotion`	Présentation	`enum`	Non	·	none · parallax · pin · progress
`textMotion`	Présentation	`enum`	Non	·	none · word-stagger · count-up · type-on
`motionSpeed`	Présentation	`enum`	Non	·	fast · base · slow
`motionEase`	Présentation	`enum`	Non	·	standard · out · spring
`pageTransition`	Présentation	`enum`	Non	·	none · fade · slide
`cellBg`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink · ink-2 · ink-3 · accent · none
`cellTone`	Présentation	`enum`	Non	·	ink · muted · accent · accent-text · paper
`tone`	Présentation	`enum`	Non	·	ink · muted · accent · accent-text · paper
`borderTone`	Présentation	`enum`	Non	·	hairline · hairline-strong · accent · none
`textFlow`	Présentation	`enum`	Non	·	horizontal · vertical-rl · vertical-lr · sideways
`textTransform`	Présentation	`enum`	Non	·	none · uppercase · lowercase · capitalize
`rotate`	Présentation	`enum`	Non	·	90 · 180 · none · -90
`objectPosition`	Présentation	`enum`	Non	·	center · top · bottom · left · right
`overflow`	Présentation	`enum`	Non	·	visible · clip · auto
`scrollSnap`	Présentation	`enum`	Non	·	none · proximity · mandatory
`measure`	Présentation	`enum`	Non	·	prose · read · tight · wide · full
`balance`	Présentation	`bool`	Non	·	·
`clamp`	Présentation	`enum`	Non	·	1 · 2 · 3 · 4 · none
`minHeight`	Présentation	`enum`	Non	·	auto · half · screen
`width`	Présentation	`enum`	Non	·	full · contained · narrow · prose
`headingLevel`	Présentation	`enum`	Non	·	h2 · h3
`ariaLabel`	Présentation	`text`	Non	·	·
`headerAlign`	Présentation	`enum`	Non	·	left · center · right
`headerKind`	Présentation	`enum`	Non	·	none · title · eyebrow-title · eyebrow-title-lede · eyebrow-title-lede-cta
`introRow`	Présentation	`enum`	Non	·	none · lede-aside · desc-media-split · lede-centered
`dividers`	Présentation	`enum`	Non	·	none · column-rules · row-rules · grid-lines
`cardContent`	Présentation	`enum`	Non	·	title · title-desc · icon-title-desc · title-desc-meta · media-title-desc
`cardMedia`	Présentation	`enum`	Non	·	none · icon · image · image-bg
`cardAlign`	Présentation	`enum`	Non	·	left · center
`colorDistribution`	Présentation	`enum`	Non	·	uniform · featured-first · one-accent · alternating
`bgSource`	Présentation	`enum`	Non	·	color · image · gradient
`bgImage`	Présentation	`text`	Non	·	·
`kicker`	Contenu	`text`	Non	fr / en	·
`duration`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`steps`	Contenu	`array`	Oui	·	2..6

Déclinaisons · 19

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

Méthode · ligne d étapes · papier
curée
method-stepline--paper
Méthode · ligne d étapes · encre
curée
method-stepline--ink
Méthode · rail vertical
curée
method-stepline--vertical-stack
Méthode · lignes numérotées
curée
method-stepline--numbered-rows
Méthode · cartes en grille (auto)
curée
method-stepline--grid-steps-auto
Méthode · cartes en grille (3 col.)
curée
method-stepline--grid-steps-3
Méthode · cartes en grille (2 col.)
curée
method-stepline--grid-steps-2
Méthode · rail vertical · encre
curée
method-stepline--vertical-stack-ink
Méthode · lignes numérotées · aéré
curée
method-stepline--numbered-rows-ample
Méthode · header centré
curée
method-stepline--head-center
Méthode · étapes avant header (atomique)
curée
method-stepline--atomic-body-first
method-stepline · événements verticaux
générée
method-stepline--vertical-events
method-stepline · événements horizontaux
générée
method-stepline--horizontal-events
method-stepline · alternance
générée
method-stepline--alternating
method-stepline · rail de jalons
générée
method-stepline--milestone-rail
method-stepline · liste datée
générée
method-stepline--dated-list
method-stepline · frise serpentin
générée
method-stepline--snake-timeline
method-stepline · frise en cartes
générée
method-stepline--cards-timeline
method-stepline · dates compactes
générée
method-stepline--compact-dates

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 · ligne d étapes · papier
curée
method-stepline--paper
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Méthode · ligne d étapes · encre
curée
method-stepline--ink
background:ink
Ouvrir dans le builder
Méthode · rail vertical
curée
method-stepline--vertical-stack
layout:vertical-stack
Ouvrir dans le builder
Méthode · lignes numérotées
curée
method-stepline--numbered-rows
layout:numbered-rows
Ouvrir dans le builder
Méthode · cartes en grille (auto)
curée
method-stepline--grid-steps-auto
layout:grid-stepscolumns:auto
Ouvrir dans le builder
Méthode · cartes en grille (3 col.)
curée
method-stepline--grid-steps-3
layout:grid-stepscolumns:3
Ouvrir dans le builder
Méthode · cartes en grille (2 col.)
curée
method-stepline--grid-steps-2
layout:grid-stepscolumns:2
Ouvrir dans le builder
Méthode · rail vertical · encre
curée
method-stepline--vertical-stack-ink
layout:vertical-stackbackground:ink
Ouvrir dans le builder
Méthode · lignes numérotées · aéré
curée
method-stepline--numbered-rows-ample
layout:numbered-rowsdensity:ample
Ouvrir dans le builder
Méthode · header centré
curée
method-stepline--head-center
layout:grid-stepscolumns:3contentAlign:center
Ouvrir dans le builder
Méthode · étapes avant header (atomique)
curée
method-stepline--atomic-body-first
layout:numbered-rowsplacement
Ouvrir dans le builder
method-stepline · événements verticaux
générée
method-stepline--vertical-events
layout:vertical-events
Ouvrir dans le builder
method-stepline · événements horizontaux
générée
method-stepline--horizontal-events
layout:horizontal-events
Ouvrir dans le builder
method-stepline · alternance
générée
method-stepline--alternating
layout:alternating
Ouvrir dans le builder
method-stepline · rail de jalons
générée
method-stepline--milestone-rail
layout:milestone-rail
Ouvrir dans le builder
method-stepline · liste datée
générée
method-stepline--dated-list
layout:dated-list
Ouvrir dans le builder
method-stepline · frise serpentin
générée
method-stepline--snake-timeline
layout:snake-timeline
Ouvrir dans le builder
method-stepline · frise en cartes
générée
method-stepline--cards-timeline
layout:cards-timeline
Ouvrir dans le builder
method-stepline · dates compactes
générée
method-stepline--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-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.

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

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.

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.

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-stepline",
  "background": "paper",
  "kicker_fr": "Acte III · Méthode Waimia",
  "kicker_en": "Act III · Waimia method",
  "duration_fr": "4 à 6 semaines",
  "duration_en": "4 to 6 weeks",
  "steps": [
    {
      "title_fr": "Diagnostic & cadrage",
      "title_en": "Diagnosis & scoping",
      "sub_fr": "Plan de tracking",
      "sub_en": "Tracking plan"
    },
    {
      "title_fr": "Architecture & contenu",
      "title_en": "Architecture & content",
      "sub_fr": "Wireframes · copy",
      "sub_en": "Wireframes · copy"
    },
    {
      "title_fr": "Design & maquette",
      "title_en": "Design & mockup",
      "sub_fr": "Design system",
      "sub_en": "Design system"
    },
    {
      "title_fr": "Build & instrumentation",
      "title_en": "Build & instrumentation",
      "sub_fr": "Site · CRM · tracking",
      "sub_en": "Site · CRM · tracking"
    },
    {
      "title_fr": "Mise en ligne & passation",
      "title_en": "Go-live & handover",
      "sub_fr": "Livraison · support",
      "sub_en": "Delivery · support"
    }
  ]
}

Pour un agent / MCP

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

/library/section/method-stepline.json

Chemin du détail machine

/library/section/method-stepline.json