Timeline

History

September 2024: major update

This is a breaking change. If your service includes an earlier version of the Timeline component you will need to update your code.

In 2024 we redesigned the Timeline component to better meet the needs of DWP teams who were choosing alternative solutions. Details of the redesign process and the choices we made are in the Design notes.

The new version of the component is included in DWP Frontend version 3 and later.

The main changes were as follows.

Allow links and descriptions

Events can now include a short description, and a link to another page with more detailed information. This was one of the most requested features by design teams.

More legible font colours

All the content in the updated timeline is styled in $govuk-text-colour for greater legibility.

Order of elements

The order is now:

• Date
• Title
• Byline
• Description

The previous order was:

• Title
• Byline
• Date

By putting the date first and aligning the marker to the date, we make it clear that this is how the timeline is organised, while still prioritising the title by giving it more emphasis.

End marker

The timeline itself now includes a marker to show the end of the timeline (below the earliest event).

March 2022

Fixed Visual indicators separated in Timeline example.

September 2021

Published.

Get support

Need help implementing this in a prototype or production build? Get support from the Design System team.

Give feedback

We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.

---

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: 1 September 2024