View on GitHub

Stepped process

Stepped process bar used for multiple steps forms process

On this page

A new Orange Unified Design System is being developed. Explore OUDS Web

How to use

Use a nav element with .stepped-process class, containing an ordered list <ol> with .stepped-process-item class on list items.

Use short labels for each step, otherwise they will be cut off to preserve inline layout. More information can be carried on the title attribute of the .stepped-process-link.

Add .active to a .stepped-process-item to indicate the current step, alongside aria-current="step" to convey the active state to assistive technologies.

Example

<nav class="stepped-process" aria-label="Checkout process">
  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
  <ol>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
    </li>
    <li class="stepped-process-item active">
      <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
    </li>
  </ol>
</nav>

Sass

Variables

For more details, please have a look at the exhaustive list of available variables:

$stepped-process-max-items: 5;
$stepped-process-counter:   step; // Used as a counter name

$step-item-margin-end:   $border-width;
$step-item-padding:      .5rem;
$step-item-bg:           $black;
$step-item-active-bg:    $primary;
$step-item-next-bg:      $gray-400;
$step-item-shadow-size:  $border-width * 1.5;
$step-item-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $white) #{"*/"};
$step-item-padding-end:  $step-item-padding * 2;

$step-link-width:        1.25ch; // Matches width of a single number
$step-link-color:        $white;
$step-link-active-color: $black;
$step-link-marker:       counter($stepped-process-counter) "\A0";
$step-link-marker-lg:    counter($stepped-process-counter) ".\A0";

$step-item-arrow-width:  1rem;
$step-item-arrow-shape:  polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 100% 100%) #{"*/"}; // Used in clip-path