Pattern ComponentSport Event

Sport Card

A specialized card component designed for displaying sports betting events with odds, team information, and interactive betting buttons.

Quick Preview

15:30Today
2

Manchester United

Liverpool FC

Football / Premier League

18:00Tomorrow
2

Barcelona

Real Madrid

Football / La Liga

Basic Usage

Standard sport card with all basic information and betting odds.

15:30Today
2

Manchester United

Liverpool FC

Football / Premier League

Code Example
<SportCard
  time="15:30"
  date="Today"
  homeTeam="Manchester United"
  awayTeam="Liverpool FC"
  league="Premier League"
  sport="Football"
  homeOdds="2.10"
  drawOdds="3.40"
  awayOdds="3.20"
/>

Hot Selection

Highlight popular betting options with the hot selection indicator.

18:00Tomorrow
2

Barcelona

Real Madrid

Football / La Liga

16:45Dec 20
2

Chelsea

Arsenal

Football / Premier League

Code Example
<SportCard
  time="18:00"
  date="Tomorrow"
  homeTeam="Barcelona"
  awayTeam="Real Madrid"
  league="La Liga"
  sport="Football"
  homeOdds="1.95"
  drawOdds="3.60"
  awayOdds="4.20"
  hotSelection="home"
/>

Different Sports

The component adapts to different sports and betting formats.

20:00Dec 15
2

Lakers

Warriors

Basketball / NBA

14:30Dec 18
2

Djokovic

Nadal

Tennis / ATP Finals

Grid Layout

Multiple sport cards in a responsive grid layout.

15:00Today
2

Bayern Munich

Dortmund

Football / Bundesliga

17:30Today
2

Juventus

AC Milan

Football / Serie A

19:45Today
2

PSG

Marseille

Football / Ligue 1