candidate
Timeline
Use the timeline component to show an ordered record of what has happened.
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<ol class="dl-timeline dl-timeline--with-starter-label">
<li class="dl-timeline__entry">
<h3 class="govuk-heading-s dl-timeline__entry-heading">Comment: Emily Hill</h3>
<p class="dl-timeline__entry-details govuk-body-s">
16 August 2018
</p>
<div class="dl-timeline__entry__content"><p class="govuk-body">Need to fix issue with brownfield collection - we're losing out on data</p>
</div>
</li>
<li class="dl-timeline__entry">
<h3 class="govuk-heading-s dl-timeline__entry-heading">Reopened</h3>
<p class="dl-timeline__entry-details govuk-body-s">
by Matt Lucht, 29 May 2020
</p>
<div class="dl-timeline__entry__content">
<p class="govuk-body">Further evidence came to light.</p></div>
</li>
<li class="dl-timeline__entry">
<h3 class="govuk-heading-s dl-timeline__entry-heading">Resolved</h3>
<p class="dl-timeline__entry-details govuk-body-s">
by Matt Lucht, 29 May 2020
</p>
<div class="dl-timeline__entry__content"></div>
</li>
<li class="dl-timeline__start-label">
<h4 class="govuk-heading-s">Start label</h4>
</li>
</ol>
</div>
</div>{%- from "design-system/components/timeline/macro.html" import dlTimeline %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ dlTimeline({
"entries": [
{
"heading": "Comment: Emily Hill",
"meta": "16 August 2018",
"text": "Need to fix issue with brownfield collection - we're losing out on data"
},{
"heading": "Reopened",
"meta": "by Matt Lucht, 29 May 2020",
"html": '<p class="govuk-body">Further evidence came to light.</p>'
},{
"heading": "Resolved",
"meta": "by Matt Lucht, 29 May 2020"
}
],
"startLabel": "Start label"
}) }}
</div>
</div>
Filtering a timeline
The timeline component can be progressively enhanced to allow filtering by date.
We add this enhancement when the timeline has many entries and a user might need to find a specific one. An example of that can be seen on a collection log page.
Collector log example
The timeline component is good to use when you are showing a sequence of log entries.
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset dl-timeline__filter" role="group" data-module="filter-timeline" data-timeline-selector="dl-timeline--dates">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
<h1 class="govuk-fieldset__heading">
Filter by date
</h1>
</legend>
<div class="govuk-date-input" id="timeline-filter">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="timeline-filter-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="timeline-filter-day" name="timeline-filter-day" type="text" pattern="[0-9]*" inputmode="numeric" data-filter-timeline-type="day">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="timeline-filter-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="timeline-filter-month" name="timeline-filter-month" type="text" pattern="[0-9]*" inputmode="numeric" data-filter-timeline-type="month">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="timeline-filter-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="timeline-filter-year" name="timeline-filter-year" type="text" pattern="[0-9]*" inputmode="numeric" data-filter-timeline-type="year">
</div>
</div>
</div>
<div class="govuk-inset-text filter-timeline__status-area js-hidden" aria-live="polite">
<span class="govuk-body">Filter applied: <span class="filter-timeline__count">0 items</span> matched.</span>
<a href="#log-timeline" class="govuk-visually-hidden">View updated timeline</a>
<a href="#" class="govuk-link filter-timeline__reset">Reset<span class="govuk-visually-hidden"> timeline filter</span></a>
</div>
</fieldset>
</div>
<ol id="log-timeline" class="dl-timeline dl-timeline--dates">
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="05" data-timeline-day="22">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-05-22</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>No new resources collected.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="05" data-timeline-day="21">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-05-21</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 new resources collected.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="05" data-timeline-day="20">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-05-20</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><strong class="govuk-tag govuk-tag--red">
Error
</strong>
<a class="govuk-link" href="#">Brownfield collector</a>.
</span>
<span>No run information available.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="05" data-timeline-day="19">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-05-19</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span class="dlf-warning__icon--inline" aria-hidden="true">!</span>
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 issues with the endpoints.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="04" data-timeline-day="22">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-04-22</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>No new resources collected.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="04" data-timeline-day="21">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-04-21</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 new resources collected.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="04" data-timeline-day="20">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-04-20</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><strong class="govuk-tag govuk-tag--red">
Error
</strong>
<a class="govuk-link" href="#">Brownfield collector</a>.
</span>
<span>No run information available.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="04" data-timeline-day="19">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-04-19</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span class="dlf-warning__icon--inline" aria-hidden="true">!</span>
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 issues with the endpoints.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="03" data-timeline-day="06">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-03-06</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>No new resources collected.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="03" data-timeline-day="05">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-03-05</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 new resources collected.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="03" data-timeline-day="04">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-03-04</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span><strong class="govuk-tag govuk-tag--red">
Error
</strong>
<a class="govuk-link" href="#">Brownfield collector</a>.
</span>
<span>No run information available.</span>
</div>
</div>
</li>
<li class="dl-timeline__entry" data-timeline-year="2020" data-timeline-month="03" data-timeline-day="03">
<h3 class="govuk-heading-m dl-timeline__entry-heading">2020-03-03</h3>
<div class="dl-timeline__entry__content">
<div class="technical-summary-card technical-summary-card--compressed">
<span class="dlf-warning__icon--inline" aria-hidden="true">!</span>
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 issues with the endpoints.</span>
</div>
</div>
</li>
</ol>
</div>
</div>{%- from "design-system/components/timeline/macro.html" import dlTimeline %}
{%- from "design-system/components/timeline/macro.html" import dlTimelineEntry %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset dl-timeline__filter" role="group" data-module="filter-timeline" data-timeline-selector="dl-timeline--dates">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
<h1 class="govuk-fieldset__heading">
Filter by date
</h1>
</legend>
<div class="govuk-date-input" id="timeline-filter">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="timeline-filter-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="timeline-filter-day" name="timeline-filter-day" type="text" pattern="[0-9]*" inputmode="numeric" data-filter-timeline-type="day">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="timeline-filter-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="timeline-filter-month" name="timeline-filter-month" type="text" pattern="[0-9]*" inputmode="numeric" data-filter-timeline-type="month">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="timeline-filter-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="timeline-filter-year" name="timeline-filter-year" type="text" pattern="[0-9]*" inputmode="numeric" data-filter-timeline-type="year">
</div>
</div>
</div>
<div class="govuk-inset-text filter-timeline__status-area js-hidden" aria-live="polite">
<span class="govuk-body">Filter applied: <span class="filter-timeline__count">0 items</span> matched.</span>
<a href="#log-timeline" class="govuk-visually-hidden">View updated timeline</a>
<a href="#" class="govuk-link filter-timeline__reset">Reset<span class="govuk-visually-hidden"> timeline filter</span></a>
</div>
</fieldset>
</div>
{% call dlTimeline({
"classes": "dl-timeline--dates",
"id": "log-timeline"
}) %}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>No new resources collected.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-05-22",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"05",
"data-timeline-day":"22"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 new resources collected.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-05-21",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"05",
"data-timeline-day":"21"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><strong class="govuk-tag govuk-tag--red">
Error
</strong>
<a class="govuk-link" href="#">Brownfield collector</a>.
</span>
<span>No run information available.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-05-20",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"05",
"data-timeline-day":"20"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span class="dlf-warning__icon--inline" aria-hidden="true">!</span>
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 issues with the endpoints.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-05-19",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"05",
"data-timeline-day":"19"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>No new resources collected.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-04-22",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"04",
"data-timeline-day":"22"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 new resources collected.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-04-21",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"04",
"data-timeline-day":"21"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><strong class="govuk-tag govuk-tag--red">
Error
</strong>
<a class="govuk-link" href="#">Brownfield collector</a>.
</span>
<span>No run information available.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-04-20",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"04",
"data-timeline-day":"20"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span class="dlf-warning__icon--inline" aria-hidden="true">!</span>
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 issues with the endpoints.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-04-19",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"04",
"data-timeline-day":"19"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>No new resources collected.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-03-06",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"03",
"data-timeline-day":"06"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 new resources collected.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-03-05",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"03",
"data-timeline-day":"05"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span><strong class="govuk-tag govuk-tag--red">
Error
</strong>
<a class="govuk-link" href="#">Brownfield collector</a>.
</span>
<span>No run information available.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-03-04",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"03",
"data-timeline-day":"04"
}
}) }}
{%- set entryHTML %}
<div class="technical-summary-card technical-summary-card--compressed">
<span class="dlf-warning__icon--inline" aria-hidden="true">!</span>
<span><a class="govuk-link" href="#">Brownfield collector</a>.</span>
<span>3 issues with the endpoints.</span>
</div>
{% endset -%}
{{ dlTimelineEntry({
"heading": "2020-03-03",
"heading_class": "govuk-heading-m",
"html": entryHTML,
"attributes": {
"data-timeline-year":"2020",
"data-timeline-month":"03",
"data-timeline-day":"03"
}
}) }}
{% endcall %}
</div>
</div>
When the timeline has many entries you can use the call approach to generate the entries individually or via a loop.
Research on this compponent
We need to do more research on this component. If you have used the timeline component, get in touch to share your research findings.
We will keep an eye on other services that use the timeline and hopefully get a better inderstanding of how timelines are being used across government. For example, it is used by MoJ.