Timeline
Use timelines to help people understand a process and what will happen next.
<ol class="nhsapp-timeline">
<li class="nhsapp-timeline__item">
<svg
class="nhsapp-timeline__badge"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 28 28"
>
<circle cx="14" cy="14" r="13" fill="#005EB8" />
</svg>
<div class="nhsapp-timeline__content">
<h3 class="nhsapp-timeline__header nhsuk-u-font-weight-bold">
Await approval
</h3>
<p class="nhsapp-timeline__description">
The request will either be approved or rejected. If rejected please
contact your Healthcare Professional.
</p>
</div>
</li>
<li class="nhsapp-timeline__item">
<svg
class="nhsapp-timeline__badge nhsapp-timeline__badge--small"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
>
<circle
cx="7"
cy="7"
r="6"
fill="white"
stroke="#AEB7BD"
stroke-width="2"
/>
</svg>
<div class="nhsapp-timeline__content">
<h3 class="nhsapp-timeline__header">GP Approval Process</h3>
<p class="nhsapp-timeline__description">
Once approved, it can take 3 to 5 working days for a nominated pharmacy
to prepare your prescription.
</p>
</div>
</li>
</ol>
{% from "nhsapp/components/timeline/macro.njk" import nhsappTimeline %}
{{ nhsappTimeline({
items: [
{
headingText: "Await approval",
text: "The request will either be approved or rejected. If rejected please contact your Healthcare Professional.",
active: true
},
{
headingText: "GP Approval Process",
text: "Once approved, it can take 3 to 5 working days for a nominated pharmacy to prepare your prescription."
}
]
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
When to use
Use timelines to show users:
- what has happened so far
- the point they are currently at
- what will be coming next
When not to use
Do not use timelines to give lots of detailed information about every stage of a process. Instead, think about how you can give this information to users in context, at the relevant points in their journey. Timelines are meant to help users understand the broad steps of a process, rather than the finer details.
How to use
In a timeline you can use nodes (dots), lines and text to explain processes and timings.
<ol class="nhsapp-timeline">
<li class="nhsapp-timeline__item nhsapp-timeline__item--past">
<svg
class="nhsapp-timeline__badge"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 28 28"
>
<circle cx="14" cy="14" r="13" fill="#005EB8" />
</svg>
<div class="nhsapp-timeline__content">
<h3 class="nhsapp-timeline__header">Date referred</h3>
<p class="nhsapp-timeline__description">8 June 2024</p>
</div>
</li>
<li class="nhsapp-timeline__item">
<svg
class="nhsapp-timeline__badge"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 28 28"
>
<circle cx="14" cy="14" r="13" fill="#005EB8" />
</svg>
<div class="nhsapp-timeline__content">
<h3 class="nhsapp-timeline__header nhsuk-u-font-weight-bold">
Current status
</h3>
<p class="nhsapp-timeline__description">Waiting for treatment</p>
</div>
</li>
<li class="nhsapp-timeline__item">
<svg
class="nhsapp-timeline__badge nhsapp-timeline__badge--small"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
>
<circle
cx="7"
cy="7"
r="6"
fill="white"
stroke="#AEB7BD"
stroke-width="2"
/>
</svg>
<div class="nhsapp-timeline__content">
<h3 class="nhsapp-timeline__header">Estimated treatment start date</h3>
<p class="nhsapp-timeline__description">September 2024</p>
</div>
</li>
</ol>
{% from "nhsapp/components/timeline/macro.njk" import nhsappTimeline %}
{{ nhsappTimeline({
items: [
{
headingText: "Date referred",
isPastItem: true,
text: "8 June 2024"
},
{
headingText: "Current status",
active: true,
text: "Waiting for treatment"
},
{
headingText: "Estimated treatment start date",
text: "September 2024"
}
]
}) }}To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
Nodes
Nodes can be:
- white with a grey outline (a smaller dot)
- blue (a larger dot)
Use blue nodes to show that a step is already completed.
Text
Each node should have an accompanying heading that describes which step the process it represents.
Below each heading, use body text to give further details about that step. This could include a date or a short description.
Accessibility
We want to do further research to understand how screen reader users find timelines, and how much timelines help them to get their bearings.
Research
Our user research has found that in general, users:
- find timelines helpful for getting their bearings during a process
- are familiar with timelines from other apps and websites they use
- find it helpful that timelines give a visual representation of the process
Some research suggests that users expect timelines to be dynamic, updating as they make progress. Bear in mind that static timelines may not always meet user expectations.
We would like to better understand whether users associate the length of a line between two nodes with the amount of time that stage will take. You may want to standardise the length of lines between nodes, or test what users understand about timings if you do include differing lengths.
Help improve this component
If you have used or researched this component, please let us know what you found so we can make it better for everyone.
Discuss 'Timeline' on GitHub where you can share anything you think might be useful.
You can also share feedback with us on Slack.