Scoreboard
ProLive score display for matches in progress or completed games. Shows team names, current score, period or half indicator, and optional game clock. Designed for real-time updates with aria-live regions that announce score changes to screen readers without interrupting the user.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Full scoreboard with team names, scores, and period indicator in a horizontal layout. | Use for prominent score displays on match detail pages or dashboards. |
| Compact | Condensed single-line layout with abbreviated team names and score. | Use in sidebars, notification bars, or multi-match overview layouts where space is limited. |
| With Clock | Includes a running game clock or countdown timer between the scores. | Use for live matches where elapsed or remaining time is relevant. |
| Final | Post-match layout with "FT" or "Final" label and winner indication. | Use for completed matches in results feeds or historical views. |
Usage Guidelines
Use aria-live="polite" to announce score changes without disrupting screen reader users.
Use pulsing or bouncing animations on score changes — use a brief opacity fade instead.
Display team names as text — never rely on logos or badges alone.
Hide the period/half indicator to save space — it provides critical context.
Show a clear status indicator (Live, HT, FT) alongside the score.
Rely on colour alone to indicate the winning team — use text or iconography.
Keep the clock format consistent (MM:SS or M') across the application.
Auto-scroll or navigate away when a score updates — let the user control their view.
Code
Design Tokens
Accessibility
- Wrap in role="region" with aria-label="Match score" for landmark navigation.
- Use aria-live="polite" so score updates are announced without interrupting.
- Team names must be text — badges/logos use aria-hidden="true".
- Clock and period text should be in a <time> element where applicable.