Step

Step

Steps can be used to show a list of steps in a process, as well as the current step or state that the user is on.

Default steps

Create a default horizontal set of steps by adding the class .hc-steps to an unordered list (<ul>) element. Each <li> inside should have the class .hc-step.

  • First step
  • Second step
  • Third step
  • Fourth step
HTML
Expand Edit in Playground Copy 

<ul class="hc-steps">
  <li class="hc-step">First step</li>
  <li class="hc-step">Second step</li>
  <li class="hc-step">Third step</li>
  <li class="hc-step">Fourth step</li>
</ul>

Each step is equally spaced and wide, and numbers appear on the indicators automatically. You can create colors and convey information using the state classes below.

Accessibility note

Add the aria-current="true" attribute to whatever step is the current or active step. You can optionally highlight this step with a class.

Vertical steps

Switch to a vertical variant by appending the class .hc-steps--vertical to the parent .hc-steps element.

  • First step
  • Second step
  • Third step
  • Fourth step
HTML
Expand Edit in Playground Copy 

<ul class="hc-steps hc-steps--vertical">
  <li class="hc-step">First step</li>
  <li class="hc-step">Second step</li>
  <li class="hc-step">Third step</li>
  <li class="hc-step">Fourth step</li>
</ul>

Full width steps

You can force the steps in the horizontal mode to use the entire available width, setting the first item to be left aligned and the right item to be right aligned. Add the class .hc-steps--full to the parent wrapper.

  • First step
  • Last step
  • First step
  • Second step
  • Last step
  • First step
  • Second step
  • Third step
  • Last step
  • First step
  • Second step
  • Third step
  • Fourth step
  • Last step
  • First step
  • Second step
  • Third step
  • Fourth step
  • Fifth step
  • Last step
HTML
Expand Edit in Playground Copy 

<ul class="hc-steps hc-steps--full">
  <li class="hc-step hc-step--primary">First step</li>
  <li class="hc-step hc-step--primary">Last step</li>
</ul>
<ul class="hc-steps hc-steps--full">
  <li class="hc-step hc-step--primary">First step</li>
  <li class="hc-step hc-step--primary">Second step</li>
  <li class="hc-step">Last step</li>
</ul>
<ul class="hc-steps hc-steps--full">
  <li class="hc-step hc-step--primary">First step</li>
  <li class="hc-step hc-step--primary">Second step</li>
  <li class="hc-step hc-step--primary">Third step</li>
  <li class="hc-step">Last step</li>
</ul>
<ul class="hc-steps hc-steps--full">
  <li class="hc-step hc-step--primary">First step</li>
  <li class="hc-step hc-step--primary">Second step</li>
  <li class="hc-step hc-step--primary">Third step</li>
  <li class="hc-step">Fourth step</li>
  <li class="hc-step">Last step</li>
</ul>
<ul class="hc-steps hc-steps--full">
  <li class="hc-step hc-step--primary">First step</li>
  <li class="hc-step hc-step--primary">Second step</li>
  <li class="hc-step hc-step--primary">Third step</li>
  <li class="hc-step hc-step--primary">Fourth step</li>
  <li class="hc-step">Fifth step</li>
  <li class="hc-step">Last step</li>
</ul>

Since the spacing for these needs to be hardcoded, only steps up to 10 items are supported. If you need more please submit a ticket!

Note also that the first and last steps here are smaller than the middle ones so that the middle item centering works as expected. If you need more room for the first and last steps, consider adding .hc-whitespace-nowrap if the text isn’t too long; otherwise the text labels will wrap at a fairly tight width.

States

Add the modifier class .hc-step--primary for completed steps or to otherwise indicate that they’re in the past. You can also add a slight accent for the current step by adding the class .hc-step--current, which should also have aria-current="true" for accessibility purposes.

Semantic classes also exist to convey additional information: .hc-step--success, .hc-step--info, .hc-step--warning, and .hc-step--error.

  • First step
  • Second step
  • Third step
  • Fourth step
  • Filter groups
  • Choose recipients
  • Draft your message
HTML
Expand Edit in Playground Copy 

<ul class="hc-steps">
  <li class="hc-step hc-step--primary">First step</li>
  <li class="hc-step hc-step--primary">Second step</li>
  <li class="hc-step hc-step--primary hc-step--current" aria-current="true">Third step</li>
  <li class="hc-step">Fourth step</li>
</ul>
<ul class="hc-steps">
  <li class="hc-step hc-step--info">Filter groups</li>
  <li class="hc-step hc-step--info hc-step--current" aria-current="true">Choose recipients</li>
  <li class="hc-step">Draft your message</li>
</ul>

Note that the background progression bar color is only adjusted for two sequential steps with the same class name.

Data attribute

Manually set the content inside of the step counter by using the data-hc-counter attribute on each .hc-step element. Beware! Whatever value you put inside of this attribute will display unmodified inside of the circle.

If you also append the class hc-step--use-icons, you can send in the name of the icon you’d like to place inside of the circle and that will be used instead.

  • Question
  • Check
  • Times
  • Star
  • Icon
  • Full
  • Empty
HTML
Expand Edit in Playground Copy 

<ul class="hc-steps">
  <li class="hc-step" data-hc-counter="?">Question</li>
  <li class="hc-step" data-hc-counter="✓">Check</li>
  <li class="hc-step" data-hc-counter="✕">Times</li>
  <li class="hc-step" data-hc-counter="★">Star</li>
  <li class="hc-step hc-step--use-icons" data-hc-counter="calendar">Icon</li>
  <li class="hc-step hc-step--primary hc-step--use-icons" data-hc-counter="badge-check">Full</li>
  <li class="hc-step" data-hc-counter="">Empty</li>
</ul>

Mobile handling

You can change the stacking behavior of the progress bar in two ways. The easiest is to simply append .hc-steps--responsive to the parent element and the steps will display as vertical on small screens, shifting to horizontal on md screens and above.

Alternatively, manually set when the steps switch by adding a breakpoint modifier class like this: hc-steps--vertical lg:hc-steps--horizontal. This starts as vertical on small screens, shifting to horizontal at the lg breakpoint.

  • These steps
  • Use the default
  • Responsiveness
  • Class name
  • These steps
  • Manually change
  • At the MD
  • Breakpoint
HTML
Expand Edit in Playground Copy 

<ul class="hc-steps hc-steps--responsive">
  <li class="hc-step hc-step--primary" aria-current="true">These steps</li>
  <li class="hc-step">Use the default</li>
  <li class="hc-step">Responsiveness</li>
  <li class="hc-step">Class name</li>
</ul>
<ul class="hc-steps hc-steps--vertical md:hc-steps--horizontal">
  <li class="hc-step hc-step--primary" aria-current="true">These steps</li>
  <li class="hc-step">Manually change</li>
  <li class="hc-step">At the MD</li>
  <li class="hc-step">Breakpoint</li>
</ul>