Event Card

A single-event card — a competition header over the two competitors and their kickoff time, live score, or final result. Team sports show one score column; tennis shows a per-set breakdown with an expandable scoreboard. Live events auto-refresh on an interval. Sport-agnostic: works for any sport the Sports API covers (football, basketball, tennis, ice hockey, American football, …), adapting its status labels and score layout to each.

Import

import { EventCard } from "fansunited-frontend-components";
import { EventCardProps } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`eventId`	`string`	Event ID to render, e.g. `"fb:m:12345"`.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`type`	`EventCardType`	`"header"` \| `"detailed"`. The kind of card. Defaults to `"header"`. `"detailed"` is reserved for a future release — see Card type.
`template`	`EventCardTemplateType`	`"compact"` \| `"standard"` \| `"hero"`. Visual density of the card. Defaults to `"standard"`. See Templates.
`showCompetition`	`boolean`	Show the competition header (crest + name + stage/round or country subtitle). Defaults to `true`.
`showOdds`	`boolean`	Render betting odds in each template. Defaults to `true`. Not yet supported by the backend — see Odds.
`liveRefresh`	`boolean`	Poll the events API while the event is `LIVE` so score/status stay current. Defaults to `true`. See Live refresh.
`refreshInterval`	`number`	Live-refresh poll interval in milliseconds. Defaults to `30000` (30s).

Templates

template picks the visual prominence of the same card — it does not change what data is shown.

Value	Layout
`"compact"`	A livescore-style row: competition header over a match row, kickoff time / status on the left, competitors stacked on the right with a single score column (team sports) or a per-set grid (tennis).
`"standard"` (default)	The two competitors flank a central column showing the kickoff time (upcoming) or the score / final result, each crest beside its name.
`"hero"`	A large card — each competitor's crest stacked over its name, flanking a centered score / kickoff time in an inset panel, with a left accent bar on live events.

Card type

type is a higher-level switch than template:

Value	Behavior
`"header"` (default)	The condensed event card described on this page (competition header + competitors + time/score). The only kind implemented today.
`"detailed"`	A richer event view (lineups, stats, timeline, …). Reserved, not implemented yet — the prop and its contract are in place so it's stable before the feature lands. Passing it has no effect today; the header card is rendered regardless.

Live refresh

When liveRefresh is true (the default) and the event is LIVE, the card re-fetches on refreshInterval so the score and status stay current. Only live events poll — upcoming and finished events are fetched once. Set liveRefresh={false} to disable polling entirely.

Sports & statuses

Team sports render a single aggregate score (goals / points).
Tennis renders a per-set breakdown — a compact per-set grid (compact template) or a result-first summary with an expandable full scoreboard (standard / hero), including tiebreak superscripts.
Status labels are localized and sport-aware. An event resolves to one of four states — upcoming, live, finished, cancelled. The finished label adapts to the sport: clock-based sports (football, basketball, hockey) show FT; tennis, which has no game clock, shows Finished.
If the event can't be loaded, the card renders a contained "load failed" / "not available" message rather than breaking the host layout.

Examples

Basic (standard template)

import { EventCard } from "fansunited-frontend-components";

<EventCard eventId="fb:m:12345" sdk={sdk} language="en" />;

Compact livescore row

<EventCard
  eventId="fb:m:12345"
  sdk={sdk}
  language="en"
  template="compact"
/>;

Hero card without the competition header

<EventCard
  eventId="fb:m:12345"
  sdk={sdk}
  language="en"
  template="hero"
  showCompetition={false}
/>;

Finished event, no live polling

<EventCard
  eventId="fb:m:12345"
  sdk={sdk}
  language="en"
  liveRefresh={false}
/>;

Slower live refresh (60s)

<EventCard
  eventId="fb:m:12345"
  sdk={sdk}
  language="en"
  refreshInterval={60000}
/>;