Skip to main contentSkip to site searchSkip to component search
Honeycomb

Progress Tracker

The progress tracker can be used to visualize steps and also to estimate how long a certain task may take. Each step can be made clickable.

Presentation steps

  1. Get Honeycomb Completed
  2. Use it
  3. Enjoy
  4. Spread the word 
<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item flix-progress-tracker__item--active">
    <span class="flix-progress-tracker__text">Get Honeycomb</span>
    <span class="flix-sr-only">Completed</span>
  </li>
  <li class="flix-progress-tracker__item" aria-current="step">
    <span class="flix-progress-tracker__text">Use it</span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Enjoy</span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Spread the word</span>
  </li>
</ol>

Some things to note:

  • The step numbers are automatically generated by the correct implementation of ol > li items.
  • Each progress item needs to have a text element .flix-progress-tracker__text which is hidden on smaller screens for space saving.
  • Completed steps should have a flix-sr-only text indication for screen reader users to understand which of the steps is already completed.
  • In order to trigger progress item active state the flix-progress-tracker__item--active modifier should be used.
  • Current step should have aria-current="step" to inform AT users which is the current setp.

Progress tracker also works with links, for that make sure adding flix-progress-tracker--linked modifier to flix-progress-tracker element and add a wrapping a.flix-progress-tracker__link element around the step names.

Like so:

  1. Search Completed
  2. Passenger Completed
  3. Payment 
<ol class="flix-progress-tracker flix-progress-tracker--linked">
  <li class="flix-progress-tracker__item flix-progress-tracker__item--active">
    <a class="flix-progress-tracker__link" href="#">
      <span class="flix-progress-tracker__text">Search</span>
      <span class="flix-sr-only">Completed</span>
    </a>
  </li>
  <li class="flix-progress-tracker__item flix-progress-tracker__item--active">
    <a class="flix-progress-tracker__link" href="#">
      <span class="flix-progress-tracker__text">Passenger</span>
      <span class="flix-sr-only">Completed</span>
    </a>
  </li>
  <li class="flix-progress-tracker__item" aria-current="step">
    <a class="flix-progress-tracker__link" href="#">
      <span class="flix-progress-tracker__text">Payment</span>
    </a>
  </li>
</ol>
Made with 🍯 by FlixMobility 2022