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.

View cookies

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

Experimental : This component needs more research.

Use the Timeline component to show a linear record of what’s happening.

Important information:
This component requires documentation.
Open this example in a new tab (Example: Example Timeline)

Example: 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
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>
    <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 class="ons-timeline__item">
    <h2 class="ons-timeline__heading">September 2020</h2>
    <p>ONS to provide Councillor Handbook for distribution</p>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">November 2020</h2>
    <p>ONS to provide you with content for magazines and publications</p>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">January to March 2021</h2>
    <p>ONS to provide a range of press releases for external use</p>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">February to April 2021</h2>
    <p>Promote your local Census Support Centres</p>
  </div>
</div>

Help improve this page

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