Timeline

Skip to HTML example

When to use this component

Use the timeline component to help users understand what has happened and when.

Use the timeline component when you need to:

  • show the history of an application or case
  • display a sequence of events in chronological order
  • help users understand the progress of a process

When not to use this component

Do not use the timeline component:

  • for step-by-step guidance (use the task list pattern instead)
  • when events don't have a clear chronological order
  • for very long lists of events (consider pagination or filtering)

How it works

The timeline component displays a vertical list of events with a connecting line. Each event has:

  • a title describing what happened
  • a date or time when it happened
  • optional content with additional details

Events are typically displayed in reverse chronological order (most recent first), but you can display them in any order that makes sense for your users.

HTML example

Copy the HTML from this page directly into your web template.

Timeline

  1. Application submitted

    15 January 2024 Your application has been received and is being processed.

  2. Documents uploaded

    10 January 2024 Supporting documents have been added to your application.

  3. Application started

    5 January 2024 You began your application process. 
<ol class="dfe-timeline">
  <li class="dfe-timeline__event">
    <h2 class="dfe-timeline__event-title">Application submitted</h2>
    <span class="dfe-timeline__event-meta">15 January 2024</span>
    <span class="dfe-timeline__event-content">Your application has been received and is being processed.</span>
  </li>
  <li class="dfe-timeline__event">
    <h2 class="dfe-timeline__event-title">Documents uploaded</h2>
    <span class="dfe-timeline__event-meta">10 January 2024</span>
    <span class="dfe-timeline__event-content">Supporting documents have been added to your application.</span>
  </li>
  <li class="dfe-timeline__event">
    <h2 class="dfe-timeline__event-title">Application started</h2>
    <span class="dfe-timeline__event-meta">5 January 2024</span>
    <span class="dfe-timeline__event-content">You began your application process.</span>
  </li>
</ol>
Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal. 
{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<ol class="dfe-timeline">
  <li class="dfe-timeline__event">
    <h2 class="dfe-timeline__event-title">Application submitted</h2>
    <span class="dfe-timeline__event-meta">15 January 2024</span>
    <span class="dfe-timeline__event-content">Your application has been received and is being processed.</span>
  </li>
  <li class="dfe-timeline__event">
    <h2 class="dfe-timeline__event-title">Documents uploaded</h2>
    <span class="dfe-timeline__event-meta">10 January 2024</span>
    <span class="dfe-timeline__event-content">Supporting documents have been added to your application.</span>
  </li>
  <li class="dfe-timeline__event">
    <h2 class="dfe-timeline__event-title">Application started</h2>
    <span class="dfe-timeline__event-meta">5 January 2024</span>
    <span class="dfe-timeline__event-content">You began your application process.</span>
  </li>
</ol>


{% endblock %}

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.