Retour

Indicateur d'étapes (stepper)

L’indicateur d'étape permet d’indiquer à l’utilisateur où il se trouve dans un formulaire ou dans une démarche.

Documentation

Informations générales

L'indicateur d'étape peut contenir de 2 à 8 étapes.
Il doit être placé dans un conteneur de 6 à 8 colonnes de large en desktop, et 100% (12 colonnes) en mobile.
Le niveau de titre h2 peut être modifié suivant le contexte

Exemple d'indicateur d'étape 1 sur 3

Titre de l’étape en cours Étape 1 sur 3

Étape suivante : Titre de la prochaine étape

<div class="village-stepper">
    <h2 class="village-stepper__title">
        Titre de l’étape en cours
        <span class="village-stepper__state">Étape 1 sur 3</span>
    </h2>
    <div class="village-stepper__steps" data-village-current-step="1" data-village-steps="3"></div>
    <p class="village-stepper__details">
        <span class="village-text--bold">Étape suivante :</span> Titre de la prochaine étape
    </p>
</div>

Exemple d'indicateur d'étape 2 sur 8

Titre de l’étape en cours Étape 2 sur 8

Étape suivante : Titre de la prochaine étape

<div class="village-stepper">
    <h2 class="village-stepper__title">
        Titre de l’étape en cours
        <span class="village-stepper__state">Étape 2 sur 8</span>
    </h2>
    <div class="village-stepper__steps" data-village-current-step="2" data-village-steps="8"></div>
    <p class="village-stepper__details">
        <span class="village-text--bold">Étape suivante :</span> Titre de la prochaine étape
    </p>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.