Process steps

Provide the user with context for their place in a multi-step process. Show completion progress, current location and remaining steps.

Description

Each one of the process step components is made up of process step items. These are the element with the attached class name of process-steps__item. To change the state of one of these components you can use state classes. These items have multiple options as displayed below in the example and markup and list:

  • NO CLASS : this is the default state of the step item. This displays the yet to be complete and not active class.
  • is-active : this state will be the current step the user is on.
  • is-complete : this state exists for previous steps that have been completed.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-process-steps;

Usage

Usage example

  1. Eligibility
  2. Create Profile
  3. Business Details
  4. Review Quote

Code example

<ol class="process-steps">
  <li class="process-steps__item is-complete">
    <div class="process-steps__content">
      Eligibility
    </div>
  </li>
  <li class="process-steps__item is-active">
    <div class="process-steps__content">
      Create Profile
    </div>
  </li>
  <li class="process-steps__item">
    <div class="process-steps__content">
      Business Details
    </div>
  </li>
  <li class="process-steps__item">
    <div class="process-steps__content">
      Review Quote
    </div>
  </li>
</ol>