Soracom

Home
Brand
Design System
FAQ

Options

Basic usage

Each step is an li directly inside the container. This component supports a maximum of 10 progress steps.

html

Copy

<ul class="ds-progress-steps">
  <li>Start</li>
  <li>One Step</li>
  <li>Another Step</li>
  <li>End</li>
</ul>

Indicating progress

Adding the css modifier --X (where X is a number between 1 and 10) will style the progress up to the selected step.

html

Copy

<ul class="ds-progress-steps --3">
  <li> Choose account type/region </li>
  <li> Create account </li>
  <li> Verify your email </li>
  <li> Enter contact details </li>
  <li> Account submission complete </li>
</ul>