Steppers

v-0.0.0

How it works

You only need to sprecify the number of steps in the main class on the tag <ul class="stepper--[NBR_OF_STEPS]">.

That number can only be between 2 and 6 for an optimal desplay.

Example

• Step Three
• Step Four
• Step Five
• Step Six

Current step

<div class="stepper__container">
    <ul class="stepper--6">
        <li class="step--previous">
            <button class="title link" type="button">Step One</button>
        </li>
        <li class="step--previous">
            <button class="title link" type="button">Step Two</button>
        </li>
        <li class="step--current">
            <span class="title">Step Three</span>
        </li>
        <li class="step">
            <span class="title">Step Four</span>
        </li>
        <li class="step">
            <span class="title">Step Five</span>
        </li>
        <li class="step">
            <span class="title">Step Six</span>
        </li>
    </ul>
    <div class="mobileNav">
        <button class="btn--previous" type="button">Previous step</button>
        <p class="title">Current step</p>
        <button disabled="" class="btn--next" type="button">Next step</button>
    </div>
</div>