UpNext / Agency Card

Agency Card

<AgencyCard />Stable

The agency identity card — the unit a coach scans in the agency directory and clicks to open a profile. One row: a square org logo (never the person circle), the agency name with the optional UpNext-Certified trust badge beside it, and a location · athlete-count meta line. Certification wears ONE fixed outfit — the Badge primitive at primary/soft/xs with the status.verified registry glyph and a visible label (screen readers hear 'UpNext Certified'); an uncertified agency simply has no badge — absence is the distinction, the directory stays quiet. The name + meta pair rides the TextBlock base by reference (heading md verbatim; meta at the body-light register), the shell is the AthleteCard surface grammar (card + shadow-base, hover is a fill change only, press + ring on interactive cards), and every color resolves through tokens — dark mode ships free.

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

Agency directory — live

The agency directory, 1:1 — certified and uncertified agencies mixed in one grid, the trust badge the only tell. Each card carries the square logo (initials fallback on an identity color), the name, and location · athlete count. The whole card is one control — click to prove the wiring; the page owns the data and what opening an agency does.

Click any card — href renders a link, onSelect a button.

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

Nilson SportsCertifiedNJ180 athletes

Code

1import { AgencyCard } from "@/components/upnext";
2
3<AgencyCard />

States

A card is a link (href), a button (onSelect), or a static <article> (neither). Certified adds the fixed trust badge; uncertified adds nothing. Names truncate with a title tooltip; the badge and the athlete count never truncate. With no location or count the meta line drops and the identity row holds the height.

Nilson SportsCertifiedNJ180 athletes

1{/* the fixed trust outfit — Badge primary/soft/xs + status.verified;
2   screen readers hear "UpNext Certified" */}
3<AgencyCard name="Nilson Sports" certified location="NJ" athleteCount={180} />

Source

A domain composite built entirely from public primitives: Avatar (the square org mark with initials fallback), Badge (the fixed Certified outfit), Icon (status.verified + user.group from the registry), and the TextBlock base for the name + meta pair. No fetching, no state — the page supplies the agencies and owns navigation.