Process List

<!-- SASS: src/stylesheets/_components/process-list.scss -->
<!-- JS: src/_js/process-list.js -->

<br>
<div class="usa-grid">

    <h6>Vertical list</h6>
    <div class="vaux-process-list" aria-labelledby="process list">
        <ol>
            <li class="checked">
                <span>Start Your Account</span>
            </li>
            <li class="checked">
                <span><a href="#" tabindex="-1">Create Password</a></span>
            </li>
            <li class="current" tabindex="0" aria-labelledby="process list">
                <span>
                    <b>Add More Details</b>
                    <p>Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nulla ornare mauris ut quam lacinia</p>
                    <button>Agree</button>
                </span>
            </li>
            <li>
                <span>Review and Finish</span>
            </li>
        </ol>
    </div>

    <h6>Horizontal list</h6>
    <div class="vaux-process-list horizontal" aria-labelledby="process list">
        <ol>
            <li class="checked">
            </li>
            <li class="checked">
            </li>
            <li class="current" tabindex="0">
            </li>
            <li>
            </li>
        </ol>
    </div>

    <br>

    <h6>Horizontal list (with bottom label)</h6>
    <div class="vaux-process-list horizontal has-bottom-label" aria-labelledby="process list">
        <ol>
            <li class="checked">
                <span>Start Your Account</span>
            </li>
            <li class="checked">
                <span><a href="#" tabindex="-1">Create Password</a></span>
            </li>
            <li class="current" tabindex="0">
                <span>
                    <b>Add More Details</b>
                </span>
            </li>
            <li>
                <span>Review and Finish</span>
            </li>
        </ol>
        <div class="process-bottom-label" tabindex="0">
            Centered label
        </div>
    </div>

</div>