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.

Horizontal

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

Guidelines

  • 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.

Vertical

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

Breadcrumbs

  1. Setup Guide
  2. Integrate using our Web API or SMTP Relay
Required .breadcrumb

Guidelines

  • 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.

Pagination

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

Guidelines

  • 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

Good
64%
  • 45% passed
  • 12% failed
  • 6% not received
Overall Deliverability
Average
64%
  • 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