Numbered Steps

Nav rapide
Étape 1 full Étape 3 full
Composants utilisés dans le template ci-dessous:

Section

Étape 1 full - Voir le template
1
2
3
4
5
  • template
<div class="numbered-steps flex items-center mx-auto sm:w-fit">

    <div class="numbered-steps__step numbered-steps__step--fill">

        <span>1</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step">

        <span>2</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step">

        <span>3</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step">

        <span>4</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step">

        <span>5</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

</div>
Étape 3 full - Voir le template
1
2
3
4
5
  • template
<div class="numbered-steps flex items-center mx-auto sm:w-fit">

    <div class="numbered-steps__step numbered-steps__step--fill">

        <span>1</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step numbered-steps__step--fill">

        <span>2</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step numbered-steps__step--fill">

        <span>3</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step">

        <span>4</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

    <div class="numbered-steps__separator"></div>

    <div class="numbered-steps__step">

        <span>5</span>

        <?= icon('check', 'w-3.5'); ?>

    </div>

</div>