Timeline
ExperimentalUse the Timeline component to show a linear record of what’s happening.
Important information:
This component requires documentation.
Example
<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>
{% 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>'
}
]
})
}}
{% macro onsTimeline(params) %}
{% from "components/lists/_macro.njk" import onsList %}
<div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
{% for item in params.items %}
<div class="ons-timeline__item">
<h2 class="ons-timeline__heading">{{ item.heading }}</h2>
{% if item.itemsList is defined and item.itemsList %}
{{
onsList({
"variants": 'bare',
"itemsList": item.itemsList
})
}}
{% else %}
{{ item.content | safe }}
{% endif %}
</div>
{% endfor %}
</div>
{% endmacro %}
.ons-timeline {
padding-left: 1.5rem;
position: relative;
&::before {
border-left: 4px solid $color-black;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 10px;
}
}
.ons-timeline__item {
margin-bottom: 1.5rem;
position: relative;
&::before {
background-color: $color-black;
content: '';
height: 4px;
left: -1.5rem;
position: absolute;
top: 10px;
width: 12px;
}
:last-child {
margin-bottom: 0;
}
}
.ons-timeline__heading {
font-size: 1rem !important;
margin-bottom: 0.5rem;
}
Help improve this component
Let us know how we could improve this component or share your user research findings. Discuss the ‘Discuss 'Timeline’ component on GitHub