The Timeline component presents a series of items arranged chronologically. It communicates the order, progression, or history of events in a clear way. It can help users understand, for example, event programmes, legislative steps, project milestones, policy developments.
Do's
- label each item with a short, distinct heading that clearly identifies the event or occurrence
- order items consistently. Start with the most recent step. Order chronologically throughout
- use timestamps, headings and descriptions consistently to help scannability
Don'ts
- do not place items out of sequential order - arbitrary or inconsistent ordering makes content more difficult for users to understand
- do not use the Timeline to represent steps in a process or actions a user must take (i.e. it is not a procedural guide)
When to use
- use the component for a sequence of three or more steps
- use when presenting a sequence of distinct events over time, (e.g. to display histories, chronicles, agendas, etc.)
- use the Headline entry, when a timeline spans multiple distinct phases or periods (e.g. decade or year-level grouping, separate legislative phases, Commission mandates) - only use it when the grouping makes sense, not as a decorative device
When not to use
- do not use the Timeline when presenting procedural steps or user actions - the Timeline is a display component for past or scheduled events, not a guide for sequential tasks. For step-by-step instructions or multi-stage processes, consider an Ordered list
- do not use the Timeline for items that share the same start time. Consider instead an Unordered list or the Facts and Figures component