Back to the list

Stepper

Use the stepper component to navigate inside a multi pages form for example.

File to include

@import "components/stepper";

Row

Step
2 Step
3 Step
4 Step
5 Step 
<div class="stepper" data-direction="row">
    <div class="step step-active">
        <span class="step-number">
            <fajny-icon icon-name="check-solid"></fajny-icon>
        </span>

        <a href="#" class="step-text">
            Step
        </a>
    </div>

    <div class="step step-active">
        <span class="step-number">2</span>

        <a href="#" class="step-text">
            Step
        </a>
    </div>

    <div class="step">
        <span class="step-number">3</span>

        <small class="step-text">
            Step
        </small>
    </div>

    <div class="step">
        <span class="step-number">4</span>

        <small class="step-text">
            Step
        </small>
    </div>

    <div class="step">
        <span class="step-number">5</span>

        <small class="step-text">
            Step
        </small>
    </div>
</div>

Column

Step
2 Step
3 Step
4 Step
5 Step 
<div class="stepper" data-direction="column">
    <div class="step step-active">
        <span class="step-number">
            <fajny-icon icon-name="check-solid"></fajny-icon>
        </span>

        <a href="#" class="step-text">
            Step
        </a>
    </div>

    <div class="step step-active">
        <span class="step-number">2</span>

        <a href="#" class="step-text">
            Step
        </a>
    </div>

    <div class="step">
        <span class="step-number">3</span>

        <small class="step-text">
            Step
        </small>
    </div>

    <div class="step">
        <span class="step-number">4</span>

        <small class="step-text">
            Step
        </small>
    </div>

    <div class="step">
        <span class="step-number">5</span>

        <small class="step-text">
            Step
        </small>
    </div>
</div>

Attributes

Name Example value Possible values Default Required
data-direction column "row" | "column" row No