Short blocks of content shown in chronological order - a feature in the Ripple design system.


The timeline component is used to arrange short 'blocks' of information in a linear chronological format.

Each block of content can consist of a title, description, short summary and optional image.

Any number of blocks can be included, but the component performs best for around 3 to 8 total blocks per timeline.


A visual example of the timeline component.

How to build a timeline

The timeline component can be embedded on any content page. You must be in the Body text tab.

  1. Click the Component type dropdown, select Timeline and click the Add another component button. 
  2. The component will appear with one timeline item. You need to click the Add timeline button to add more items/sections.
  3. Enter a title for the timeline (eg Family Violence reform progress).
  4. Add the title for each time period (item or section). 
  5. In each item/section, you can add:
    • a specific date range (20 March 1990 to 30 September 1990) OR use the Text field for less specific dates (eg March 1990 or 2019)
    • a link if there's more detail on another webpage (internal or external link)
    • a feature Image if you have one (this will display as a small circle, so square images work best)
    • a summary if you want to provide additional detail

Reviewed 30 March 2021

Get support using SDP

Our community of practice for anyone with content on SDP meets once every 2 months. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact

Was this page helpful?