# Template : frise verticale | Design Catalyseur > Template de frise verticale réutilisable : phases sur l’axe, étapes avec étiquette et bloc, une colonne sur mobile. Extrait du plan d’action de Catalyseur IA. Source : https://design.catalyseurnumerique.com/templates/vertical-history/ 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](https://catalyseuria.com/guides/contexte-101/) : cinq gestes, deux phases. - Comprendre - Étape 1 · 5 min **Diagnostiquer vos prompts** Livrable : la liste de ce qui manque - Étape 2 · 5 min **Cadrer avec 4 questions** Livrable : votre contexte en 4 phrases - Agir - Étape 3 · 10 min **Vous faire interviewer par l’IA** Livrable : un résumé prêt à coller - Étape 4 · 5 min **Enrichir avec vos documents** Livrable : un contexte appuyé sur du réel - Étape 5 · 5 min **Capitaliser dans une fiche** Livrable : 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 : …' }, ]; ---