Timelines

timeline-horizontal

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

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

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
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`intro`	Contenu	`text`	Non	fr / en	·
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`events`	Contenu	`array`	Oui	·	2..10

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.

Roadmap horizontale · papier
curée
timeline-horizontal--paper
Roadmap horizontale · papier 2
curée
timeline-horizontal--paper-2
Roadmap horizontale · papier 3
curée
timeline-horizontal--paper-3
Roadmap horizontale · encre
curée
timeline-horizontal--ink
timeline-horizontal · événements verticaux
générée
timeline-horizontal--vertical-events
timeline-horizontal · événements horizontaux
générée
timeline-horizontal--horizontal-events
timeline-horizontal · alternance
générée
timeline-horizontal--alternating
timeline-horizontal · rail de jalons
générée
timeline-horizontal--milestone-rail
timeline-horizontal · liste datée
générée
timeline-horizontal--dated-list
timeline-horizontal · frise serpentin
générée
timeline-horizontal--snake-timeline
timeline-horizontal · frise en cartes
générée
timeline-horizontal--cards-timeline
timeline-horizontal · dates compactes
générée
timeline-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.

Roadmap horizontale · papier
curée
timeline-horizontal--paper
Identique à la démo par défaut (aucun axe surchargé).
Ouvrir dans le builder
Roadmap horizontale · papier 2
curée
timeline-horizontal--paper-2
background:paper-2
Ouvrir dans le builder
Roadmap horizontale · papier 3
curée
timeline-horizontal--paper-3
background:paper-3
Ouvrir dans le builder
Roadmap horizontale · encre
curée
timeline-horizontal--ink
background:ink
Ouvrir dans le builder
timeline-horizontal · événements verticaux
générée
timeline-horizontal--vertical-events
layout:vertical-events
Ouvrir dans le builder
timeline-horizontal · événements horizontaux
générée
timeline-horizontal--horizontal-events
layout:horizontal-events
Ouvrir dans le builder
timeline-horizontal · alternance
générée
timeline-horizontal--alternating
layout:alternating
Ouvrir dans le builder
timeline-horizontal · rail de jalons
générée
timeline-horizontal--milestone-rail
layout:milestone-rail
Ouvrir dans le builder
timeline-horizontal · liste datée
générée
timeline-horizontal--dated-list
layout:dated-list
Ouvrir dans le builder
timeline-horizontal · frise serpentin
générée
timeline-horizontal--snake-timeline
layout:snake-timeline
Ouvrir dans le builder
timeline-horizontal · frise en cartes
générée
timeline-horizontal--cards-timeline
layout:cards-timeline
Ouvrir dans le builder
timeline-horizontal · dates compactes
générée
timeline-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.

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.

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

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.

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.

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.

Code

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

{
  "type": "timeline-horizontal",
  "kicker_fr": "[roadmap] · 2026",
  "kicker_en": "[roadmap] · 2026",
  "h2_fr": "La trajectoire produit, <i class=\"acc\">datée</i>.",
  "h2_en": "The product trajectory, <i class=\"acc\">dated</i>.",
  "intro_fr": "Ce qui est livré, ce qui est en cours, ce qui arrive. Sans promesse floue.",
  "intro_en": "What is shipped, what is in progress, what is next. No vague promises.",
  "background": "paper",
  "events": [
    {
      "date_fr": "T1 2026",
      "date_en": "Q1 2026",
      "label_fr": "Audit trail signé",
      "label_en": "Signed audit trail",
      "body_fr": "Chaque action agent tracée et validée par un humain.",
      "body_en": "Every agent action traced and human-validated.",
      "status": "done"
    },
    {
      "date_fr": "T2 2026",
      "date_en": "Q2 2026",
      "label_fr": "Réallocation budget auto",
      "label_en": "Auto budget reallocation",
      "body_fr": "Le scoring CRM pilote le budget média en temps réel.",
      "body_en": "CRM scoring drives media budget in real time.",
      "status": "active"
    },
    {
      "date_fr": "T3 2026",
      "date_en": "Q3 2026",
      "label_fr": "Connecteurs multi-CRM",
      "label_en": "Multi-CRM connectors",
      "body_fr": "HubSpot, Salesforce et Pipedrive câblés nativement.",
      "body_en": "HubSpot, Salesforce and Pipedrive wired natively.",
      "status": "upcoming"
    },
    {
      "date_fr": "T4 2026",
      "date_en": "Q4 2026",
      "label_fr": "Reporting comité auto",
      "label_en": "Auto board reporting",
      "body_fr": "Export prêt-comité généré chaque vendredi.",
      "body_en": "Board-ready export generated every Friday.",
      "status": "upcoming"
    }
  ]
}

Pour un agent / MCP

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

/library/section/timeline-horizontal.json

Chemin du détail machine

/library/section/timeline-horizontal.json