method-diagram-list · Composant Waimia

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

src/components/templates/AuthorPageTemplate.astro

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

Déclinaisons · 10

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

method-diagram-list · pile verticale
générée
method-diagram-list--vertical-stack
method-diagram-list · horizontal
générée
method-diagram-list--horizontal
method-diagram-list · lignes numérotées
générée
method-diagram-list--numbered-rows
method-diagram-list · grille étapes
générée
method-diagram-list--grid-steps
method-diagram-list · diagramme
générée
method-diagram-list--diagram
method-diagram-list · zigzag
générée
method-diagram-list--zigzag
method-diagram-list · ligne connectée
générée
method-diagram-list--connected-line
method-diagram-list · cartes étapes
générée
method-diagram-list--cards-steps
method-diagram-list · serpentin
générée
method-diagram-list--snake
method-diagram-list · vertical alterné
générée
method-diagram-list--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.

method-diagram-list · pile verticale
générée
method-diagram-list--vertical-stack
layout:vertical-stack
Ouvrir dans le builder
method-diagram-list · horizontal
générée
method-diagram-list--horizontal
layout:horizontal
Ouvrir dans le builder
method-diagram-list · lignes numérotées
générée
method-diagram-list--numbered-rows
layout:numbered-rows
Ouvrir dans le builder
method-diagram-list · grille étapes
générée
method-diagram-list--grid-steps
layout:grid-steps
Ouvrir dans le builder
method-diagram-list · diagramme
générée
method-diagram-list--diagram
layout:diagram
Ouvrir dans le builder
method-diagram-list · zigzag
générée
method-diagram-list--zigzag
layout:zigzag
Ouvrir dans le builder
method-diagram-list · ligne connectée
générée
method-diagram-list--connected-line
layout:connected-line
Ouvrir dans le builder
method-diagram-list · cartes étapes
générée
method-diagram-list--cards-steps
layout:cards-steps
Ouvrir dans le builder
method-diagram-list · serpentin
générée
method-diagram-list--snake
layout:snake
Ouvrir dans le builder
method-diagram-list · vertical alterné
générée
method-diagram-list--vertical-alternating
layout:vertical-alternating
Ouvrir dans le builder

Sections liées

Même famille

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.

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.

system-flow stable

Rangée horizontale de cartes d'étapes sur fond ink, reliées par des flèches accent, qui raconte le flux du système (site → lead → scoring → CRM → apprentissage). En-tête « Fig. N » + méta mono, grand titre serif avec dernier mot en accent, lede courte, puis une ligne « ↺ boucle d'amélioration continue ». Reveal-stagger, responsive (scroll horizontal / colonne empilée en mobile).

process-steps Feature Sections Apparition au scrollDéfilementIllustration au trait +3 16 décl.

Même catégorie

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.

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.

Similaires

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.

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.

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

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.

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": "method-diagram-list",
  "kicker_fr": "§ Méthode",
  "kicker_en": "§ Method",
  "title_fr": "Comment je travaille",
  "title_en": "How I work",
  "steps": [
    {
      "title_fr": "Cartographie",
      "title_en": "Mapping",
      "body_fr": "On regarde le métier réel, les frictions, les outils et les décisions déjà prises hors système.",
      "body_en": "We inspect the real work, friction, tools and decisions already made outside the system."
    },
    {
      "title_fr": "Priorisation",
      "title_en": "Prioritisation",
      "body_fr": "On classe les workflows par ROI, risque opérationnel et capacité interne à les maintenir.",
      "body_en": "We rank workflows by ROI, operational risk and internal ability to maintain them."
    },
    {
      "title_fr": "Mesure",
      "title_en": "Measurement",
      "body_fr": "Chaque workflow a sa métrique avant/après : temps gagné, coûts évités, qualité produite.",
      "body_en": "Every workflow gets a before/after metric: time saved, costs avoided, quality produced."
    }
  ]
}

Pour un agent / MCP

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

/library/section/method-diagram-list.json

Chemin du détail machine

/library/section/method-diagram-list.json