Wizard

Wizards put the user through a multi-step workflow.

Wizard content goes here. 


<div class="wizard">

    <nav class="wizard__steps" aria-label="Nav Title Goes Here">
        <ol>
            <li class="wizard-step wizard-step--completed">
                <span>Step 1</span>
            </li>
            <li class="wizard-step wizard-step--completed wizard-step--previous">
                <span><a href="#">Step 2</a></span>
            </li>
            <li class="wizard-step wizard-step--current">
                <span>Step 3</span>
            </li>
            <li class="wizard-step wizard-step--incomplete wizard-step--next">
                <span>Step 4</span>
            </li>
            <li class="wizard-step wizard-step--incomplete">
                <span>Step 5</span>
            </li>
        </ol>
    </nav>

    <div class="wizard__content">
       [Wizard content goes here...]
    </div>

    <div class="wizard__actions">
        <button type="submit" class="button wizard-action wizard-action--continue">Continue</button>
        <button type="submit" class="button button--sm wizard-action wizard-action--back">Go Back</button>
        <button type="submit" class="button button--sm wizard-action wizard-action--cancel">Cancel</button>
    </div>

</div>

Class Reference

Class Info
wizard Primary container. Should be added to a div.
wizard__steps Container for the list of wizard steps. Should be added to a div.
wizard-step A single wizard step.
wizard-step--current The wizard step that you are currently on.
wizard-step--completed A completed wizard step.
wizard-step--incomplete A wizard step that hasn't been completed yet.
wizard-step--previous The step that has just been completed.
wizard-step--next The next step in the process.
wizard__content Container for the current step's content. Should be added to a div.
wizard__actions The actions available to take for the current step. Should be added to a div.
wizard-action A single wizard action. Should be added to a button.
wizard-action--[action] Available options include: "continue", "back", and "cancel".