§ Famille · 5 variantes · 28 déclinaisons

process-steps

5 variantes (5 stables) partagent la forme « process-steps ». Chaque card ouvre la fiche technique ; les déclinaisons (presets) se prévisualisent en ligne.

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 11 décl.

11 déclinaisons

Auto-diagnostic · stades · papier 2
Auto-diagnostic · stades · encre
Auto-diagnostic · grille 3 colonnes
Auto-diagnostic · grille 2 colonnes
Auto-diagnostic · grille 4 colonnes
Auto-diagnostic · stades empilés
Auto-diagnostic · lignes numérotées
Auto-diagnostic · stades empilés · encre
Auto-diagnostic · lignes · compact
Auto-diagnostic · header centré
Auto-diagnostic · header masqué mobile (atomique)

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 4 décl.

4 déclinaisons

Parcours en étapes · papier
Parcours en étapes · papier 2
Parcours en étapes · papier 3
Parcours en étapes · encre

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

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 4 décl.

4 déclinaisons

Étapes process · papier
Étapes process · papier 2
Étapes process · papier 3
Étapes process · encre

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 9 décl.

9 déclinaisons

Flux système · encre
Flux système · diagramme horizontal
Flux système · rail scrollable
Flux système · étapes empilées
Flux système · empilé · aéré
Flux système · diagramme · compact
Flux système · header centré
Flux système · en-tête aligné à droite
Flux système · cartes masquées mobile (atomique)