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.

  • Because the order of the items is important in the progress tracker component, use the ol (ordered list) element for the markup.
  • 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 add the aria-current="step" attribute to the current item, this will mark the current step and subsequent steps with the non highlighted color.

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">
    <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>

Progress tracker also works with links, for that make sure to add the 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">
    <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">
    <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">
    <a class="flix-progress-tracker__link" href="#" aria-current="step">
      <span class="flix-progress-tracker__text">Payment</span>
    </a>
  </li>
</ol>
Made with 🍯 by FlixMobility 2023