Match Card
ProCompact card displaying two teams with their score (if played) or scheduled kickoff time. Includes match status (Upcoming, Live, Final) and links to the full match detail page. Designed for fixture lists, dashboards, and notification feeds.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Upcoming | Shows team names and scheduled date/time. No score displayed. | Use for matches that haven't started yet. |
| Live | Shows current score with a live indicator badge. | Use for matches currently in progress. |
| Final | Shows final score with "FT" label. | Use for completed matches in results views. |
Usage Guidelines
Do
Make the entire card a link to the match detail page for easy navigation.
Don't
Stack more than 3 status variants — keep it to Upcoming, Live, Final.
Do
Show the competition name or round for context when displaying multiple matches.
Don't
Use different card sizes for different statuses — maintain visual consistency.
Do
Use consistent date/time formatting across all match cards.
Don't
Hide the match date/time on completed matches — context matters for historical views.
Code
Design Tokens
Accessibility
- Card link has an aria-label with full match context (teams, score, status).
- Status conveyed by text ("FT", "LIVE"), not colour alone.
- Live indicator dot is decorative — text label is the accessible indicator.