Chi · Steps

Steps

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

Examples

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

Base

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

Inverse

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

Horizontal Labels Base

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

<ul class="a-steps -horizontalLabels">
  <li class="-completed">
    <div class="a-steps__icon"></div>
    <a href="#">Step 1</a>
    <div class="a-steps__line"></div>
  </li>
  <li class="-completed">
    <div class="a-steps__icon"></div>
    <a href="#">Step 2</a>
    <div class="a-steps__line"></div>
  </li>
  <li class="-active">
    <div class="a-steps__icon"></div>
    <a href="#">Step 3</a>
    <div class="a-steps__line"></div>
  </li>
  <li>
    <div class="a-steps__icon"></div>
    <a href="#">Step 4</a>
    <div class="a-steps__line"></div>
  </li>
  <li>
    <div class="a-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.

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