Components · Person

Person card

The PersonCard is OUR wrapper (not a DS export): it composes the DS Avatar + Text on a portal surface and adds the slots the roster needs — a name, a secondary role line, labelled contact meta rows, a wrapping badge cluster (role · tier · status) and a right-aligned aside for contact actions. Pass href and the whole tile becomes a focusable link. Shown in the default tile and the dense compact variant.

PersonCard — default (meta rows + badges + contact aside)

Marisol Vega

Foster coordinator · Brooklyn fosters

Email: marisol@savethedogs.io
Phone: (555) 010-2840
Region: Kings County, NY

Coordinator Veteran Transport

Deshawn Carter

Transport volunteer · Hudson Valley

Email: deshawn.c@savethedogs.io
Vehicle: Cargo van · 6 crates
Joined: Jun 2026

Driver Contributor

Needs review

Card 1 is pinned :hover (border-strong + surface-2 lift) and its first action :hover; hover / tab the others live. The whole tile is one <a href> — the contact actions in the aside stay non-navigating affordances so the tile keeps a single predictable target.

Compact variant — dense single-line tiles for tight columns

Priya Nair

Intake & vet liaison · Queens

Trusted

Tomás Ibarra

Adoption counselor · Newark

Contributor

Hannah Weiss

Behavior fosterer · Bronx North

Compact drops the meta rows and shrinks to a sm (24px) avatar with padding:10px 12px and center alignment — the form used inside side rails and picker popovers, where the badge or a single action carries the trailing slot.

name / secondary

The heading (font-semibold, truncates) and the role/team line below (DS Text size=small muted, truncates). name also seeds the Avatar initials fallback.

avatar*

avatarSrc shows an image (initials otherwise), avatarSize defaults to md — the default tile uses lg — and avatarAccent tints the initials chip for the highlighted / signed-in person. Presence dot is an app add-on.