Components

Timeline

Use timelines to help people understand a process and what will happen next.

Open this example (Timeline active) in a new tab 
<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>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Required Description
headingLevel number no Heading level for each item heading. Defaults to 3 (<h3>). Must be between 2 and 6.
items array yes Array of timeline item objects. Falsy entries are ignored.
items[].headingText string yes Text for the item heading.
items[].html string conditional If text is set, this is not required. Raw HTML description inserted directly. If set, text is ignored.
items[].text string conditional If html is set, this is not required. Plain text description wrapped in a paragraph element.
items[].active boolean no Renders a large blue dot and bold heading styling for the current (active) item.
items[].isPastItem boolean no Marks the item as past: large blue dot and adds modifier class nhsapp-timeline__item--past.
id string no The ID of the timeline.
classes string no Classes to add to the timeline.
attributes object no HTML attributes for the timeline (e.g. data-*, aria-*). 


{% 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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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.

Open this example (Timeline active) in a new tab 
<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>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Required Description
headingLevel number no Heading level for each item heading. Defaults to 3 (<h3>). Must be between 2 and 6.
items array yes Array of timeline item objects. Falsy entries are ignored.
items[].headingText string yes Text for the item heading.
items[].html string conditional If text is set, this is not required. Raw HTML description inserted directly. If set, text is ignored.
items[].text string conditional If html is set, this is not required. Plain text description wrapped in a paragraph element.
items[].active boolean no Renders a large blue dot and bold heading styling for the current (active) item.
items[].isPastItem boolean no Marks the item as past: large blue dot and adds modifier class nhsapp-timeline__item--past.
id string no The ID of the timeline.
classes string no Classes to add to the timeline.
attributes object no HTML attributes for the timeline (e.g. data-*, aria-*). 


{% 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.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

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

The NHS App design system team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Timeline' discussion on GitHub.