Fixture List
ProChronological listing of matches grouped by date or competition round. Shows team pairings with scheduled time (upcoming) or final score (completed). Designed for season overviews, match-day programmes, and calendar views.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Flat list of fixtures with date headers. | Use for simple date-ordered fixture views. |
| Grouped by Date | Fixtures grouped under date headings with visual separation. | Use when showing multiple matchdays or weeks. |
| Grouped by Round | Fixtures grouped by competition round number. | Use for tournament or league round-based views. |
Usage Guidelines
Do
Use proper heading hierarchy for date/round group headers.
Don't
Mix upcoming and completed fixtures without clear visual/textual distinction.
Do
Display times in the user's local timezone.
Don't
Display times in a single timezone without conversion.
Do
Make each fixture a link to the match detail page.
Don't
Use infinite scroll for long fixture lists — paginate by round or month instead.
Code
Design Tokens
Accessibility
- Group headings use proper heading level in the page hierarchy.
- Each fixture link has sufficient context (team names + time/score).
- Date/time values wrapped in <time> element with datetime attribute.