Skip to content

Soracom

Design System
Home Design System Elements Progress Steps

Progress Steps

Options 

Basic usage 

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

<ul class="ds-progress-steps">
  <li>Start</li>
  <li>One Step</li>
  <li>Another Step</li>
  <li>End</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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.

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>