Components · Person

Roster row

The dense, one-per-line person row — the workhorse of volunteer rosters, team membership panels and assignee pickers. It packs an avatar + presence dot, a two-line name / role·area stack that truncates, a tier badge, and a trailing action into a ~52px row. Rows divide on a --color-rule hairline and lift to surface-2 on hover; the whole row can be a link. Shown with the hover, current-user, selected and pending states.

Volunteer roster — hover · current-user · pending · selected

Brooklyn fosters & transport

6 members

Jordan DelgadoYou

Lead organizer·NYC megaregion

Veteran

Marisol Vega

Foster coordinator·Kings County

Trusted

Deshawn Carter

Transport driver·Hudson Valley

Contributor

Hannah Weiss

Behavior fosterer·Bronx North

Needs review

Tomás Ibarra

Adoption counselor·Newark

Contributor

Priya Nair

Intake & vet liaison·Queens

New

Row 1 is the current user (accent spine + You tag), row 2 is pinned :hover (surface-2 lift, its kebab lit), the last-but-one is selected (checkbox on + accent-soft fill) — hover / tab the rest live. Tier word comes from repTier(): Veteran · Trusted · Contributor · New; a pending member swaps it for a warn "Needs review".

layout

Flex row, gap-3, min-height:52px: avatar → name/meta (flex-1, truncates) → tier badge → trailing action. Rows divide on a --color-rule hairline inside a bordered --radius-lg card.

avatar

DS Avatar size="md" (32px), image or name-tinted initials, with the app presence dot. The dot's ring recolours to surface-2 on hover so it stays seamless.

meta stack

Name (font-semibold 14px) over a role · area sub-line (12.5px muted). Both truncate; the "·" separator is a faint glyph, not text.

tier badge

One DS Badge — the reputation tier (Veteran/Trusted/Contributor/New) or a status (warn "Needs review"). Colour reinforces the word, never replaces it.

states

is-hover (surface-2), is-you (accent left spine + tag), is-selected (checkbox + accent-soft), focus-visible ring. When the row is an <a>, keep the trailing action a single overlaid button.

Source · DS Avatar size="md" (catalog/people.css) · components/ds/PersonCard.tsx (row surface / meta-stack pattern) · DS Badge tones · forum-tokens.ts repTier(). List selection + hover mirror data-table row states.