6-8 UI · Sports

Broadcast-grade sports components

The signature set — scoreboards, matchup cards, leaderboards, and the play-by-play feed that anchor a 6-8 Sports match center. Live navy stage, luminous teal accents, and a scanline wash straight off the broadcast truck.

Match CenterLive

Prep Water Polo · Championship

Southport Aquatics Center · Attendance 1,842

WGBWestgate Bruins18-2

LiveQ43:24

SPTSouthport Trojans16-4

Play by Play

Live feed

WGBQ4 3:2411-9
Bauer buries the counter-attack from the left post.
Assist off the steal — Bruins push the lead to two.
SPTQ4 4:10
Marković sent off — 20-second exclusion.
Bruins draw the ejection at center.
WGBQ4 5:38
Keeper Andersson denies the five-meter penalty.
Kick save keeps it a one-goal game.
SPTQ4 6:5210-9
Kovač finishes the six-on-five power play.
Trojans answer to level the quarter.
WGBQ4 7:30
Bruins call a full timeout to reset the press.
WGBQ3 0:1210-8
Bauer beats the buzzer from the perimeter.
A booming shot to close the third.

Team Comparison

WGB · SPT

34Shots29

WGBSPT

58%Power-Play %44%

WGBSPT

9Exclusions Drawn7

WGBSPT

12Saves10

WGBSPT

6Sprints Won3

WGBSPT

6-8 UI

Scoreboard

The marquee panel. A glass-strong stage with a scanline wash and top sweep, two teams flanking a live center column. The leading score lights up teal; a final dims the loser.

Live · Large

Prep Water Polo · Championship

WGBWestgate Bruins18-2

LiveQ43:24

SPTSouthport Trojans16-4

Final

Prep Basketball · Regional Final

CENCentral Lions24-3

FinalFinal

WESWestview Wolves21-6

Upcoming · Small

Water Polo · Semifinal

RVRRiverside

–

UpcomingSat5:00 PM

HBRHarbor

–

Copy

<Scoreboard
  size="lg"
  status="live"
  league="Prep Water Polo · Championship"
  period="Q4"
  clock="3:24"
  home={{ abbr: "WGB", name: "Westgate Bruins", score: 11, color: "#3E7FE0" }}
  away={{ abbr: "SPT", name: "Southport Trojans", score: 9, color: "#E23B4E" }}
/>

Prop	Type	Default	Description
home / away	ScoreboardTeam	—	Team objects: name, abbr, score?, color?, record?, logo?.
status	"live" \| "final" \| "upcoming" \| "halftime"	"live"	Drives the center pill and dimming behavior.
period	string	—	Period label such as Q4, OT, or HALF.
clock	string	—	Game clock, or the tip-off time for an upcoming game.
league	string	—	Small caption above the teams.
size	"sm" \| "md" \| "lg"	"md"	Scales the scores, badges, and padding.

6-8 UI

Game Card

A compact matchup tile that reads as a preview, a live box, or a final. Hover lifts the card with a teal glow and a top hairline.

Upcoming

Water Polo · QuarterfinalUpcoming

RVRRiverside Rapids

HBRHarbor Marlins

Sat · 5:00 PM·Woollett Aquatics

Live

Water Polo · ChampionshipLiveQ4 3:24

SPTSouthport Trojans

WGBWestgate Bruins

Final

Basketball · Regional FinalFinal

WESWestview Wolves

CENCentral Lions

Central Fieldhouse

Prop	Type	Default	Description
home / away	GameCardTeam	—	name, abbr, score?, color?, record?, seed?, logo?.
status	"upcoming" \| "live" \| "final"	"upcoming"	Selects the right rail: seed, record, or score.
period / clock	string	—	Shown next to the live pill for a live game.
datetime / venue	string	—	Footer meta for an upcoming or final game.
league	string	—	Small caption in the header row.

6-8 UI

Leaderboard

A ranked stat table built from RankBadge and AthleteAvatar rows. Podium rows carry a faint highlight, every row glows on hover, and a trend arrow reads the momentum.

Scoring Leaders

Tournament Scoring Leaders

#AthleteGoals

1
Marko KovačSPT · 12 GP
21
2
Leon BauerWGB · 12 GP
19
3
Tomas FerreiraRVR · 11 GP
17
4
Jonas NagyHBR · 12 GP
15
5
Rafael CostaLBS · 10 GP
14

Copy

<Leaderboard
  title="Tournament Scoring Leaders"
  statLabel="Goals"
  rows={[
    { rank: 1, name: "Marko Kovač", team: "SPT", statValue: 21, trend: "up" },
    { rank: 2, name: "Leon Bauer", team: "WGB", statValue: 19, trend: "up" },
  ]}
/>

Prop	Type	Default	Description
rows	LeaderboardRow[]	—	rank, name, avatar?, team?, meta?, statValue, trend?.
statLabel	string	"Stat"	Header label for the value column.
title	string	—	Optional panel title with a trophy accent.
trend	"up" \| "down" \| "flat"	—	Per-row momentum arrow (green up, red down, muted flat).

6-8 UI

Rank Badge

The standings numeral. Positions one, two, and three earn gold, silver, and bronze podium treatments with a matching glow; every other rank stays a quiet muted numeral.

Podium & beyond

123412

Sizes

111

In a stack

1Heat 1

2Heat 2

3Heat 3

Prop	Type	Default	Description
rank	number	—	Standings position; ranks 1-3 render the podium tiers.
tier	"gold" \| "silver" \| "bronze" \| "muted"	—	Force a tier instead of deriving it from rank.
size	"sm" \| "md" \| "lg"	"md"	Badge dimensions and numeral size.

6-8 UI

Athlete Avatar

A circular player mark — photo or monogram — wrapped in the signature teal ring, with an optional broadcast status dot.

Sizes

Status

Live

Online

Offline

Photo & monogram

Prop	Type	Default	Description
name	string	—	Display name — supplies alt text and the monogram fallback.
src	string	—	Optional headshot; falls back to initials on error.
status	"live" \| "online" \| "offline"	—	Presence dot at the lower-right; live pulses yellow.
size	"xs" \| "sm" \| "md" \| "lg"	"md"	Avatar and status-dot dimensions.

6-8 UI

Live Indicator

The broadcast on-air chip — a pulsing dot plus an uppercase display label. One anatomy across live, upcoming, and final states.

Variants

LiveUpcomingFinal

Sizes

LiveLiveLive

Custom label

On AirWarmupsFull Time

Prop	Type	Default	Description
variant	"live" \| "upcoming" \| "final"	"live"	Color + default word (Live / Upcoming / Final).
label	string	—	Overrides the per-variant default word.
showDot	boolean	true	Toggles the leading status dot.
size	"sm" \| "md" \| "lg"	"md"	Text size and tracking.

6-8 UI

Stat Bar

A head-to-head comparison meter. The left value fills teal from the left, the right fills yellow from the right, and the leading number picks up a glow. Bars animate open on scroll.

Team comparison

34Shots29

WGBSPT

58%Power-Play %44%

WGBSPT

8Exclusion Fouls5

WGBSPT

Single metric

54%Possession %46%

Prop	Type	Default	Description
label	string	—	Center caption naming the metric.
leftValue / rightValue	number	—	The two figures being compared.
leftLabel / rightLabel	string	—	Optional captions under each end.
unit	string	—	Appended to each displayed number, e.g. "%".
format	(value: number) => string	—	Formats the displayed numbers (client-side callers).
lowerIsBetter	boolean	false	Treats the smaller value as the leader.

6-8 UI

Play by Play

A vertical broadcast timeline. Each event hangs an iconized node off a fading teal rail with a team color dot and a tabular time chip. Scoring plays light up yellow with a glass callout.

Live feed

WGBQ4 3:2411-9
Bauer buries the counter-attack from the left post.
Assist off the steal — Bruins push the lead to two.
SPTQ4 4:10
Marković sent off — 20-second exclusion.
Bruins draw the ejection at center.
WGBQ4 5:38
Keeper Andersson denies the five-meter penalty.
Kick save keeps it a one-goal game.
SPTQ4 6:5210-9
Kovač finishes the six-on-five power play.
Trojans answer to level the quarter.
WGBQ4 7:30
Bruins call a full timeout to reset the press.
WGBQ3 0:1210-8
Bauer beats the buzzer from the perimeter.
A booming shot to close the third.

Prop	Type	Default	Description
events	PlayEvent[]	—	time, type?, team?, teamColor?, title, detail?, score?, highlight?.
type	PlayType	—	goal, exclusion, save, timeout, steal, period, sprint — picks the icon.
highlight	boolean	—	Forces the yellow callout (on by default for goals).
score	string	—	Running score chip, e.g. 11-9.