Steps
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
<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
<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.
<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
.
<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.
<!-- 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>