Progress & Activity

Progress and activity components are visual indicators that help inform the user of their movement through our product. These can take the form of stepped indicators, loading icons, meters, and pagination.


Container(s) .progress-container
Required .progress-stages
States .is-done .is-selected


  • Text should be title case and ≤ 30 characters.
  • Only use where there are ≥ 3 and ≤ 9 steps.
  • Keep labels semantically parallel.
  • Completed steps should allow users to return to them when clicking that step label
Don't use when there are too few or too many steps.
Don't use incongruous labels.


Container(s) .progress-container
Required .is-vertical .progress-stages
States .is-done .is-selected


Required .breadcrumb


  • Segments should be title case and ≤ 15 characters.
  • When the last segment represents the current page, do not link it.
  • You may omit the last segment if it's redundant with the page title.
  • Avoid using "Back", except in situations where the previous page may not be known.
Don't use "Back" unless the previous page's title cannot be determined.


Container(s) .pagination .pagination-links
Required .pagination-link
States .is-active
HTML Elements a.pagination-prev a.pagination-next


  • Pagination should only be placed at the bottom of tables.
  • Omit pagination when there is only one page of results.
  • Pagination should follow the following rules.
Don't show pagination if there is only one page of results.
Don't show all pages when the number of pages is greater than 6.

Pie Chart

  • 45% passed
  • 12% failed
  • 6% not received
Overall Deliverability
  • 45% passed
  • 12% failed
  • 6% not received
B2B Deliverability
Container(s) .card
Modifiers(s) .is-centered .pie-chart-card
Required .pie-chart .badge .pie-chart-svg SVG .pie-chart-legend data-tooltip
States .badge.mantis .badge.carrot