Catalyseur NumériqueDesign System
Template · Frise

Frise verticale

Un parcours en étapes, lisible d’un coup d’œil : des phases posées sur un axe, chaque étape avec son étiquette et son bloc. Extrait du plan d’action de Catalyseur IA.

01 · Aperçu

Votre plan d’action

Exemple tiré de Contexte 101 : cinq gestes, deux phases.

  1. Comprendre
  2. Étape 1 · 5 minDiagnostiquer vos promptsLivrable : la liste de ce qui manque
  3. Étape 2 · 5 minCadrer avec 4 questionsLivrable : votre contexte en 4 phrases
  4. Agir
  5. Étape 3 · 10 minVous faire interviewer par l’IALivrable : un résumé prêt à coller
  6. Étape 4 · 5 minEnrichir avec vos documentsLivrable : un contexte appuyé sur du réel
  7. Étape 5 · 5 minCapitaliser dans une ficheLivrable : un contexte réutilisable
02 · Règles

Comportement

Axe

Une ligne centrale de 2 px, avec un point orange par étape et un trait de liaison vers le bloc

Phases

Pastille posée sur l’axe quand la phase change, alternant contour et plein

Étape

Étiquette à gauche (police mono, majuscules) et bloc à droite avec titre et texte

Lien

Une étape devient un lien quand href est fourni, avec survol sur le titre et le bloc

Mobile

Sous 700 px : une seule colonne, axe à gauche, étiquette au-dessus du bloc

Thème

Couleurs issues des variables sémantiques, donc clair et foncé sans réglage

03 · Utilisation

Exemple réutilisable

Le composant charge lui-même sa feuille de style. Chaque étape accepte une phase, une étiquette, un titre, un texte et un lien facultatif.

---
import VerticalHistory from '../../shared/design-system/components/VerticalHistory.astro';

const items = [
  { phase: 'Comprendre', label: 'Étape 1', title: 'Diagnostiquer', text: 'Livrable : …', href: '#diagnostiquer' },
  { phase: 'Agir', label: 'Étape 2', title: 'Cadrer', text: 'Livrable : …' },
];
---
<VerticalHistory items={items} ariaLabel="Plan d’action" />