Progress List

Supported products

• Central CMS
• Central Forms
• Central Connect

---

Show a user’s position in a multi-step workflow.

Step 1 Cut a hole in a box

>

Step 2 Put your junk in that box

>

Basic usage

<div class="progress-list">
  <a href="#" class="progress-list__item progress-list__item--current">
      <span class="progress-list__label">
          <span class="badge badge--round badge--outline">Step 1</span>
          Cut a hole in a box
      </span>
      <span class="progress-list__arrow">&gt;</span>
  </a>
  <a href="#" class="progress-list__item">
      <span class="progress-list__label">
          <span class="badge badge--round badge--outline">Step 2</span>
          Put your junk in that box
      </span>
      <span class="progress-list__arrow">&gt;</span>
  </a>
</div>

caution

You must ensure that the direct children of the progress-list container are always progress-list__item elements. The styling used for this component contains :first-child and :last-child rules, to allow the use of mixed element types. Using other elements nested alongside progress-list__item elements may introduce layout problems.

States

There are three states of a progress list item.

Step 1 Complete

>

Step 2 Current

>

Step 3 Disabled

>

State	Description	Class
Complete	The user has completed this step	progress-list__item--complete
Current	The currently active step	progress-list__item--current
Disabled	User cannot yet access this step	is-disabled