Waimia.
Réserver un audit →

Timelines

tech-integration-flow

stable Sur waimia · 1 Contenu inline (instance)

Expliquer une méthode

Position dans la stack en frise verticale numérotée (Timeline + Dingbat), un nœud par étape d intégration.

technologies integration flow timeline stack
Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

  • src/pages/expertise-claude.astro

Aperçu

Comment l'utiliser

Intention

Expliquer une méthode

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Effets

Apparition au scroll

Interactions

Défilement

Éléments

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
kicker Contenu text Oui fr / en ·
title Contenu text Oui fr / en ·
aside Contenu text Non fr / en ·
steps Contenu array Oui · 1..∞

Déclinaisons · 8

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.

  • tech-integration-flow · événements verticaux

    générée
    tech-integration-flow--vertical-events

  • tech-integration-flow · événements horizontaux

    générée
    tech-integration-flow--horizontal-events

  • tech-integration-flow · alternance

    générée
    tech-integration-flow--alternating

  • tech-integration-flow · rail de jalons

    générée
    tech-integration-flow--milestone-rail

  • tech-integration-flow · liste datée

    générée
    tech-integration-flow--dated-list

  • tech-integration-flow · frise serpentin

    générée
    tech-integration-flow--snake-timeline

  • tech-integration-flow · frise en cartes

    générée
    tech-integration-flow--cards-timeline

  • tech-integration-flow · dates compactes

    générée
    tech-integration-flow--compact-dates

Comparer les déclinaisons · 8

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.

  • tech-integration-flow · événements verticaux

    générée
    tech-integration-flow--vertical-events
    layout:vertical-events
    Ouvrir dans le builder

  • tech-integration-flow · événements horizontaux

    générée
    tech-integration-flow--horizontal-events
    layout:horizontal-events
    Ouvrir dans le builder

  • tech-integration-flow · alternance

    générée
    tech-integration-flow--alternating
    layout:alternating
    Ouvrir dans le builder

  • tech-integration-flow · rail de jalons

    générée
    tech-integration-flow--milestone-rail
    layout:milestone-rail
    Ouvrir dans le builder

  • tech-integration-flow · liste datée

    générée
    tech-integration-flow--dated-list
    layout:dated-list
    Ouvrir dans le builder

  • tech-integration-flow · frise serpentin

    générée
    tech-integration-flow--snake-timeline
    layout:snake-timeline
    Ouvrir dans le builder

  • tech-integration-flow · frise en cartes

    générée
    tech-integration-flow--cards-timeline
    layout:cards-timeline
    Ouvrir dans le builder

  • tech-integration-flow · dates compactes

    générée
    tech-integration-flow--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.
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 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.
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.
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": "tech-integration-flow",
  "kicker_fr": "Position dans la stack",
  "kicker_en": "Position in the stack",
  "title_fr": "<i>Intégration</i>",
  "title_en": "<i>Integration</i>",
  "aside_fr": "De la donnée à l'observation, la place du modèle dans la chaîne.",
  "aside_en": "From data to observation, the model place in the chain.",
  "steps": [
    {
      "num": "01",
      "label_fr": "Données",
      "label_en": "Data",
      "body_fr": "Sources métier branchées via Model Context Protocol, accès gouverné.",
      "body_en": "Business sources connected via Model Context Protocol, governed access."
    },
    {
      "num": "02",
      "label_fr": "Modèles",
      "label_en": "Models",
      "body_fr": "Claude Haiku · Sonnet · Opus · Code, sélection à la tâche.",
      "body_en": "Claude Haiku · Sonnet · Opus · Code, task-level selection."
    },
    {
      "num": "03",
      "label_fr": "Orchestration",
      "label_en": "Orchestration",
      "body_fr": "Graphes d'agents, état durable, human-in-the-loop natifs.",
      "body_en": "Agent graphs, durable state, native human-in-the-loop."
    }
  ]
}

Pour un agent / MCP

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

/library/section/tech-integration-flow.json

Chemin du détail machine

/library/section/tech-integration-flow.json