Timeline

When to use this component

Use the timeline component to display a sequence of events or activities in chronological order, such as application status updates, case history, or activity logs.

When to not use this component

Avoid using the timeline component for content that does not have a natural chronological order.

If you need to display a simple list of items without time-based relationships, use a standard list or table component instead.

How it works

The timeline component displays events in a vertical list, with each event showing a title, date, and optional description.

Events are typically displayed in reverse chronological order (newest first), but can be arranged based on your specific use case.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

Timeline example

A basic timeline showing a sequence of events with dates and descriptions.

Timeline example

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