UpNext / Athlete Card

Athlete Card

<AthleteCard />Stable

A clean athlete identity composite with two product-specific structures: standard for availability and navigation, and board for evaluation, ownership, score, and recruiting metrics. An icon-only signal row leads the board card — the toned evaluation glyph and the avatar-only ownership chip bookend the top edge, with status text and names in tooltips + aria — identity follows, and supporting metrics read as a single value-forward inline stat line so cards stay calm when tiled in a grid or list. Built entirely from existing UpNext primitives and semantic tokens.

import { AthleteCard } from "@/components/upnext";

Variant explorer

Standard exposes live availability (a pulsing dot when available), verification, avatar behavior, and the trailing affordance. Board crosses evaluation state with five semantic signals, plus assignment, verification, and avatar resilience — and the board card is live: its state glyph and assignee chip open their status and assign menus, writing back to the axes.

Standard

The lighter navigational summary keeps availability (a live pulsing dot), verification, avatar fallback, and chevron affordance as separate options.

Status

Athlete avatar

Chevron

Verification

R. Sanders

Eureka College ’28

Position
RB
Games started
5
Games played
10
Available
<AthleteCard
  variant="standard"
  athleteName="R. Sanders"
  subtitle="Eureka College ’28"
  schoolFallback="EC"
  position="RB"
  gamesStarted={5}
  gamesPlayed={10}
  imageSrc="https://i.pravatar.cc/160?img=12"
  showChevron
/>

Board

Cross evaluation state, the five Figma signals, assignment, verification, and avatar resilience independently — or use the card itself: the state glyph and the assignee chip open their menus and write back to these axes.

Evaluation

Signal

Assignment

Verification

Athlete avatar

Marcus Bradley

7/10

University of Florida

Class year
2025
Games started
20
Games played
25
Height
6′3″
Weight
212 lbs
<AthleteCard
  variant="board"
  athleteName="Marcus Bradley"
  school="University of Florida"
  schoolFallback="UF"
  classYear="2025"
  gamesStarted={20}
  gamesPlayed={25}
  height="6′3″"
  weight="212 lbs"
  imageSrc="https://i.pravatar.cc/160?img=12"
  verified
  evaluationScore={7}
  evaluationScoreMax={10}
  assigneeName="Jordan Lee"
  assigneeImageSrc="https://i.pravatar.cc/80?img=32"
/>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Marcus Bradley

University of Florida · 2025

Position
RB
Games started
20
Games played
25
Available

Code

import { AthleteCard } from "@/components/upnext";


<AthleteCard
  variant="standard"
  athleteName="Marcus Bradley"
  subtitle="University of Florida · 2025"
  schoolFallback="UF"
  position="RB"
  gamesStarted={20}
  gamesPlayed={25}
  imageSrc="https://i.pravatar.cc/160?img=12"
  verified
  showChevron
/>

Structural variants

Use standard inside team or profile navigation and board inside evaluation workflows. Every card answers hover with a soft neutral fill — depth never changes — while linked cards add press scale and a visible focus ring. The five board signals cross evaluated and needs-evaluation for all ten reference combinations; evaluation state never relies on color alone (the glyph shape flips between check-circle and pending clock) and the full status text stays explicit to assistive technology through the tooltip + aria-label.

Variant

State

R. Sanders

Eureka College ’28

Position
RB
Games started
5
Games played
10
Available
<AthleteCard
  variant="standard"
  athleteName="R. Sanders"
  subtitle="Eureka College ’28"
  schoolFallback="EC"
  position="RB"
  gamesStarted={5}
  gamesPlayed={10}
  imageSrc="https://i.pravatar.cc/160?img=11"
  verified
  href="/athletes/r-sanders"
/>

Composition

The parent owns list or grid layout. Add href only when the whole card has one destination; the signal row's quick actions (evaluationOptions + onEvaluationChange, assignableMembers + onAssign) need a card without href — a button can't nest inside a link — and fall back to the static display otherwise. Assignment identifies workflow ownership, while evaluation tone communicates the product-defined signal rather than athlete availability.

R. Sanders

Eureka College ’28

Position
RB
Games started
5
Games played
10
Available
<AthleteCard
  athleteName="R. Sanders"
  subtitle="Eureka College ’28"
  position="RB"
  gamesStarted={5}
  gamesPlayed={10}
  href="/athletes/r-sanders"
/>

Source

The composite uses the public Avatar, Badge, Icon, Separator, and Tooltip primitives with semantic card, border, text, ring, radius, depth, and status tokens. The prop metadata documents applicability, defaults, controls, generated JSX, and each token resolution; no Figma font, raw color, or one-off visual value is copied into the implementation.