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

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.

Numbered Steps

  1. Use these settings

    Configure your application with the settings below. Use your account credentials in the areas highlighted.

  2. Send your first email

    Test your integration by sending email through your application.

  3. See email activity

    After you have successfully sent your first message, view a log of events.

Required .numbered-steps