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. It has two styles, as in Figma: Card, and Card details, which you get by passing a bio.
Lagos, NG
Lagos, NG
Leads the design vision and strategy, guiding the team to craft cohesive, user-centered experiences from concept to launch.
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. | |
| bio | string | Its presence switches to the Card details style, adding this paragraph beneath the name, role and social links. | |
| socialLinks | TeamCardSocialLink[] | Same shape as ProfileCard's. |
Why it works this way
Why
- ProfileCard is compact by default and switches to a centred layout when a bio or social links are passed, so the extra content has room.
- Social links require a label, because a row of unlabelled glyphs is unusable with a screen reader.
Don't
- Don't leave out the photo. Both cards are designed around a real portrait.