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="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</div>
</li>
</ul>
Horizontal Labels
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="chi-steps__item -completed">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</li>
</ul>
Vertical
To display steps vertically, apply the class -vertical
to the steps container.
<ul class="chi-steps -vertical">
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
<div class="chi-steps__subitem -completed">
<i class="chi-icon icon-check -xs"></i>
<p>Completed item</p>
</div>
<div class="chi-steps__subitem -active">
<i class="chi-icon icon-spinner -xs"></i>
<p>In progress item</p>
</div>
<div class="chi-steps__subitem">
<p>Pending item</p>
</div>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</div>
</li>
</ul>
Additional size
Small
Use the -sm
modifier class to render small steps.
Horizontal
<!-- Base -->
<ul class="chi-steps -sm">
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</div>
</li>
</ul>
<!-- Horizontal labels -->
<ul class="chi-steps -horizontal-label -sm">
<li class="chi-steps__item -completed">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li clas="chi-steps__item">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</li>
</ul>
Vertical
<ul class="chi-steps -vertical -sm">
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
<div class="chi-steps__subitem -completed">
<i class="chi-icon icon-check -xs"></i>
<p>Completed item</p>
</div>
<div class="chi-steps__subitem -active">
<i class="chi-icon icon-spinner -xs"></i>
<p>In progress item</p>
</div>
<div class="chi-steps__subitem">
<p>Pending item</p>
</div>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</div>
</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="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon">
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</div>
</li>
</ul>
<!-- Visible labels from lg breakpoint -->
<ul class="chi-steps -horizontal-label -labels-lg--hide">
<li class="chi-steps__item -completed">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 1</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -completed">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 2</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item -active">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 3</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 4</a>
</div>
<div class="chi-steps__line"></div>
</li>
<li class="chi-steps__item">
<div class="chi-steps__icon"></div>
<div class="chi-steps__content">
<a class="chi-steps__item-title" href="#">Step 5</a>
</div>
</li>
</ul>