profile card horizontal actions user contact profile card horizontal actions message follow email horizontal profile card with actions user card with message and follow buttons
Profile Card
Fetch pattern JSON:
curl https://webspire.de/patterns/profiles/card.json card.html
<div class="ws-profiles flex flex-col items-center gap-4 rounded-xl border border-[var(--ws-profiles-border)] bg-[var(--ws-profiles-bg)] p-5 sm:flex-row">
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600" aria-hidden="true">
<span class="text-xl font-bold text-white">JD</span>
</div>
<div class="min-w-0 flex-1 text-center sm:text-left">
<h3 class="text-base font-semibold text-[var(--ws-profiles-text)]">Jane Doe</h3>
<p class="text-sm text-[var(--ws-profiles-accent)]">Senior Product Designer</p>
<p class="mt-0.5 text-sm text-[var(--ws-profiles-text-soft)]">jane@example.com</p>
</div>
<div class="flex shrink-0 gap-2">
<a href="#message" class="rounded-lg border border-[var(--ws-profiles-border)] px-4 py-2 text-sm font-medium text-[var(--ws-profiles-text)] transition hover:bg-[var(--ws-profiles-border)]">Message</a>
<a href="#follow" class="rounded-lg bg-[var(--ws-profiles-accent)] px-4 py-2 text-sm font-medium text-white transition hover:opacity-90">Follow</a>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
profilecardhorizontalactionsusercontact
Slots
| Name | Required | Description |
|---|---|---|
| avatar | Yes | Profile avatar. |
| info | Yes | Name, title, and email. |
| actions | Yes | Message and follow action buttons. |
Horizontal profile card layout with avatar on the left, name, title, and email in the center, and Message/Follow action buttons on the right. Stacks vertically on mobile.