Timeline

Use a timeline to display a list of events or steps in chronological order.

Default Timeline

<ol class="timeline">
  <li class="timeline-item timeline-item-complete">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <h3 class="timeline-title">Application submitted</h4>
      <time class="timeline-date">15 January 2024</time>
      <p class="timeline-description">Your application was received.</p>
    </div>
  </li>
  <li class="timeline-item timeline-item-current">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <h3 class="timeline-title">Under review</h4>
      <time class="timeline-date">In progress</time>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <h3 class="timeline-title">Decision</h4>
    </div>
  </li>
</ol>

Compact Timeline

Status Variations

• Complete - Steps that have been finished
• Current - The step currently in progress
• Pending - Future steps (default)
• Error - Steps with issues

When to Use

Use a timeline when:

• Showing the history of an application or process
• Displaying activity logs
• Tracking order or delivery status
• Showing a sequence of events

Don't use a timeline when:

• Events are not chronological
• There are only 2-3 simple steps (use progress indicator)
• Users need to navigate between steps (use tabs or step-by-step)

Accessibility

• Use an ordered list (<ol>) for semantic structure
• Use <time> element for dates
• Ensure markers have sufficient colour contrast
• Don't rely solely on colour to indicate status

CSS Classes

.timeline { }
.timeline-compact { }
.timeline-item { }
.timeline-item-complete { }
.timeline-item-current { }
.timeline-item-error { }
.timeline-marker { }
.timeline-content { }
.timeline-title { }
.timeline-date { }
.timeline-description { }