Progress list

Show a user's position in a multi-step workflow.

Example usage

<div class="progress-list">

    <a href="#" class="progress-list__item progress-list__item--current">
        <span class="progress-list__label">
            <span class="badge badge--round badge--outline">Step 1</span>
            Cut a hole in a box
        </span>
        <span class="progress-list__arrow">&gt;</span>
    </a>

    <a href="#" class="progress-list__item">
        <span class="progress-list__label">
            <span class="badge badge--round badge--outline">Step 2</span>
            Put your junk in that box
        </span>
        <span class="progress-list__arrow">&gt;</span>
    </a>

</div>

See the Pen docs - form - progress list by Pulsar (@pulsar) on CodePen.

States

There are three states of a progress list item

State Class
Complete (user has completed this step) progress-list__item--completed
Current (the currently active step) progress-list__item--current
Disabled (user cannot yet access this step is-disabled

See the Pen docs - form - progress list states by Pulsar (@pulsar) on CodePen.

Disabled items

Use the .is-disabled class when the user cannot, or should not be able to navigate to a progress step.

Mixing element types for items

You must ensure that the direct children of the progress-list container are always progress-list__item elements. The styling used for this component contains :first-child and :last-child rules, to allow the use of mixed element types. Using other elements nested alongside progress-list__item elements may introduce layout problems.

results matching ""

    No results matching ""