Competitor
Provides context around a team or athlete.
- Figma:Ready
- Web:Ready
- iOS:Ready
- Package:Sportsbook
Usage
import { Competitor } from "@caesars-ui/sbk"
The Competitor component displays team or player information in sports betting contexts. It supports various display formats including horizontal and vertical layouts, team logos, player avatars, scores, rankings, and additional metadata.
Usage Guidelines
Team Display
Use the Competitor component to show team information with logos, names, and scores in matchups and betting markets.
Player Display
Display individual athletes with avatars, names, rankings, and performance data in player-based betting scenarios.
Flexible Layouts
Choose between horizontal and vertical orientations based on your layout requirements and available space.
Properties
* indicates required.
Accessibility
Principle
Status
Description
Percievable
Ready
The Competitor component provides clear visual representation of teams and players with high contrast logos, readable text, and appropriate sizing. Color coding and visual indicators help users quickly identify different competitors and their status.
Operable
Ready
Interactive competitor elements are keyboard accessible and provide appropriate focus states. Touch targets meet minimum size requirements for mobile interactions, and the component responds appropriately to user input.
Understandable
Ready
Competitor information is presented in a logical, consistent format that users can easily parse. Team names, scores, and rankings are clearly labeled and positioned predictably across different instances of the component.
Robust
Ready
Built with semantic HTML and proper ARIA labels, the Competitor component works reliably with screen readers and other assistive technologies. It gracefully handles missing data and provides appropriate fallbacks for images and content.