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.
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
Name | Type | Required | Description |
---|---|---|---|
classes | string | false | Classes to add to the component |
items | array<TimelineItems> | true | An array of timeline items |
TimelineItems
Name | Type | Required | Description |
---|---|---|---|
heading | string | true | The h2 heading for the period of time in the timeline |
itemsList | Array<ListItem> (ref) | false | A list of items for the period of time in the timeline |
content | string | false | The 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)