Event Timeline
ProChronological feed of match events — goals, yellow/red cards, substitutions, and VAR decisions — displayed with minute markers and event icons. Supports live updates during matches.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Full timeline with icons, event descriptions, and minute markers. | Use on match detail pages for comprehensive event tracking. |
| Compact | Icon-only timeline with tooltips for event details. | Use in match card overlays or sidebar widgets. |
Usage Guidelines
Do
Use an ordered list for semantic event ordering.
Don't
Use icons without text labels — icon meaning varies across sports.
Do
Pair each event icon with a text label (Goal, Yellow Card, Sub).
Don't
Remove minute markers to save space — they are essential context.
Do
Wrap minute values in <time> elements.
Don't
Auto-scroll to new events — let users control their position in the feed.
Code
Design Tokens
Accessibility
- Events in a semantic <ol> for chronological ordering.
- Event type described in text, not icon alone.
- New events in live matches announced via aria-live="polite" container.