Progress-Stepper

Progress Stepper Theming

You can customize the color of your progress stepper and completed labels by altering the variable $progress-color in your theme file.

Step 1

Step 2

//Include this variable in your theme file to customize the color
$progress-color: $green;

Width Options

The width on this progress stepper can be set by an inline style or a class name.

Inline width: style="width: 50%;"
Class width: class="progress-bar--2of3"

<!-- First Step -->
  <div class="column column--full">
    <div class="progress">
      <div class="progress-bar" data-id="progress-stepper" style="width: 50%;"></div>
    </div>
    <div class="progress-labels">
      <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
      <div class="progress-label"><a href="#">Step 2</a></div>
      <div class="progress-label"><a href="#">Step 3</a></div>
    </div>
  </div>

  <div class="column column--full">
    <div class="progress">
      <div class="progress-bar progress-bar--2of3" data-id="progress-stepper"></div>
    </div>
    <div class="progress-labels">
      <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
      <div class="progress-label"><a href="#">Step 2</a></div>
      <div class="progress-label"><a href="#">Step 3</a></div>
    </div>
  </div>

Two Steps

<!-- First Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 25%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--current">Step 1</div>
    <div class="progress-label">Step 2</div>
  </div>
</div>

<!-- Second Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 75%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--current">Step 1</div>
    <div class="progress-label">Step 2</div>
  </div>
</div>

<!-- Completed Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 25%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--current">Step 1</div>
    <div class="progress-label">Step 2</div>
  </div>
</div>

Three Steps

<!-- First Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 16.666%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label"><a href="#">Step 1</a></div>
    <div class="progress-label"><a href="#">Step 2</a></div>
    <div class="progress-label"><a href="#">Step 3</a></div>
  </div>
</div>

<!-- Second Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 50%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label"><a href="#">Step 2</a></div>
    <div class="progress-label"><a href="#">Step 3</a></div>
  </div>
</div>

<!-- Third Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 83.333%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div>
    <div class="progress-label"><a href="#">Step 3</a></div>
  </div>
</div>

<!-- Completed Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div>
  </div>
</div>

Four Steps

<!-- First Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 12.5%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label"><a href="#">Step 1</a></div>
    <div class="progress-label"><a href="#">Step 2</a></div>
    <div class="progress-label"><a href="#">Step 3</a></div>
    <div class="progress-label"><a href="#">Step 4</a></div>
  </div>
</div>

<!-- Second Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 37.5%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label"><a href="#">Step 2</a></div>
    <div class="progress-label"><a href="#">Step 3</a></div>
    <div class="progress-label"><a href="#">Step 4</a></div>
  </div>
</div>

<!-- Third Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 62.5%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div>
    <div class="progress-label"><a href="#">Step 3</a></div>
    <div class="progress-label"><a href="#">Step 4</a></div>
  </div>
</div>

<!-- Fourth Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 87.5%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div>
    <div class="progress-label"><a href="#">Step 4</a></div>
  </div>
</div>

<!-- Completed Step -->
<div class="column column--full">
  <div class="progress">
    <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div>
  </div>
  <div class="progress-labels">
    <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div>
    <div class="progress-label progress-label--completed"><a href="#">Step 4</a></div>
  </div>
</div>