Timeline
ProA vertical sequence of events connected by a continuous line, displaying chronological activity. Each node has an icon or status indicator, a timestamp, and content. Used for activity logs, order tracking, project milestones, and version histories.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard vertical timeline with dot nodes, timestamps, and content blocks. | Use for audit logs, changelog entries, and order tracking. |
| With Icons | Timeline entries with contextual icons instead of dots. | Use when different event types need visual differentiation — commits, comments, merges. |
Usage Guidelines
Do
Use ordered list semantics (<ol>) since timeline entries have chronological order.
Don't
Use a timeline for unordered content — the visual implies sequence.
Do
Include timestamps for every entry — relative ("2 hours ago") or absolute.
Don't
Mix ascending and descending order in the same timeline — pick one direction.
Do
Differentiate event types with colour or icon when multiple types exist.
Don't
Show more than 20 events without pagination or "load more" functionality.
Code
Design Tokens
Accessibility
- Use <ol> for ordered timeline entries — the list semantics convey sequence to screen readers.
- Each entry should include a readable timestamp — avoid relative-only times without an accessible absolute value.
- The connecting line is purely decorative and should be implemented with CSS pseudo-elements, not extra DOM nodes.
- Icon-only nodes need aria-hidden="true" with the event type conveyed in the text content.
- Progress timelines should convey the current step via aria-current="step".