Waimia.
Réserver un audit →

Timelines

timeline-block

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

Bloc chronologique pour raconter une progression, un historique ou une séquence d'événements.

timeline events history
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)

Éléments

Liste Frise chronologique

Mise en page

2 colonnes Média à droite Scindé

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3 · ink
h2 Contenu text Oui fr / en ·
events Contenu array Oui · 2..∞

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.

  • Frise datée · papier

    curée
    timeline-block--paper

  • Frise datée · papier 2

    curée
    timeline-block--paper-2

  • Frise datée · papier 3

    curée
    timeline-block--paper-3

  • Frise datée · encre

    curée
    timeline-block--ink

  • timeline-block · événements verticaux

    générée
    timeline-block--vertical-events

  • timeline-block · événements horizontaux

    générée
    timeline-block--horizontal-events

  • timeline-block · alternance

    générée
    timeline-block--alternating

  • timeline-block · rail de jalons

    générée
    timeline-block--milestone-rail

  • timeline-block · liste datée

    générée
    timeline-block--dated-list

  • timeline-block · frise serpentin

    générée
    timeline-block--snake-timeline

  • timeline-block · frise en cartes

    générée
    timeline-block--cards-timeline

  • timeline-block · dates compactes

    générée
    timeline-block--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.

  • Frise datée · papier

    curée
    timeline-block--paper
    background:paper
    Ouvrir dans le builder

  • Frise datée · papier 2

    curée
    timeline-block--paper-2
    background:paper-2
    Ouvrir dans le builder

  • Frise datée · papier 3

    curée
    timeline-block--paper-3
    background:paper-3
    Ouvrir dans le builder

  • Frise datée · encre

    curée
    timeline-block--ink
    background:ink
    Ouvrir dans le builder

  • timeline-block · événements verticaux

    générée
    timeline-block--vertical-events
    layout:vertical-events
    Ouvrir dans le builder

  • timeline-block · événements horizontaux

    générée
    timeline-block--horizontal-events
    layout:horizontal-events
    Ouvrir dans le builder

  • timeline-block · alternance

    générée
    timeline-block--alternating
    layout:alternating
    Ouvrir dans le builder

  • timeline-block · rail de jalons

    générée
    timeline-block--milestone-rail
    layout:milestone-rail
    Ouvrir dans le builder

  • timeline-block · liste datée

    générée
    timeline-block--dated-list
    layout:dated-list
    Ouvrir dans le builder

  • timeline-block · frise serpentin

    générée
    timeline-block--snake-timeline
    layout:snake-timeline
    Ouvrir dans le builder

  • timeline-block · frise en cartes

    générée
    timeline-block--cards-timeline
    layout:cards-timeline
    Ouvrir dans le builder

  • timeline-block · dates compactes

    générée
    timeline-block--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 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.

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

Code

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

{
  "type": "timeline-block",
  "h2_fr": "<i>Roadmap</i> Waimia 2026",
  "h2_en": "<i>Roadmap</i> Waimia 2026",
  "events": [
    {
      "date": "Q1 2026",
      "title_fr": "Lancement Activation",
      "title_en": "Activation launch",
      "body_fr": "Audit + 1 workflow IA en 5 jours.",
      "body_en": "Audit + 1 AI workflow in 5 days."
    },
    {
      "date": "Q2 2026",
      "title_fr": "Growth System v2",
      "title_en": "Growth System v2",
      "body_fr": "Système complet 6-10 semaines.",
      "body_en": "Full system 6-10 weeks."
    },
    {
      "date": "Q3 2026",
      "title_fr": "École Waimia",
      "title_en": "Waimia School",
      "body_fr": "Formations équipes internes.",
      "body_en": "Internal team training."
    }
  ]
}

Pour un agent / MCP

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

/library/section/timeline-block.json

Chemin du détail machine

/library/section/timeline-block.json