Team Cards
Two ways to present a person: a compact profile card and a portrait-led team card.
Amara Chen
Head of Design
Amara Chen
Head of Design
Ten years turning messy component libraries into systems teams actually use.
Icon links still need names
socialLinks takes a label alongside the icon and it isn't optional — a row of unlabelled glyphs is unusable with a screen reader, and it's the same reason IconButton requires an aria-label.
Team card
Leads with a portrait and carries a location, rendered through LocationDot.
Lagos, NG
ProfileCard props
| Prop | Type | Default | Description |
|---|---|---|---|
| name / role | string | Who they are and what they do. | |
| avatarSrc / avatarAlt | string | Avatar image and alt text. | |
| bio | string | Its presence switches the card to the centred detailed layout. | |
| socialLinks | { icon: ReactNode; label: string; href?: string; onClick?: () => void }[] | label is the accessible name — an icon alone doesn't have one. |
TeamCard props
| Prop | Type | Default | Description |
|---|---|---|---|
| image / imageAlt | string | Portrait and alt text. | |
| name / role | string | Who they are and what they do. | |
| location | string | Rendered through LocationDot. | |
| locationStatus | 'active' | 'remote' | Colours that dot. | |
| socialLinks | TeamCardSocialLink[] | Same shape as ProfileCard's. |