Skip to main content

Timeline

Timelines can be used to display a series of events in a chronological order. They can be used to convey information about a project, a process, or a sequence of events.

Design Hints
Timelines are useful for displaying a series of events in a chronological order. They can be used to convey information about a project, a process, or a sequence of events. Timelines can be used to show the progress of a project, the timeline of a process, or the sequence of events that occurred over time.

Note: The timeline components below assume that the data sent as props is sorted beforehand. The timeline will work even otherwise, but it may not be as effective in conveying chronological information to the user.

Simple Timeline

A simple vertical time line with a list of events.

  1. v1.0.0 Full Changelogs

    • Added a new feature
    • Fixed a bug
    • Improved performance
  2. v0.9.0 Full Changelogs

    • Added a new feature
    • Improved performance
  3. v0.8.0 Full Changelogs

    • Fixed a bug
  4. v0.0.1 Full Changelogs

    • Initial Release
    • Fully Tested
    • Documentation
    • Ready for Production

Timeline with Collapsible Event Descriptions

A simple timeline with collapsible event descriptions.

  1. v1.0.0
    • Added a new feature
    • Fixed a bug
    • Improved performance
    Full Changelogs
  2. v0.9.0
    • Added a new feature
    • Improved performance
    Full Changelogs
  3. v0.8.0
    • Fixed a bug
    Full Changelogs
  4. v0.0.1
    • Initial Release
    • Fully Tested
    • Documentation
    • Ready for Production
    Full Changelogs

Alternate Timeline

An alternate style for timelines.

  1. v1.0.0 Full Changelogs

    • Added a new feature
    • Fixed a bug
    • Improved performance
  2. v0.9.0 Full Changelogs

    • Added a new feature
    • Improved performance
  3. v0.8.0 Full Changelogs

    • Fixed a bug
  4. v0.0.1 Full Changelogs

    • Initial Release
    • Fully Tested
    • Documentation
    • Ready for Production

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple TimelineYesYesYesYesYes
Collapse TimelineYesYesYesYesYes
Alt TimelineYesYesYesYesYes

While there is no pattern for timelines by the authoring practice guide from w3c, the components above follow standard practices for accessibility for displaying the content.