Steppers

Steppers convey progress through numbered steps. They may also be used for navigation.

Horizontal steppers are ideal when the contents of one step depend on an earlier step.

Avoid using long step names in horizontal steppers.

<div class="stpper-horiz">
    <div class="stepper-horiz-inner">
        <div class="stepper done">
            <div class="stepper-step">
                <i class="icon stepper-step-icon">check</i>
                <span class="stepper-step-num">1</span>
            </div>
            <span class="stepper-text">Step 1</span>
        </div>
        <div class="stepper active">
            <div class="stepper-step">
                <i class="icon stepper-step-icon">check</i>
                <span class="stepper-step-num">2</span>
            </div>
            <span class="stepper-text">Step 2</span>
        </div>
        <div class="stepper">
            <div class="stepper-step">
                <i class="icon stepper-step-icon">check</i>
                <span class="stepper-step-num">3</span>
            </div>
            <span class="stepper-text">Step 3</span>
        </div>
    </div>
</div>

<div class="stpper-horiz stepper-horiz-alt">
    <div class="stepper-horiz-inner">
        <div class="stepper done">
            ...
        </div>
        <div class="stepper active">
            ...
        </div>
        <div class="stepper">
            ...
        </div>
    </div>
</div>

Linear steppers require users to complete one step in order to move on to the next.

Each linear step must be completed before proceeding to the next one.

Non-linear steppers allow users to enter a multi-step flow at any point.

Non-linear steps may be completed in any order.

<div class="stpper-horiz stepper-horiz-alt">
    <a class="stepper stepper-control waves-attach" ...>
        ...
    </a>
    ...
</div>