Waimia.
Réserver un audit →

Timelines

how-we-ship

stable Bibliothèque Contenu inline (instance)

Expliquer une méthode

Section "comment on livre", sticky pin scrub : N étapes avec numline et stage cards animées au scroll (graceful degradation mobile).

process timeline sticky scrub pin steps
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)

Effets

Cartes empilées

Interactions

Défilement

Éléments

Illustration au trait

Mise en page

2 colonnes Média à droite Scindé

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
roman Contenu text Oui · ·
section_label Contenu text Oui fr / en ·
heading Contenu text Oui fr / en ·
aside Contenu text Oui fr / en ·
steps Contenu array Oui · 3..6

Déclinaisons · 10

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

  • how-we-ship · pile verticale

    générée
    how-we-ship--vertical-stack

  • how-we-ship · horizontal

    générée
    how-we-ship--horizontal

  • how-we-ship · lignes numérotées

    générée
    how-we-ship--numbered-rows

  • how-we-ship · grille étapes

    générée
    how-we-ship--grid-steps

  • how-we-ship · diagramme

    générée
    how-we-ship--diagram

  • how-we-ship · zigzag

    générée
    how-we-ship--zigzag

  • how-we-ship · ligne connectée

    générée
    how-we-ship--connected-line

  • how-we-ship · cartes étapes

    générée
    how-we-ship--cards-steps

  • how-we-ship · serpentin

    générée
    how-we-ship--snake

  • how-we-ship · vertical alterné

    générée
    how-we-ship--vertical-alternating

Comparer les déclinaisons · 10

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.

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

Code

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

{
  "type": "how-we-ship",
  "roman": "IV",
  "section_label_fr": "Acte IV · Comment on livre",
  "section_label_en": "Act IV · How we ship",
  "heading_fr": "Quatre <i>étapes</i>. Pas de slide deck intermédiaire.",
  "heading_en": "Four <i>steps</i>. No intermediate slide deck.",
  "aside_fr": "Chaque étape produit un livrable concret. Vous ne payez la suivante que si la précédente a passé son audit.",
  "aside_en": "Each step delivers something concrete. You only pay the next one if the previous one passed its audit.",
  "steps": [
    {
      "n": "i",
      "label_fr": "Diagnostic",
      "label_en": "Diagnostic",
      "body_fr": "On cartographie vos SOPs, on identifie les workflows répétitifs, on chiffre le potentiel d'impact. Sortie : une carte de processus + une priorité.",
      "body_en": "We map your SOPs, identify repetitive workflows, quantify impact potential. Output: a process map + a priority."
    },
    {
      "n": "ii",
      "label_fr": "Sprint MVP · 4 semaines",
      "label_en": "MVP Sprint · 4 weeks",
      "body_fr": "Un agent, un job. On livre un POC fonctionnel en quatre semaines avec audit trail complet et métriques avant/après.",
      "body_en": "One agent, one job. We ship a working POC in four weeks with full audit trail and before/after metrics."
    },
    {
      "n": "iii",
      "label_fr": "Mise en production",
      "label_en": "Production rollout",
      "body_fr": "Adoption équipe, scripts d'onboarding, observabilité, gouvernance. L'agent rejoint le runtime : Claude managé ou self-hosted.",
      "body_en": "Team adoption, onboarding scripts, observability, governance. The agent joins the runtime: managed Claude or self-hosted."
    },
    {
      "n": "iv",
      "label_fr": "Maintenance & extension",
      "label_en": "Maintenance & extension",
      "body_fr": "SRE 24/7, mises à jour modèles, nouveaux cas d'usage, conformité AI Act continue.",
      "body_en": "SRE 24/7, model upgrades, new use cases, ongoing AI Act compliance."
    }
  ]
}

Pour un agent / MCP

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

/library/section/how-we-ship.json

Chemin du détail machine

/library/section/how-we-ship.json