CARDS & DECORATION

UserCard

Horizontal user row with avatar + name + optional meta and trailing slots. Memphis frame with a 4px shadow.

Import

import { UserCard } from 'damo-ui'

Basic

D
Damo Membro
DAMO@EXAMPLE.COM
<UserCard name="Damo Membro" meta="DAMO@EXAMPLE.COM" />

Trailing slot

D
Damo Membro
DAMO@EXAMPLE.COM
PRO
1<UserCard
2  name="Damo Membro"
3  meta="DAMO@EXAMPLE.COM"
4  trailing={<Badge variant="featured">PRO</Badge>}
5/>

Custom avatar

1<UserCard
2  name="Damo Membro"
3  avatar={<img src="/u/dm.jpg" alt="" className="w-full h-full object-cover" />}
4  meta="MEMBRO DAL 2026"
5/>

Props

UserCard props
PropTypeDefaultDescription
name*string—Display name. Used to derive the default avatar initial.
avatarReactNode—Custom avatar node. When omitted UserCard renders a circular ink tile with the first letter of name.
metaReactNode—Optional mono caption rendered under the name.
trailingReactNode—Optional right-aligned slot — typically a Badge or status chip.

Accessibility

  • Composes <Card variant="default"> — same a11y contract as Card: a presentational row that forwards role / aria-*.
  • The avatar fallback (first letter of name) is decorative; when the avatar is the only identifier, add aria-label on the card. If the whole row is clickable, wrap it in a <button> or <a> — the row layout is not a focus target on its own.
← ColorPickerFeatureCard →