Timeline

experimental

This is currently experimental because more research is needed.

This pattern helps users understand what has happened and when. For example, the history of a tax repayment claim.

When to use

Use this pattern to show a list of entries in the order they happened.

When not to use

Do not use this pattern to let users know where they are in a journey.

How it works

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

Each item in the timeline should have:

  • a title
  • the date and/or time

You could also include a brief description, but this is optional.

              <ol class="hmrc-timeline">
  <li class="hmrc-timeline__event">
    <h2 class="hmrc-timeline__event-title">Repayment complete</h2>
    <time class="hmrc-timeline__event-meta" datetime="2020-07-15">15 July 2020</time>
    <div class="hmrc-timeline__event-content">
      <p class="govuk-body">We repaid you £50. It will take 3 days for the money to reach your account.</p>
    </div>
  </li>
  <li class="hmrc-timeline__event">
    <h2 class="hmrc-timeline__event-title">Checking your claim</h2>
    <time class="hmrc-timeline__event-meta" datetime="2020-07-14">14 July 2020</time>
    <div class="hmrc-timeline__event-content">
      <p class="govuk-body">We received your return. You claimed you were due a repayment of £50. We are checking your claim.</p>
    </div>
  </li>
</ol>
            
                {%- from "hmrc/components/timeline/macro.njk" import hmrcTimeline -%}

{% set exampleContent1 %}<p class="govuk-body">We received your return. You claimed you were due a repayment of £50. We are checking your claim.</p>{% endset %}
{% set exampleContent2 %}<p class="govuk-body">We repaid you £50. It will take 3 days for the money to reach your account.</p>{% endset %}

  {{ hmrcTimeline({
    headinglevel: "2",
    events: [
      {
        title: 'Repayment complete',
        datetime: '2020-07-15',
        time: '15 July 2020',
        content: exampleContent2
      },
      {
        title: 'Checking your claim',
        datetime: '2020-07-14',
        time: '14 July 2020',
        content: exampleContent1
      }
    ]
  }) }}
              

Research

The pattern is used in the VAT repayments service. Usability testing took place with 7 users as part of 3 rounds of research.

The rearch showed that users understood that the:

  • all the events were related to each other
  • each event followed a previous event
  • the top event was the most recent one

We need more research. If you have used the Timeline pattern, get in touch to share your research findings.

Discuss Timeline on GitHub