Timeline

When to use a timeline page

The timeline page can be used to display content in chronological order, such as steps in an application process. The timeline page is made up of timeline leaves, with each leaf component able to present an image or video, heading, description and CTA button. 

Key features and behaviour

• Depending on the context, you can choose to display numbers in each timeline node or a single downwards arrow in the first node.

If your content is short and simple, or you want to minimise scroll depth, you may want to consider a task sequence page template.

How to use a timeline page

You can include up to 12 timeline leaves in a timeline.

Each timeline leaf can include:

• Pre-heading (optional) used for dates or preliminary information
• H2 heading
• Post-heading (optional) used for secondary information
• Video or image (optional)
• Copy section
• CTA button (optional)

Recommended word count

Pre-heading	max 25 characters
H2 heading	8-45 characters
Post-heading	max 25 characters
Copy section	max 200 words

Notes on component usage

• You can flip the position of a timeline leaf from left to right in the component properties in Experience Editor.
• Timeline leaves should alternate from left to right as the timeline progresses.