Timeline

Usage

A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.

A timeline can include a combination of:

• heading
• subheading
• summary
• image.

Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.

Some examples include:

• dates
• steps
• stages
• events
• actions
• outcomes.

The timeline component is ordered from top to bottom.

Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.

When and how to use

• Always include a title for the entire timeline.
• Add a heading, subheading, short summary and optional image for each block.
• Only include 3 to 8 blocks per timeline.
• Add a link if you're providing more details on another page.

When and how not to use

• Don't add fewer than 3 or more than 8 blocks.
• Don't use without a heading for each block.
• Never include unrelated content.
• Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.

Variants

Timeline has 2 variants:

• default
• progressive.

Default

This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.

Progressive

Use the progressive variant to show the progress or status of the content to the user.

Theming

Timeline uses colour to:

• show progress
• highlight interactive states.

To create your own theme see theming guidance for designers or theming guidance for developers.