Timelines

editorial-timeline

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

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.

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
`eyebrow`	Présentation	`text`	Non	fr / en	·
`title`	Contenu	`text`	Non	fr / en	·
`orientation`	Contenu	`enum`	Non	·	vertical · horizontal
`numbered`	Contenu	`bool`	Non	·	·
`events`	Contenu	`array`	Oui	·	2..∞
`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	·	1 · 2 · 3 · 4 · 5 · 6 · 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	·	·

Déclinaisons · 17

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

Frise éditoriale · papier
curée
editorial-timeline--paper
Frise éditoriale · papier 2
curée
editorial-timeline--paper-2
Frise éditoriale · papier 3
curée
editorial-timeline--paper-3
Frise éditoriale · horizontale
curée
editorial-timeline--horizontal
Frise éditoriale · sans numéros
curée
editorial-timeline--unnumbered
Frise éditoriale · dense
curée
editorial-timeline--compact
Frise éditoriale · aérée
curée
editorial-timeline--ample
Frise éditoriale · encre
curée
editorial-timeline--ink
Frise éditoriale · encre · horizontale
curée
editorial-timeline--ink-horizontal
editorial-timeline · événements verticaux
générée
editorial-timeline--vertical-events
editorial-timeline · événements horizontaux
générée
editorial-timeline--horizontal-events
editorial-timeline · alternance
générée
editorial-timeline--alternating
editorial-timeline · rail de jalons
générée
editorial-timeline--milestone-rail
editorial-timeline · liste datée
générée
editorial-timeline--dated-list
editorial-timeline · frise serpentin
générée
editorial-timeline--snake-timeline
editorial-timeline · frise en cartes
générée
editorial-timeline--cards-timeline
editorial-timeline · dates compactes
générée
editorial-timeline--compact-dates

Comparer les déclinaisons · 17

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.

Frise éditoriale · papier
curée
editorial-timeline--paper
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Frise éditoriale · papier 2
curée
editorial-timeline--paper-2
background:paper-2
Ouvrir dans le builder
Frise éditoriale · papier 3
curée
editorial-timeline--paper-3
background:paper-3
Ouvrir dans le builder
Frise éditoriale · horizontale
curée
editorial-timeline--horizontal
orientation:horizontal
Ouvrir dans le builder
Frise éditoriale · sans numéros
curée
editorial-timeline--unnumbered
numbered:false
Ouvrir dans le builder
Frise éditoriale · dense
curée
editorial-timeline--compact
density:compact
Ouvrir dans le builder
Frise éditoriale · aérée
curée
editorial-timeline--ample
density:ample
Ouvrir dans le builder
Frise éditoriale · encre
curée
editorial-timeline--ink
background:ink
Ouvrir dans le builder
Frise éditoriale · encre · horizontale
curée
editorial-timeline--ink-horizontal
background:inkorientation:horizontal
Ouvrir dans le builder
editorial-timeline · événements verticaux
générée
editorial-timeline--vertical-events
layout:vertical-events
Ouvrir dans le builder
editorial-timeline · événements horizontaux
générée
editorial-timeline--horizontal-events
layout:horizontal-events
Ouvrir dans le builder
editorial-timeline · alternance
générée
editorial-timeline--alternating
layout:alternating
Ouvrir dans le builder
editorial-timeline · rail de jalons
générée
editorial-timeline--milestone-rail
layout:milestone-rail
Ouvrir dans le builder
editorial-timeline · liste datée
générée
editorial-timeline--dated-list
layout:dated-list
Ouvrir dans le builder
editorial-timeline · frise serpentin
générée
editorial-timeline--snake-timeline
layout:snake-timeline
Ouvrir dans le builder
editorial-timeline · frise en cartes
générée
editorial-timeline--cards-timeline
layout:cards-timeline
Ouvrir dans le builder
editorial-timeline · dates compactes
générée
editorial-timeline--compact-dates
layout:compact-dates
Ouvrir dans le builder

Sections liées

Même famille

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.

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.

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.

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.

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.

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": "editorial-timeline",
  "background": "paper",
  "eyebrow_fr": "Notre méthode",
  "eyebrow_en": "Our method",
  "title_fr": "Quatre phases, du diagnostic au pilotage",
  "title_en": "Four phases, from diagnosis to steering",
  "orientation": "vertical",
  "numbered": true,
  "events": [
    {
      "num": "01",
      "title_fr": "Cartographie",
      "title_en": "Mapping",
      "meta_fr": "5 jours",
      "meta_en": "5 days",
      "body_fr": "On lit le CRM existant, les sources de leads et les points de friction.",
      "body_en": "We read the existing CRM, the lead sources and the friction points."
    },
    {
      "num": "02",
      "title_fr": "Priorisation",
      "title_en": "Prioritization",
      "meta_fr": "2 semaines",
      "meta_en": "2 weeks",
      "body_fr": "On classe les segments par ROI et on choisit les premiers flux à automatiser.",
      "body_en": "We rank segments by ROI and pick the first flows to automate."
    },
    {
      "num": "03",
      "title_fr": "Mise en route",
      "title_en": "Rollout",
      "meta_fr": "4 semaines",
      "meta_en": "4 weeks",
      "body_fr": "On câble les agents, on connecte les outils et on valide chaque séquence.",
      "body_en": "We wire the agents, connect the tools and validate every sequence.",
      "variant": "highlight"
    },
    {
      "num": "04",
      "title_fr": "Pilotage",
      "title_en": "Steering",
      "meta_fr": "En continu",
      "meta_en": "Ongoing",
      "body_fr": "Le pipeline tourne, on suit le ROI réel et on ajuste mois après mois.",
      "body_en": "The pipeline runs, we track real ROI and adjust month after month."
    }
  ]
}

Pour un agent / MCP

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

/library/section/editorial-timeline.json

Chemin du détail machine

/library/section/editorial-timeline.json