6-8 Sports6-8UI Framework

Surfaces

Cards, Panels, Banners & Callouts

The containers that hold everything else. Glass stages, broadcast frames, on-air announcement strips, and semantic message blocks — each one built to read like a live graphics package, never a plain box.

6-8 UI

Cards

A navy stage with a teal hairline that dials up to full frosted glass, lifts with a glow, and can tilt in 3D as the pointer tracks across it.

Default

Season Pace

Rolling 10-game average.

112.4Points / G
+6.2
Glass

Possession

Frosted glass over the stage.

58%Time of Possession
Outline

Roster

A quiet teal hairline frame.

23 Active
Elevated + glow

Win Streak

Raised surface with a teal glow.

7Straight Wins
Interactive — hover to tilt

Live Read

Move your pointer across the surface.

+14Point Diff
Broadcast player card

Marcus Vela

Live

Point Guard — Northside Bolts

28Points
11Assists
6Rebounds
94.1Rating
Q3 — 4:12 remainingFull Sheet
Copy
<Card variant="glass-strong" interactive glow>
  <CardHeader>
    <CardTitle>Marcus Vela</CardTitle>
    <CardDescription>Point Guard</CardDescription>
  </CardHeader>
  <CardContent>{/* stats */}</CardContent>
  <CardFooter>{/* actions */}</CardFooter>
</Card>
PropTypeDefaultDescription
variant"default" | "glass" | "glass-strong" | "outline" | "elevated""default"Surface treatment, from solid navy to full frosted glass.
glowbooleanfalseAdds an ambient teal glow around the card.
interactivebooleanfalseEnables a subtle pointer-tracked 3D tilt and specular sheen (respects reduced motion).
classNamestring—Merged last, so a caller's Tailwind class always wins a conflict.

6-8 UI

Panels

A broadcast frame: a chrome top bar with a tracked title chip and status slot, a scanline-washed body, and HUD corner ticks.

Live scoreboard
Court 1Live Scoreboard
Live
Bolts82
vs
Hawks76
Solid + status
Box Score
Final
  • FG%48.2
  • 3PT%39.6
  • Turnovers9
Subtle frame
ScoutNotes

Elite first step off the dribble. Closes passing lanes early and pushes tempo in transition.

PropTypeDefaultDescription
titleReact.ReactNode—Required. The label in the top-bar chip.
variant"default" | "strong" | "solid" | "subtle""default"Frame treatment, from glass to solid navy.
eyebrowReact.ReactNode—A small kicker rendered above the title.
statusReact.ReactNode—A node rendered on the right of the top bar.
livebooleanfalseRenders a pulsing yellow LIVE indicator.
iconReact.ReactNode—An optional icon shown before the title.

6-8 UI

Banners

Full-width, on-air announcement strips with a glowing accent rail and a collapse-on-dismiss animation.

Announcements
New season schedule is liveAll 14 divisions now have their full slate posted through the playoffs.
View
Championship tips off in 15 minutesCourt 1 — Bolts vs Hawks. Streaming on the broadcast feed.
Watch
Read-only maintenance windowStat corrections are paused until 2:00 AM ET while the ledger reconciles.
PropTypeDefaultDescription
variant"teal" | "yellow""teal"Accent colour. Yellow reads as live / high-priority.
titleReact.ReactNode—The tracked, uppercase headline.
actionReact.ReactNode—A node rendered before the dismiss control.
dismissiblebooleantrueShows the dismiss control; collapses the banner on click.
onDismiss() => void—Fired after the banner is dismissed.

6-8 UI

Callouts

Inline, semantic message blocks in tinted glass, keyed to intent with a glowing rail and an icon chip.

Info
Heads up
Substitution windows open at every dead ball in the final two minutes.
Success
Roster locked
All 12 players are eligible and the lineup has been submitted.
Warning
Approaching foul limit
Two starters are carrying four fouls with a full quarter left to play.
Danger
Game suspended
Play is stopped pending a review of the court conditions on Court 3.
PropTypeDefaultDescription
variant"info" | "success" | "warning" | "danger""info"Semantic intent, which sets the tint, rail, and default icon.
titleReact.ReactNode—The tracked, uppercase headline.
iconReact.ReactNode—Overrides the default per-variant icon.
childrenReact.ReactNode—The body copy of the callout.