Skip to main content
Timeline

The timeline displays a vertical list of events or steps.
It provides the user with a sense of awareness around the progress and the remaining steps.

Usage ExamplesThe timeline displays a vertical list of events or steps. It provides the user with a sense of awareness around the progress and the remaining steps.
Log TimelineA log of past and future activities or events. The list starts with an empty state, and it keeps on updating and changing.
Steps TimelineA list of suggested steps to take to achieve a certain goal. Users usually need to take action with these steps.The steps are usually decided in advance, meaning that the initial state is not empty.
Structure

The Timeline consists of points and lines, each with different styles and states. These elements can be combined in various ways to suit different product goals.
Points create visual breakpoints that make your timeline easier to read, they act as bullet points, representing each step or activity. The icons and colors can be customized.
Lines can either match the state and color of the points or be styled differently or in neutral tokens to emphasize the points.

Points aligned to center (default)The timeline points are aligned with the center of the element on the right.
Points aligned to anchor refThe Timeline can be configured to align its points to one of the elements on the right. In the example, the points are aligned with the titles in the cards.
States
PropertyPreview
Current
state: current
Next
state: next
Error
state: error
Success
state: success
Point
Point Types
PropertyPreview
Bullet
type: bullet
Circle
type: circle
Outline
type: outline
Point Accessories
PropertyPreview
Text
text: “1”
Icon
icon: Assets.internal.icons.general.checkmarkSmall
Icon without background
icon: Assets.internal.icons.general.favorite, removeIconBackground: true
Line
Line Types
PropertyPreview
Solid
type: solid
Dashed
type: dashed
Line Accessories
PropertyPreview
Entry
entry: true
Orientation

The Timeline can be displayed in either ascending or descending order, depending on the context:

  • Ascending: Numbers increase as you move forward.
  • Descending: Numbers decrease as you move forward.
Spec

Key rules:

  • Maintain a minimum distance of S2 between the Timeline and the elements on the right.
  • Points can be aligned either to the top or the center of the elements on the right.
  • When points are center-aligned with the elements, set the line length to auto, with a minimum of 20px.