Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Timeline
Overview
Use the Timeline component to show a linear record of past or future events.
{% from "components/timeline/_macro.njk" import onsTimeline %}
{{
onsTimeline({
"timelineItems": [
{
"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
Name
Type
Required
Description
classes
string
false
Classes to add to the component
headingLevel
int
false
Number used to determine the heading level of the titles. Use to ensure the titles have the correct semantic order on the page. Defaults to 2.
A list of items for the period of time in the timeline. This should only be set when content is not set
content
string
false
The content for the period of time in the timeline. This can contain HTML. This should only be set when itemsList is not set
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.