Progress
deprecated v2.0.0

This component is now deprecated and will be removed/refactored in v2.0.0

Introduction

Compact step progress is constructed using typography elements, as opposed to a progress element.

Examples

Vertical progress

<nav class="progress progress--y">
        <ol class="progress__list progress__list--y">
            <li class="progress__step progress__step--y is-done">
                <span class="progress__label progress__label--y">Step 1</span>
            </li>
            <li class="progress__step progress__step--y is-current">
                <span class="progress__label progress__label--y">Step 2</span>
            </li>
            <li class="progress__step progress__step--y">
                <span class="progress__label progress__label--y">Step 3</span>
            </li>
            <li class="progress__step progress__step--y">
                <span class="progress__label progress__label--y">Step 4</span>
            </li>
        </ol>
    </nav>

Compact step progress

School & Class Step 1 of 9 

<hr class="hr-light">
    <div class="container-fluid">
      <h3 class="heading--cta">School &amp; Class <a href="#" class="text-caps text-small heading__cta">Step 1 of 9</a></h3>
    </div>
    <hr class="hr-light">

Compact step state

You are in: Application What is this? 
<strong class="text-bold text-caps text-small"><span class="text-dampen">You are in:</span> Application <a href="#" class="text-space-left">What is this?</a></strong>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_progress.scss
  • src/styles/base/_shame.scss

Usage

Class/JavaScript Hook Description Required?
.progress Placed on outer-most tag that will contain the progress component Optional
.progress__list Placed on tag that will contain the progress steps Optional
.progress__step Placed on tag that will be a progress step Optional
.progress__label Placed on tag that will contain name of the step Optional
.progress--y Vertical progress styling Required for vertical styling
.progress__list--y Vertical progress list styling Required for vertical styling
.progress__step--y Vertical progress step styling Required for vertical styling
.progress__label--y Vertical progress label styling Required for vertical styling
.is-current State class to make the step appear as current Optional
.is-done State class to make the step appear as done Optional