Steppers

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

Horizontal Steppers

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

Avoid using long step names in horizontal steppers.

check 1
Step 1
check 2
Step 2
Optional
check 3
Step 3
<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>
check 1
Step 1
check 2
Step 2
Optional
check 3
Step 3
<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

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.

check 1
Step 1
check 2
Step 2
Optional
check 3
Step 3
check 1
Step 1
check 2
Step 2
Optional
check 3
Step 3
check 1
Step 1
check 2
Step 2
Optional
check 3
Step 3

Non-linear Steppers

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>

Vertical Steppers

check 1
Step 1
check 2
Step 2
Optional

Vertical Steppers

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.

Vertical steppers can be used in mobile as-is. Simply ensure the contents for each step are responsive.

Continue Cancel

check 3
Step 3
<div class="stpper-vert">
    <div class="stpper-vert-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-vert-content">
           ...
        </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-vert-content">
           ...
        </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 class="stepper-vert-content">
           ...
        </div>
    </div>
</div>