View on GitHub

Stepper

Steppers are to show progress in a workflow

Example

Step 1
Step 2 (active)
Step 3
Step 4
Step 5
<div class="stepper">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

Colors

Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
Step 1
Step 2 (active)
Step 3
Step 4
Step 5
<div class="stepper stepper-primary">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-secondary">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-success">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-danger">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-warning">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-info">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-dark">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-contrast-light">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-contrast-medium">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-contrast-dark">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>

<div class="stepper stepper-black">
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider right"></div>
    <div class="stepper-caption">Step 1</div>
  </div>
  <div class="stepper-item active">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 2 (active)</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 3</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 4</div>
    <div class="stepper-divider right"></div>
  </div>
  <div class="stepper-item">
   <div class="stepper-indicator-wrapper">
      <div class="stepper-indicator"></div>
    </div>
    <div class="stepper-divider left"></div>
    <div class="stepper-caption">Step 5</div>
  </div>
</div>