Primary progress bar

The progress bar helps users to see their position during a stepped process. We use a label that explains what stage the user is at, and where possible we try to represent each step with an icon that visually reinforces that particular step.

Subheading title
1
Step two
2
Step three
3
<div class="inm-progress-bar inm-progress-bar--stage-1 ">
  <div class="inm-progress-bar__title inm-subheading">Subheading title</div>
  <progress class="inm-progress-bar__bar" value="1" max="3">1</progress>
  <ol class="inm-progress-bar__indicator">
    <li class="inm-progress-bar__stage inm-progress-bar__stage--active">
      <img class="inm-progress-bar__active-icon" src="/assets/955008f628a290b8b90020253b131bcf.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/07d03c87a9b8d3ad15845e803a3aa8b1.svg" alt="" />
    </li>
    <li class="inm-progress-bar__stage ">
      <img class="inm-progress-bar__active-icon" src="/assets/173f39dcf4371f4bc71b1abae4910b62.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/2866782e04697e32c88ed6b2809d7236.svg" alt="" />
    </li>
    <li class="inm-progress-bar__stage ">
      <img class="inm-progress-bar__active-icon" src="/assets/fb71919423fe619bdb11c3ae9145d4cc.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/895d96f568d0c935ba6018e5dd2f8872.svg" alt="" />
    </li>
  </ol>
</div>
<div class="inm-progress-bar inm-progress-bar--stage-2 ">
  <div class="inm-progress-bar__title inm-subheading">Step two</div>
  <progress class="inm-progress-bar__bar" value="2" max="3">2</progress>
  <ol class="inm-progress-bar__indicator">
    <li class="inm-progress-bar__stage inm-progress-bar__stage--active">
      <img class="inm-progress-bar__active-icon" src="/assets/955008f628a290b8b90020253b131bcf.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/07d03c87a9b8d3ad15845e803a3aa8b1.svg" alt="" />
    </li>
    <li class="inm-progress-bar__stage inm-progress-bar__stage--active">
      <img class="inm-progress-bar__active-icon" src="/assets/173f39dcf4371f4bc71b1abae4910b62.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/2866782e04697e32c88ed6b2809d7236.svg" alt="" />
    </li>
    <li class="inm-progress-bar__stage ">
      <img class="inm-progress-bar__active-icon" src="/assets/fb71919423fe619bdb11c3ae9145d4cc.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/895d96f568d0c935ba6018e5dd2f8872.svg" alt="" />
    </li>
  </ol>
</div>
<div class="inm-progress-bar inm-progress-bar--stage-3 ">
  <div class="inm-progress-bar__title inm-subheading">Step three</div>
  <progress class="inm-progress-bar__bar" value="3" max="3">3</progress>
  <ol class="inm-progress-bar__indicator">
    <li class="inm-progress-bar__stage inm-progress-bar__stage--active">
      <img class="inm-progress-bar__active-icon" src="/assets/955008f628a290b8b90020253b131bcf.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/07d03c87a9b8d3ad15845e803a3aa8b1.svg" alt="" />
    </li>
    <li class="inm-progress-bar__stage inm-progress-bar__stage--active">
      <img class="inm-progress-bar__active-icon" src="/assets/173f39dcf4371f4bc71b1abae4910b62.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/2866782e04697e32c88ed6b2809d7236.svg" alt="" />
    </li>
    <li class="inm-progress-bar__stage inm-progress-bar__stage--active">
      <img class="inm-progress-bar__active-icon" src="/assets/fb71919423fe619bdb11c3ae9145d4cc.svg" alt="" />
      <img class="inm-progress-bar__inactive-icon" src="/assets/895d96f568d0c935ba6018e5dd2f8872.svg" alt="" />
    </li>
  </ol>
</div>
Style and spacing
Style
Spacing