Data Display
Journey Timeline
A composite component combining a Stepper (progress indicators) with an Info List (content items) to visualise multi-step processes, application statuses, and service journeys.
Examples
12 Apr 2026
Application Submitted
Your application has been received.
15 Apr 2026
Document Verification
All documents verified successfully.
18 Apr 2026
Under Review
Being reviewed by processing officer.
Pending
Approval
Pending
Issued
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Semantic list structure with role="list" and role="listitem" for proper document outline (WCAG 1.3.1)
- Aria-label attributes provide context for timeline and individual items
- Status icons include aria-label for screen reader announcements
- Sufficient color contrast ratios for all status indicators (WCAG 1.4.3)
- Decorative connector lines marked with aria-hidden="true"
- Keyboard navigation support through standard list navigation patterns
- Dates and metadata properly associated with timeline items
- Clear visual hierarchy with heading elements for item titles
When to use this component
✓Do's
- •Chronological event sequences
- •Application status history
- •Activity logs and audit trails
- •Process step visualization
✗Don'ts
- •For current step only, use Stepper.
- •For non-chronological data, use List.
- •For simple status, use Badge.
- •For tabular data, use Table.
Do's and Don'ts
✓ Do's
Application Submitted
12 Apr 2026
Under Review
18 Apr 2026
Use timelines for chronological event sequences and application status history.
✗ Don'ts
12 Apr - Submitted
14 Apr - Under Review
Don't use timelines for non-chronological data, use List instead.