Skip to main content Skip to main content
Components

Timeline

Status: To be reviewed

Created in June 2021.

How ‘to be reviewed’ components work
Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently. Read about all the Design System statuses.
Open this example (Timeline (example)) in a new window 
<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.
headingLevel numeric No A number for the heading level. Defaults to 2 (<h2>).

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"
      }
    }
  ]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

When to use

Use the timeline component to show a linear record of what’s happened.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ 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.