Components Timeline

Last updated: 11 October 2022

HTML
Nunjucks

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

You can edit the page via GitHub or if you’ve got a question, idea or suggestion share it on the #moj-pattern-library-support channel on Slack.

Cookies on MoJ Pattern Library