Skip to main content

Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies
Components
Timeline

How it works

How it works

The timeline displays information in reverse chronological order, with the newest item appearing at the top of the list.

In its simplest form each timeline entry includes:

  • date and time
  • title

Optionally entries can also include:

  • byline (the person or system that did the action)
  • description
  • link

Content elements

Date and time

This is the basic functional element of the timeline and lines up with the marker on the timeline itself.

Use GOV.UK style for dates and times: 4 June 2025 at 9:30am.

  • Dates: day, month and year with no ordinal indicators: 4 June, not 4th June
  • Times: 12-hour clock with am and pm, no leading numerals, a colon separating hours and minutes followed by am or pm without a space: 9:30am, not 0930 or 09.30 am

You should transform data into this format for presentation even if it comes from another system in a different format. Times in 24-hour format or with leading zeroes can be more difficult to read for users with dyslexia or dyscalculia.

Title

What has happened: this could be taken from a standard list of event types or could be manually entered by agents.

Byline

The person or system that did the action. This is useful if more than one person can work on a case, or if your timeline includes both agent actions and automated events.

Description

Brief details of the event, if necessary. This information gives additional summary information if it is useful. It can be generated by a system or entered as comments by a user.

Do not use the description to contain full details of an event or large amounts of text: this should be shown in a separate place and linked to if necessary.

An event can include a text link to more detailed information. This link does not reveal content in the timeline itself; instead it takes the user to the information in another page or interface. This maintains the position of other timeline items and avoids overcrowding the interface with additional detail.

It is important for the usability of the timeline that events are simple and consistent in their appearance. Do not use any interactive elements other than the single text link – no accordions, details components or buttons.

If you use the same anchor text for all links – as with ‘View details’ in our example – you must take steps to make the links distinct so they are accessible.

In our example we use hidden text to include the date and time of each event. Your solution will depend on your implementation of the component and the structure of your source data.

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: