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>

Demo controls

ds-progress-steps --3

Icons

You can set specific icons for each step using standard SDS --icon-* classes

html

Copy

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

Demo controls

ds-progress-steps --3

Colors

You can control the highlight color of both the progress bar and current step icon/text color by setting a standard sds --color-* var on the container element.

Container colors

html

Copy

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

Demo controls

ds-progress-steps --3

Setting a color on a list item, will change the color used when that list item is the current step

List item colors

html

Copy

<ul class="ds-progress-steps --1">
  <li> Choose account type/region </li>
  <li class="--icon-user"> Create account </li>
  <li class="--icon-email --color-blue-tint"> Verify your email </li>
  <li class="--icon-email-message"> Enter contact details </li>
  <li class="--color-celeste-shade"> Account submission complete </li>
</ul>

Demo controls

ds-progress-steps --1

You can combine both color options to set the default colors, plus item specific colors.

Container and list colors

html

Copy

<ul class="ds-progress-steps --1 --color-celeste">
  <li> Choose account type/region </li>
  <li class="--icon-user"> Create account </li>
  <li class="--icon-email --color-blue-tint"> Verify your email </li>
  <li class="--icon-email-message"> Enter contact details </li>
  <li class="--color-green"> Account submission complete </li>
</ul>

Demo controls

ds-progress-steps --1

Styles

Vertical

You can display the progress steps vertically by add the --vertical class to the container element.

Vertical style

html

Copy

<ul class="ds-progress-steps --vertical --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>

Demo controls

ds-progress-steps --3

Vertical style with icons

html

Copy

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

Demo controls

ds-progress-steps --3