Steps

Steps are used to help users navigate through multi-step processes.

Examples

To display steps, apply the class chi-steps to a unordered list ul and indicate the active link with the class -active in the corresponding li tag.

Base

Web Component
HTML Blueprint

<ul class="chi-steps">
  <li class="-completed">
    <div class="chi-steps__icon">
      <a href="#">Step 1</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="chi-steps__icon">
      <a href="#">Step 2</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-active">
    <div class="chi-steps__icon">
      <a href="#">Step 3</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon">
      <a href="#">Step 4</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon">
      <a href="#">Step 5</a>
    </div>
  </li>
</ul>

Inverse

Web Component
HTML Blueprint

<ul class="chi-steps -inverse">
  <li class="-completed">
    <div class="chi-steps__icon">
      <a href="#">Step 1</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="chi-steps__icon">
      <a href="#">Step 2</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-active">
    <div class="chi-steps__icon">
      <a href="#">Step 3</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon">
      <a href="#">Step 4</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon">
      <a href="#">Step 5</a>
    </div>
  </li>
</ul>

Horizontal Labels Base

To display steps with horizontal labels, apply the class -horizontal-label to the steps container and indicate the active link with the class -active and the class -completed in the corresponding div tag.

Web Component
HTML Blueprint

<ul class="chi-steps -horizontal-label">
  <li class="-completed">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 1</a>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 2</a>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-active">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 3</a>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon"></div>
    <a href="#">Step 4</a>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon"></div>
    <a href="#">Step 5</a>
  </li>
</ul>

Horizontal Labels Inverse

To display an inverse version of horizontal labels, apply the class -inverse.

Web Component
HTML Blueprint

<ul class="chi-steps -horizontal-label -inverse">
  <li class="-completed">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 1</a>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 2</a>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-active">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 3</a>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon"></div>
    <a href="#">Step 4</a>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon"></div>
    <a href="#">Step 5</a>
  </li>
</ul>

Responsiveness

Use -labels-{breakpoint}--hide to hide step component labels on specific breakpoints or -labels--hide to hide on all breakpoints. Breakpoints supported are sm, md, lg, and xl. Labels are shown on all breakpoints by default.

-labels-md--hide

-labels-lg--hide

Web Component
HTML Blueprint

<!-- Visible labels from md breakpoint -->
<ul class="chi-steps -labels-md--hide">
  <li class="-completed">
    <div class="chi-steps__icon">
      <a href="#">Step 1</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="chi-steps__icon">
      <a href="#">Step 2</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-active">
    <div class="chi-steps__icon">
      <a href="#">Step 3</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon">
      <a href="#">Step 4</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon">
      <a href="#">Step 5</a>
    </div>
  </li>
</ul>
<!-- Visible labels from lg breakpoint -->
<ul class="chi-steps -horizontal-label -labels-lg--hide">
  <li class="-completed">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 1</a>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 2</a>
    <div class="chi-steps__line"></div>
  </li>
  <li class="-active">
    <div class="chi-steps__icon"></div>
    <a href="#">Step 3</a>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon"></div>
    <a href="#">Step 4</a>
    <div class="chi-steps__line"></div>
  </li>
  <li>
    <div class="chi-steps__icon"></div>
    <a href="#">Step 5</a>
  </li>
</ul>