Components
Timeline
Last updated: 11 October 2022
<div class="moj-timeline">
<div class="moj-timeline__item">
<div class="moj-timeline__header">
<h2 class="moj-timeline__title">Application requires confirmation</h2>
<p class="moj-timeline__byline">by Joe Bloggs</p>
</div>
<p class="moj-timeline__date">
<time datetime="2019-06-14T14:01:00.000Z">14 June 2019 at 2:01pm</time>
</p>
<div class="moj-timeline__description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis risus. Curabitur nec ante vitae felis ullamcorper tincidunt.</p>
<a class="govuk-button govuk-!-margin-bottom-0" href="#">Continue</a>
</div>
</div>
<div class="moj-timeline__item">
<div class="moj-timeline__header">
<h2 class="moj-timeline__title">Application review in progress</h2>
<p class="moj-timeline__byline">by Caseworker 1</p>
</div>
<p class="moj-timeline__date">
<time datetime="2019-06-07T12:32:00.000Z">7 June 2019 at 12:32pm</time>
</p>
<div class="moj-timeline__description">Your application is being reviewed by one of our case workers.</div>
</div>
<div class="moj-timeline__item">
<div class="moj-timeline__header">
<h2 class="moj-timeline__title">Application received</h2>
<p class="moj-timeline__byline">by Caseworker 1</p>
</div>
<p class="moj-timeline__date">
<time datetime="2019-06-06T09:12:00.000Z">6 June 2019 at 9:12am</time>
</p>
<div class="moj-timeline__description">Your application has been received – reference MOJ-1234-5678</div>
</div>
<div class="moj-timeline__item">
<div class="moj-timeline__header">
<h2 class="moj-timeline__title">Application submitted</h2>
<p class="moj-timeline__byline">by Joe Bloggs</p>
</div>
<p class="moj-timeline__date">
<time datetime="2019-05-28T10:45:00.000Z">28 May 2019 at 10:45am</time>
</p>
<div class="moj-timeline__description">
<details class="govuk-details govuk-!-margin-bottom-0">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Application details
</span>
</summary>
<div class="govuk-details__text">
Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. <a class="govuk-link" href="#">Etiam nec interdum velit.</a> Suspendisse molestie lectus in eros ornare
</div>
</details>
</div>
</div>
<div class="moj-timeline__item">
<div class="moj-timeline__header">
<h2 class="moj-timeline__title">Documents uploaded</h2>
<p class="moj-timeline__byline">by Joe Bloggs</p>
</div>
<p class="moj-timeline__date">
<time datetime="2019-05-28T10:15:00.000Z">28 May 2019 at 10:15am</time>
</p>
<div class="moj-timeline__description">
<ul class="moj-timeline__documents">
<li class="moj-timeline__document-item">
<a class="govuk-link" href="#">
<svg class="moj-timeline__document-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
<path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z" />
</svg>
Document 1
</a>
</li>
<li class="moj-timeline__document-item">
<a class="govuk-link" href="#">
<svg class="moj-timeline__document-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
<path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z" />
</svg>
Document 2
</a>
</li>
</ul>
</div>
</div>
<div class="moj-timeline__item">
<div class="moj-timeline__header">
<h2 class="moj-timeline__title">Application started</h2>
<p class="moj-timeline__byline">by Joe Bloggs</p>
</div>
<p class="moj-timeline__date">
<time datetime="2019-05-21T13:15:00.000Z">21 May 2019 at 1:15pm</time>
</p>
<div class="moj-timeline__description">
<ul class="govuk-list govuk-list--bullet">
<li><a class="govuk-link" href="#">Item 1</a></li>
<li><a class="govuk-link" href="#">Item 2</a></li>
</ul>
</div>
</div>
</div>
Nunjucks macro options
Container
Name |
Type |
Required |
Description |
classes |
string |
No |
Classes to add to the timeline's container. |
attributes |
object |
No |
HTML attributes (for example data attributes) to add to the timeline's container. |
Items
Name |
Type |
Required |
Description |
label |
object |
Yes |
See item label. |
text |
string |
Yes |
If html is set, this is not required. Text to use within the item. If html is provided, the text argument will be ignored. |
html |
string |
Yes |
If text is set, this is not required. HTML to use within the item. If html is provided, the text argument will be ignored. |
datetime |
object |
No |
See item date and time. |
byline |
object |
No |
See item byline. |
classes |
string |
No |
Classes to add to the timeline's items container. |
attributes |
object |
No |
HTML attributes (for example data attributes) to add to the timeline's items container. |
Item label
Name |
Type |
Required |
Description |
text |
string |
Yes |
If html is set, this is not required. Text to use within the item label. If html is provided, the text argument will be ignored. |
html |
string |
Yes |
If text is set, this is not required. HTML to use within the item label. If html is provided, the text argument will be ignored. |
Item datetime
Name |
Type |
Required |
Description |
timestamp |
string |
Yes |
A valid datetime string to be formatted. For example: 1970-01-01T11:59:59.000Z |
type |
string |
Yes |
If format is set, this is not required. The standard date format to use within the item. If type is provided, the format argument will be ignored. Values include: datetime , shortdatetime , date , shortdate and time |
format |
string |
Yes |
If type is set, this is not required. The user-defined date format to use within the item. If type is provided, the format argument will be ignored. See the Moment.js document on display formats. |
Item byline
Name |
Type |
Required |
Description |
text |
string |
Yes |
If html is set, this is not required. Text to use within the item byline. If html is provided, the text argument will be ignored. |
html |
string |
Yes |
If text is set, this is not required. HTML to use within the item byline. If html is provided, the text argument will be ignored. |
Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html
can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.
{%- from "moj/components/timeline/macro.njk" import mojTimeline -%}
{%- set confirmationHtml %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis risus. Curabitur nec ante vitae felis ullamcorper tincidunt.</p>
<a class="govuk-button govuk-!-margin-bottom-0" href="#">Continue</a>
{% endset -%}
{%- set detailsHtml %}
<details class="govuk-details govuk-!-margin-bottom-0">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Application details
</span>
</summary>
<div class="govuk-details__text">
Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. <a class="govuk-link" href="#">Etiam nec interdum velit.</a> Suspendisse molestie lectus in eros ornare
</div>
</details>
{% endset -%}
{%- set listHtml %}
<ul class="govuk-list govuk-list--bullet">
<li><a class="govuk-link" href="#">Item 1</a></li>
<li><a class="govuk-link" href="#">Item 2</a></li>
</ul>
{% endset -%}
{%- set documentsHtml %}
<ul class="moj-timeline__documents">
<li class="moj-timeline__document-item">
<a class="govuk-link" href="#">
<svg class="moj-timeline__document-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
<path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/>
</svg>
Document 1
</a>
</li>
<li class="moj-timeline__document-item">
<a class="govuk-link" href="#">
<svg class="moj-timeline__document-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
<path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/>
</svg>
Document 2
</a>
</li>
</ul>
{% endset -%}
{{ mojTimeline({
items: [
{
label: {
text: "Application requires confirmation"
},
html: confirmationHtml,
datetime: {
timestamp: "2019-06-14T14:01:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
},
{
label: {
text: "Application review in progress"
},
text: "Your application is being reviewed by one of our case workers.",
datetime: {
timestamp: "2019-06-07T12:32:00.000Z",
type: "datetime"
},
byline: {
text: "Caseworker 1"
}
},
{
label: {
text: "Application received"
},
text: "Your application has been received – reference MOJ-1234-5678",
datetime: {
timestamp: "2019-06-06T09:12:00.000Z",
type: "datetime"
},
byline: {
text: "Caseworker 1"
}
},
{
label: {
text: "Application submitted"
},
html: detailsHtml,
datetime: {
timestamp: "2019-05-28T10:45:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
},
{
label: {
text: "Documents uploaded"
},
html: documentsHtml,
datetime: {
timestamp: "2019-05-28T10:15:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
},
{
label: {
text: "Application started"
},
html: listHtml,
datetime: {
timestamp: "2019-05-21T13:15:00.000Z",
type: "datetime"
},
byline: {
text: "Joe Bloggs"
}
}
]
}) }}
When to use
Use the timeline component to show a linear record of what’s happened.