Components Timeline

Last updated: 18 May 2022

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