Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Timeline

Overview

Use the Timeline component to show a linear record of past or future events.

Example Timeline contents

Nunjucks

{% from "components/timeline/_macro.njk" import onsTimeline %}

{{
    onsTimeline({
    "items": [
            {
                "heading": 'September to October 2020',
                "itemsList": [
                    {
                        "text": "Meet your Community Engagement Manager and set up regular catch up meetings"
                    },
                    {
                        "text": "Local Authority Toolkit available online"
                    }
                ]
            },
            {
                "heading": 'September 2020',
                "content": '<p>ONS to provide Councillor Handbook for distribution</p>'
            },
            {
                "heading": 'November 2020',
                "content": '<p>ONS to provide you with content for magazines and publications</p>'
            },
            {
                "heading": 'January to March 2021',
                "content": '<p>ONS to provide a range of press releases for external use</p>'
            },
            {
                "heading": 'February to April 2021',
                "content": '<p>Promote your local Census Support Centres</p>'
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
classesstringfalseClasses to add to the component
titleTagstringfalseThe HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an h2.
itemsarray<TimelineItems>trueAn array of timeline items
TimelineItems
NameTypeRequiredDescription
headingstringtrueThe h2 heading for the period of time in the timeline
itemsListArray<ListItem> (ref)falseA list of items for the period of time in the timeline
contentstringfalseThe content for the period of time in the timeline. This can contain HTML.

HTML

<div class="ons-timeline">
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">September to October 2020</h2>
    <div class="ons-timeline__content">
      <ul class="ons-list ons-list--bare">
        <li class="ons-list__item"> Meet your Community Engagement Manager and set up regular catch up meetings </li>
        <li class="ons-list__item"> Local Authority Toolkit available online </li>
      </ul>
    </div>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">September 2020</h2>
    <div class="ons-timeline__content">
      <p>ONS to provide Councillor Handbook for distribution</p>
    </div>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">November 2020</h2>
    <div class="ons-timeline__content">
      <p>ONS to provide you with content for magazines and publications</p>
    </div>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">January to March 2021</h2>
    <div class="ons-timeline__content">
      <p>ONS to provide a range of press releases for external use</p>
    </div>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">February to April 2021</h2>
    <div class="ons-timeline__content">
      <p>Promote your local Census Support Centres</p>
    </div>
  </div>
</div>

When to use this component

Use this component to show a series of three or more important events.

When not to use this component

Do not use this component to show dates in survey introduction pages.

Do not use this component to show events that are not important to every user that visits the page.

How to use this component

Be aware of the heading structure of a page when using a timeline. Do not use this component under a heading at level <h3> or less.

When writing dates within a timeline, ensure you are following ONS house style guidance on dates.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss 'Timeline’ component on GitHub (opens in a new tab)