Components

Timeline

Time-ordered activity showing the history of a person or object with additional context.

Response submitted

15 March 2021 at 4:27pm

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Issue under investigation

by Douglas Pollock

15 March 2021 at 10:04am

This is a description of the event. This field accepts unformatted text only.

Issue raised on GitHub

by Karypun

25 January 2021 at 9:35am

This is a description of the event.

HTML
React

<div class="hods-timeline">
  <div class="hods-timeline__item">
    <h2 class="hods-timeline__title">
      Response submitted
    </h2>
    <p class="hods-timeline__date">
      <time
        class="hods-date-time"
        datetime="2021-03-15T16:27:00.000Z"
      >
        15 March 2021 at 4:27pm
      </time>
    </p>
    <p class="hods-timeline__description">
      Lorem ipsum dolor sit amet, consectetur
      adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="hods-timeline__item">
    <h2 class="hods-timeline__title">
      Issue under investigation
    </h2>
    <p class="hods-timeline__by">
      by Douglas Pollock
    </p>
    <p class="hods-timeline__date">
      <time
        class="hods-date-time"
        datetime="2021-03-15T10:04:00.000Z"
      >
        15 March 2021 at 10:04am
      </time>
    </p>
    <p class="hods-timeline__description">
      This is a description of the event. This field
      accepts unformatted text only.
    </p>
  </div>
  <div class="hods-timeline__item">
    <h2 class="hods-timeline__title">
      Issue raised on GitHub
    </h2>
    <p class="hods-timeline__by">by Karypun</p>
    <p class="hods-timeline__date">
      <time
        class="hods-date-time"
        datetime="2021-01-25T09:35:00.000Z"
      >
        25 January 2021 at 9:35am
      </time>
    </p>
    <p class="hods-timeline__description">
      This is a description of the event.
    </p>
  </div>
</div>

<Timeline
  items={[
    {
      action: "Response submitted",
      date: new Date("15 Mar 2021 16:27"),
      description:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    },
    {
      action: "Issue under investigation",
      by: "Douglas Pollock",
      date: new Date("15 Mar 2021 10:04"),
      description:
        "This is a description of the event. This field accepts unformatted text only.",
    },
    {
      action: "Issue raised on GitHub",
      by: "Karypun",
      date: new Date("25 Jan 2021 9:35"),
      description:
        "This is a description of the event.",
    },
  ]}
/>

Props

Name	Type	Description
id	other	'id' attribute to place on the base HTML element
classBlock	other	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	other	Extra classes to apply to the base HTML element
items	other	The events to be included in the timeline.

When to use this component

Use the timeline to help users see events ordered by time. An event may have a date, time and a description and may also have an actor (a person or system) associated with it and actions to take. Times and dates should follow the GOV.UK patterns on date and time format.

How it works

Standard timeline

Response submitted

15 March 2021 at 4:27pm

Issue under investigation

by Douglas Pollock

15 March 2021 at 10:04am

This is a description of the event. This field accepts unformatted text only.

Issue raised on GitHub

by Karypun

25 January 2021 at 9:35am

This is a description of the event.

HTML
React

<div class="hods-timeline">
  <div class="hods-timeline__item">
    <h2 class="hods-timeline__title">
      Response submitted
    </h2>
    <p class="hods-timeline__date">
      <time
        class="hods-date-time"
        datetime="2021-03-15T16:27:00.000Z"
      >
        15 March 2021 at 4:27pm
      </time>
    </p>
    <p class="hods-timeline__description">
      Lorem ipsum dolor sit amet, consectetur
      adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="hods-timeline__item">
    <h2 class="hods-timeline__title">
      Issue under investigation
    </h2>
    <p class="hods-timeline__by">
      by Douglas Pollock
    </p>
    <p class="hods-timeline__date">
      <time
        class="hods-date-time"
        datetime="2021-03-15T10:04:00.000Z"
      >
        15 March 2021 at 10:04am
      </time>
    </p>
    <p class="hods-timeline__description">
      This is a description of the event. This field
      accepts unformatted text only.
    </p>
  </div>
  <div class="hods-timeline__item">
    <h2 class="hods-timeline__title">
      Issue raised on GitHub
    </h2>
    <p class="hods-timeline__by">by Karypun</p>
    <p class="hods-timeline__date">
      <time
        class="hods-date-time"
        datetime="2021-01-25T09:35:00.000Z"
      >
        25 January 2021 at 9:35am
      </time>
    </p>
    <p class="hods-timeline__description">
      This is a description of the event.
    </p>
  </div>
</div>

<Timeline
  items={[
    {
      action: "Response submitted",
      date: new Date("15 Mar 2021 16:27"),
      description:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    },
    {
      action: "Issue under investigation",
      by: "Douglas Pollock",
      date: new Date("15 Mar 2021 10:04"),
      description:
        "This is a description of the event. This field accepts unformatted text only.",
    },
    {
      action: "Issue raised on GitHub",
      by: "Karypun",
      date: new Date("25 Jan 2021 9:35"),
      description:
        "This is a description of the event.",
    },
  ]}
/>

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.

Research

The timeline is used by:

Digital application platform
Entity search
Passports

If your service uses this component, let us know of any insights you have on research.

Help improve this component

This component needs improving. We need evidence about:

how to write for this component

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.