Skip to main content

ProfileCard

ProfileCard — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

ProfileCard — Prism component.

Accessibility

When the whole card is actionable, expose a single accessible name and make it reachable with Tab + Enter. Decorative imagery uses empty alt.

Import

const { ProfileCard } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
namestringYes
roleReact.ReactNode
avatarstringAvatar image URL; falls back to initials from name.
metaReact.ReactNode[]
actionsReact.ReactNode
layout"stack" | "row""stack" (centered) or "row".
classNamestring