Skip to main content Skip to navigation Skip to search
Clarity Design System

Timeline

A timeline displays a series of events which can guide the user through processes or pre-defined steps while also showing current progress.

Usage

Timeline sets an expectation for the whole process by breaking it up into concrete steps and a pre-determined goal. It shows the user their progress along the steps of the timeline with a current step. For all of the steps, a timeline can provide additional information such as a header (timestamp), an icon showing state, a title and a description that optionally includes related contextual actions.

Use a timeline:

  • When the workflow requires the full content area to show information
  • For content with distinct higher-level stages
  • When the user needs clear progress indication
  • For workflows with complex steps
  • For workflows between 3 to 5 steps for horizontal timeline; 5+ steps for vertical

Types

There are two types of layouts, horizontal and vertical.

Horizontal

  • Used when there are workflows of 3 - 5 steps
  • Used when all steps can be displayed without wrapping
  • 11:59 am
    Add KMS Root CA certificate requested.
  • 11:59 am
    Add KMS Root CA certificate requested. Upload it to the KMS to complete the connection.
  • 11:59 am
    Make vCenter trust KMS Root CA certificate requested. Upload it to the KMS to complete the connection. Third sentence is very long and very long.
  • 11:59 am
    Make KMS trust vCenter Upload it to the KMS to complete the connection. Third sentence.
  • 11:59 am
    Connected No. It's not connected.

Vertical

  • Used when there are workflows greater than five steps
  • Used when timestamps are optional
  • 11:59 am
    Add KMS Root CA certificate requested.
  • 11:59 am
    Add KMS Root CA certificate requested. Upload it to the KMS to complete the connection.
  • 11:59 am
    Make vCenter trust KMS Root CA certificate requested. Upload it to the KMS to complete the connection. Third sentence is very long and very long.
  • 11:59 am
    Make KMS trust vCenter Upload it to the KMS to complete the connection. Third sentence.
  • 11:59 am
    Connected No. It's not connected.

Anatomy

Step description

It is optional to have a step description that offers additional information and guidance to the user. This information can be displayed all of the time or only for the current step.

Single Step Description

Single Step Description

All step descriptions

All step descriptions

States

Every timeline step has one of five steps. With one exception these steps are represented with a Clarity Icon. The exception is for loading state which uses the clr-spinner component.

  • Success Step complete uses the success-standard shape
  • Success Current step uses the dot-circle shape
  • Success Not started, available to start uses the circle shape
  • Processing user initiated action uses the clr-spinner (w/ clrMedium size) component
  • Success Error completing step uses the error shape

Behavior

Showing the current step

As users move through the timeline steps should be progressively marked with the current and success icons to indicate progress.

By default, step one is highlighted as the current step.
Showing current step
When step one is complete the step two gets highlighted.
Showing current step
When the user has completed all steps, they are all marked complete.
Showing current step
When steps one and two are complete, step three gets highlighted.
Showing current step

Error State

Error state
  • Display the error message under the error icon if needed
  • Tooltips are not recommended because of low affordance

Loading State

Error state
  • When loading or taking action, display a spinner
  • Disable buttons when loading or make buttons contextual for the loading state (e.g CANCEL)

Angular Component

Besides a static HTML/CSS Timeline component, we also offer a fully interactive Angular version of the component. So if you are using Angular, you can use the ClrTimeline component. By using ClrTimeline, you'll be able to leverage its interactive behavior and features out-of-the-box. If you would like to learn more about how to customize its default interactive behavior, please refer to the API tab.