Box Score
The Box Score component displays matchups between two competitors with scores, game state, and event details.
- Figma:Ready
- Web:Ready
- iOS:Ready
- Package:Sportsbook
Game States
- Pregame - Shows countdown timer and start time
- Live - Displays current scores and possession indicator
- Finished - Shows final scores
Layouts
Horizontal - Teams displayed side-by-side, ideal for team sports like football, basketball, baseball
Vertical - Teams stacked vertically, recommended for individual sports like tennis or golf
Minimal - Simplified version with reduced details
Features
- Responsive sizing that adjusts based on screen width
- Team color bars when available
- Live stream indicator
- Countdown timer for upcoming games
- Possession indicator for live games
- Loading skeleton state
- Extended game information (period, time remaining, etc.)
When to Use
- Use horizontal layout for team sports (NFL, NBA, MLB, NHL)
- Use vertical layout for individual sports (tennis, golf, MMA)
- Show countdown for pregame events
- Display live stream indicator when streaming is available
- Include extended details for live games to show period and time information