Stepper

Beta Added in 2.0.0

Steppers indicate progress of a sequence of steps.

Usage

To apply this component, use the following classes.

Class	Description
`.gls-stepper`	Add this class to a `<ol>` element to define the Stepper component. Use `<a>` elements as steps within the list.
`.gls-active`	Add this class to a list item to apply an active state to a step item.

<ol class="gls-stepper">
    <li><a href="#">Step 1</a></li>
    <li class="gls-active"><a href="#">Step 2</a></li>
    <li><a href="#">Step 3</a></li>
</ol>

Preview
Markup

1. Step 1
2. Step 2
3. Step 3
4. Step 4

<ol class="gls-stepper">
    <li>
        <a href="#" gls-tooltip="Step 1">Step 1</a>
    </li>
    <li class="gls-active">
        <a href="#" gls-tooltip="Step 2">Step 2</a>
    </li>
    <li>
        <a href="#" gls-tooltip="Step 3">Step 3</a>
    </li>
    <li>
        <a href="#" gls-tooltip="Step 4">Step 4</a>
    </li>
</ol>