Steps

Steps help you show the progress in any multi-step process. We have a few different versions you can use, depending on your needs.

Steps with dots

Users need to know that there are multiple steps
Steps do not need any labels

Hello heading

Nullam mollis turpis ac felis fermentum, id suscipit dui dapibus. Curabitur mi enim, laoreet sit amet ullamcorper dignissim, mollis vel ex. Vestibulum enim quam, tempor aliquam pharetra et, molestie non odio.

Go to the next step

Title
Title
Title
Title
Title

<div class="flex flex-col items-center gap-4 text-center dark:text-white">
  <h2 class="c_h-heading c_h-heading--2xl">Hello heading</h2>
  <p>
    Nullam mollis turpis ac felis fermentum, id suscipit dui dapibus. Curabitur
    mi enim, laoreet sit amet ullamcorper dignissim, mollis vel ex. Vestibulum
    enim quam, tempor aliquam pharetra et, molestie non odio.
  </p>
  <a href="#" class="c-button">Go to the next step</a>
  <ol class="c-step-dots">
    <li class="c-step-dots__step c-step-dots__step--done">
      <span class="hidden">Title</span>
    </li>
    <li class="c-step-dots__step c-step-dots__step--done">
      <span class="hidden">Title</span>
    </li>
    <li class="c-step-dots__step c-step-dots__step--active">
      <span class="hidden">Title</span>
    </li>
    <li class="c-step-dots__step">
      <span class="hidden">Title</span>
    </li>
    <li class="c-step-dots__step">
      <span class="hidden">Title</span>
    </li>
  </ol>
</div>

Implementation

Type	Name
Elements
Wrapper	`.c-step-dots`
Dot	`.c-step-dots__step`
States
Done dot	`.c-step-dots__step--done`
Active dot	`.c-step-dots__step--active`

Horizontal steps

When the steps need labels
The steps are mostly mandatory
There's a maximum of five steps

1 Language
2 Installation
3 Validate
4 Configure

<ol class="c-steps-hor">
    <li class="c-steps-hor__step c-steps-hor__step--done">
      <span class="c-steps-hor__number c-steps-hor__number--done">1</span>
      Language
    </li>
    <li class="c-steps-hor__step c-steps-hor__step--active">
      <span class="c-steps-hor__number c-steps-hor__number--active">2</span>
      Installation
    </li>
    <li class="c-steps-hor__step">
      <span class="c-steps-hor__number">3</span>
      Validate
    </li>
    <li class="c-steps-hor__step">
      <span class="c-steps-hor__number">4</span>
      Configure
    </li>
  </ol>

Implementation

Type	Name
Elements
Wrapper	`.c-step--hor`
Step	`.c-step--hor__step`
States
Step done	`.c-step--hor__step--done`
Step active	`.c-step--hor__step--active`

Vertical steps

When the steps need labels
Some steps can be optional
You have more than 5 steps.
You can even split up the vertical steps into multiple lists

Step name
Step name
Step name
Step name
Step name

<ol class="c-steps-vert">
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step c-steps-vert__step--active">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
  </ol>

Installation

Step name
Step name
Step name

Configuration

Step name
Step name
Step name
Step name

Finishing

Step name
Step name

<div class="flex flex-col gap-4 dark:text-white">
  <h2 class="c-caps text-xs opacity-75">
    Installation
  </h2>
  <ol class="c-steps-vert">
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
  </ol>
  <h2 class="c-caps text-xs opacity-75">
    Configuration
  </h2>
  <ol class="c-steps-vert">
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step c-steps-vert__step--active">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
  </ol>
  <h2 class="c-caps text-xs opacity-75">
    Finishing
  </h2>
  <ol class="c-steps-vert">
    <li class="c-steps-vert__step">Step name</li>
    <li class="c-steps-vert__step">Step name</li>
  </ol>
</div>

Implementation

Type	Name
Elements
Wrapper	`.c-steps-vert`
Step	`.c-steps-vert__step`
States
Step active	`.c-steps-vert__step--active`