Stepwise UI

Profile Card

A profile card for a person or an agent, in a full banner variant and a compact row. The default variant includes a scenic banner header; the compact variant keeps only the avatar row - useful in sidebars or lists. Both show work-experience stats and a full-width CTA button.

Installation

npx stepwise-ui add profile-card

Default (with banner)

Snoofy Ackerman
Snoofy AckermanMarketing Agent

Snoofy is a digital assistant which can help you with drafting social media posts, scheduling them across every platform, and also tracking how they perform for you!

Work Experience
5Client Works
100Posts Drafted
20Ongoing Tasks
import { ProfileCard } from '@/components/stepwise/profile-card'

<ProfileCard
  variant="default"
  bannerSrc="/banner.jpg"
  avatarSrc="/your-photo.jpg"
  name="Snoofy Ackerman"
  verified
  role="Marketing Agent"
  bio="Snoofy is a digital assistant…"
  stats={[
    { label: 'Client Works',  value: '5'   },
    { label: 'Posts Drafted', value: '100' },
    { label: 'Ongoing Tasks', value: '20'  },
  ]}
  ctaLabel="Get in touch"
/>

Compact

Snoofy Ackerman
Snoofy AckermanMarketing Agent

Snoofy is a digital assistant which can help you with drafting social media posts, scheduling them across every platform, and also tracking how they perform for you!

Work Experience
5Client Works
100Posts Drafted
20Ongoing Tasks
<ProfileCard
  variant="compact"
  avatarSrc="/your-photo.jpg"
  name="Snoofy Ackerman"
  verified
  role="Marketing Agent"
  bio="…"
  stats={stats}
/>

Props

PropTypeDescription
variant
"default" | "compact"
Layout. Default "default" includes a banner image.
bannerSrc
string
Banner image URL (default variant only).
avatarSrc
string
Avatar image URL. Falls back to initials.
avatarImagePosition
string
object-position for the avatar photo, e.g. "top". Default "center".
avatarImageScale
number
Scales the avatar photo within its cover fit. Under 1 zooms out a touch. Default 1.
name
string
Display name.
verified
boolean
Shows a blue verified badge.
role
string
Role or title below the name.
bio
string
Short biography.
stats
ProfileStat[]
Work stats displayed in a row.
ctaLabel
string
CTA button label. Default "Get in touch".
onCta
() => void
CTA click handler.