- 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.
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>