Component documentation

Basics

Components

Objects

Utilities

Wizard

<nav class="c-wizard c-wizard--bordered">
    <ul>
        <li>
            <a class="c-wizard__item c-wizard--complete" href="#">
                <div class="c-wizard__indicator"></div>
                <div class="c-wizard__label">Step 1</div>
            </a>
        </li>
        <li>
            <a class="c-wizard__item c-wizard--active" href="#">
                <div class="c-wizard__indicator">2</div>
                <div class="c-wizard__label">Step 2</div>
            </a>
        </li>
        <li>
            <a class="c-wizard__item" href="#">
                <div class="c-wizard__indicator">3</div>
                <div class="c-wizard__label">Step 3</div>
            </a>
        </li>
        <li>
            <a class="c-wizard__item" href="#">
                <div class="c-wizard__indicator">4</div>
                <div class="c-wizard__label">Step 4</div>
            </a>
        </li>
        <li>
            <a class="c-wizard__item" href="#">
                <div class="c-wizard__indicator">5</div>
                <div class="c-wizard__label">Step 5</div>
            </a>
        </li>
    </ul>
</nav>

nav.c-wizard.c-wizard--bordered
    ul
        li
            a.c-wizard__item.c-wizard--complete(href="#")
                .c-wizard__indicator
                .c-wizard__label Step 1
        li
            a.c-wizard__item.c-wizard--active(href="#")
                .c-wizard__indicator 2
                .c-wizard__label Step 2
        li
            a.c-wizard__item(href="#")
                .c-wizard__indicator 3
                .c-wizard__label Step 3
        li
            a.c-wizard__item(href="#")
                .c-wizard__indicator 4
                .c-wizard__label Step 4
        li
            a.c-wizard__item(href="#")
                .c-wizard__indicator 5
                .c-wizard__label Step 5