American Express American Express |

Multi-Step Trackers

PURPOSE

Multi-step trackers indicate a customer’s progress through a series of linear, discrete steps. While the individual steps may be unrelated to each other in content, as a whole they are required for the customer to complete the intended action.

Simple Multi-Step Tracker

Usage

Use simple multi-step trackers for processes with multiple discrete steps, such as when directing a customer through replacing a Card or signing up for a service.

Example - Simple Multi-Step Tracker

Desktop = Apply labels that provide to the customer an idea of what to expect for each step and throughout the journey.
Mobile = Show active step label and step counter for screen sizes that are 768px and smaller.

Copy
<div class="multi-step margin-1-b pad-t">
  <ol aria-label="Simple multi-step tracker" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 margin-0-t hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar margin-t-0" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">

      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">1 of 5</p>
    <p class="dls-deep-blue">Applicant Information</p>
  </div>
</div>

<div class="multi-step margin-1-tb pad-t">
  <ol aria-label="Simple multi-step tracker" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step active">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 margin-0-t hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">

      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">2 of 5</p>
    <p class="dls-deep-blue">Company Information</p>
  </div>
</div>

<div class="multi-step margin-1-t pad-t">
  <ol aria-label="Simple multi-step tracker" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step active">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step active">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step active">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step active">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step current" aria-current="step">

      <div class="dot-current" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 margin-0-t hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">5 of 5</p>
    <p class="dls-deep-blue">Confirmation</p>
  </div>
</div>

Example - Simple Multi-Step Tracker with gateway step

Show a security icon between two steps if a verification event is triggered.

Copy
<div class="multi-step margin-1-b pad-t">
  <ol aria-label="Simple multi-step tracker with gateway step" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
        <i class="icon" data-dls-icon="lock" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      </div>

      <span class="dot-label body-1 margin-0-t hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">

      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">1 of 5</p>
    <p class="dls-deep-blue">Applicant Information</p>
  </div>
</div>

<div class="multi-step margin-1-tb pad-t">
  <ol aria-label="Simple multi-step tracker with gateway step" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step active locked">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar completed">
          <div class="progress-track"></div>
        </div>
        <i class="icon" data-dls-icon="lock" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      </div>

      <span class="dot-label body-1 hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 margin-0-t hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">

      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">2 of 5</p>
    <p class="dls-deep-blue">Company Information</p>
  </div>
</div>

Example - Simple Multi-Step Tracker with Icons

Desktop = Icons can be added to the multi-step tracker to provide additional emphasis and visual guidance on individual steps.
Mobile = Remove icons, show active step label, and step counter for screen sizes that are 768px and smaller.

Copy
<div class="multi-step margin-1-b pad-t">
  <ol aria-label="Simple multi-step tracker with icons" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step current" aria-current="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="account" data-dls-icon-variant="filled" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 margin-0-t hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="business" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="document" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- Last step -->
    <li class="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="check" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">1 of 4</p>
    <p class="dls-deep-blue">Applicant Information</p>
  </div>
</div>

<div class="multi-step margin-1-tb pad-t">
  <ol aria-label="Simple multi-step tracker with icons" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step active">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="account" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar completed">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step current" aria-current="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="business" data-dls-icon-variant="filled" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 margin-0-t hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="document" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- Last step -->
    <li class="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="check" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">2 of 4</p>
    <p class="dls-deep-blue">Company Information</p>
  </div>
</div>

<div class="multi-step margin-1-t pad-t">
  <ol aria-label="Simple multi-step tracker with icons" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step active">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="account" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step active">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="business" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step active">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="document" data-dls-icon-variant="outline" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- Last step -->
    <li class="step current" aria-current="step">
      <i class="flex flex-justify-center step-icon hidden-sm-down" data-dls-icon="check" data-dls-icon-variant="filled" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <div class="dot-current" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 margin-0-t hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">4 of 4</p>
    <p class="dls-deep-blue">Confirmation</p>
  </div>
</div>

Complex Multi-Step Tracker

Usage

Use the complex multi-step tracker when a flow consists of multiple steps and it is important for the user to know how many steps are left.

Example - Complex Multi-Step Tracker with sub-steps

Desktop = Apply labels that provide to the customer an idea of what to expect for each step and throughout the journey. Sub-steps have indicators for first sub-step, in progress, and last sub-step. Use titles on the page to identify the sub step.

Mobile = Show active step label and step counter for screen sizes that are 768px and smaller. Sub-steps have indicators for first sub-step, in progress, and last sub-step. Use titles on the page to identify the sub step.

Copy
<div class="multi-step margin-1-b pad-t">
  <ol aria-label="Complex multi-step tracker with sub-steps" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step complex current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-sub-step">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="25">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 margin-0-t hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step complex">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="0">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">
      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">1 of 5</p>
    <p class="dls-deep-blue">Applicant Information</p>
  </div>
</div>

<div class="multi-step margin-1-b pad-t">
  <ol aria-label="Complex multi-step tracker with sub-steps" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step complex current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-sub-step in-progress">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="75">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 margin-0-t hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step complex">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="0">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">
      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">1 of 5</p>
    <p class="dls-deep-blue">Applicant Information</p>
  </div>
</div>

<div class="multi-step margin-1-tb pad-t">
  <ol aria-label="Complex multi-step tracker with sub-steps" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step complex current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-current">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="0">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 margin-0-t hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step complex">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="25">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">
      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">1 of 5</p>
    <p class="dls-deep-blue">Applicant Information</p>
  </div>
</div>

<div class="multi-step margin-1-t pad-t">
  <ol aria-label="Complex multi-step tracker with sub-steps" class="flex flex-justify-between">
    <!-- 1st step -->
    <li class="step complex active">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-completed">
          <div class="dot">
            <i class="glyph" data-dls-glyph="check" data-dls-glyph-size="md" data-dls-icon-role="decorative"></i>
          </div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="0">
          <div class="progress-track"></div>
        </div>
      </div>

      <span class="dot-label body-1 hidden-sm-down">Applicant Information</span>

    </li>

    <!-- 2nd step -->
    <li class="step complex current" aria-current="step">

      <div class="dot-bar margin-0-t" aria-hidden="true">
        <div class="dot-sub-step">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete" aria-valuenow="0">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 margin-0-t hidden-sm-down">Company Information</span>
    </li>

    <!-- 3rd step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Supporting Documents</span>
    </li>

    <!-- 4th step -->
    <li class="step">

      <div class="dot-bar" aria-hidden="true">
        <div class="dot-incomplete">
          <div class="dot"></div>
        </div>
        <div class="progress-bar incomplete">
          <div class="progress-track"></div>
        </div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Review</span>
    </li>

    <!-- Last step -->
    <li class="step">
      <div class="dot-incomplete" aria-hidden="true">
        <div class="dot"></div>
      </div>
      <span class="dot-label body-1 hidden-sm-down">Confirmation</span>
    </li>
  </ol>
  <div class="text-align-center margin-t hidden-md-up">
    <p class="dls-gray-05">2 of 5</p>
    <p class="dls-deep-blue">Company Information</p>
  </div>
</div>