Profile cards — Cover banner with overlapping avatar

A short cover image above an overlapping avatar, biography and two profile facts. Use it when a cover and a compact identity need to share one card.

ReactHTML

1440 × 480

Open in new tab

Component.tsx21 lines

export default function ProfileCardCoverAvatar() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white text-neutral-900 sm:w-80">
      <div role="img" aria-label="Image placeholder: profile cover photo" className="flex h-24 items-center justify-center rounded-t-lg bg-neutral-100 text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg></div>
      <div className="p-5">
        <div className="-mt-14 flex items-end justify-between gap-3">
          <span aria-hidden="true" className="flex size-18 shrink-0 items-center justify-center rounded-full border-4 border-white bg-neutral-200 text-sm font-medium text-neutral-600">MC</span>
          <button type="button" aria-label="Message Morgan Chen" className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Message</button>
        </div>
        <h2 className="mt-3 text-lg font-semibold">Morgan Chen</h2>
        <p className="text-sm text-neutral-500">Design lead</p>
        <p className="mt-2 text-sm text-neutral-600">Short biography describing focus and approach.</p>
        <ul role="list" className="mt-4 flex flex-wrap gap-x-4 gap-y-2 text-xs text-neutral-500">
          <li className="flex items-center gap-1.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>UTC+1</li>
          <li className="flex items-center gap-1.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 11h18" /></svg>Joined Mar 2024</li>
        </ul>
      </div>
    </article>
  )
}

Pattern notes

When to use: Use for a person whose cover image adds context to their identity. Pick profile-card-centered-stats when metrics should dominate. Variations: use a workspace cover, replace joining date with membership level, or substitute a compact connect action.
Hierarchy: The cover and overlapping avatar lead into an 18px semibold name, 14px role and 14px biography. The 12px facts are subordinate. Slots: name up to 22 characters, role up to 24, bio up to 12 words, a short time zone and a month/year joining date. The only action is Message.
Responsive: At 640px only the card width changes from 288px to 320px. Cover height, avatar overlap and action alignment stay fixed. The fact row wraps when needed rather than overflowing.
Layout: A 288px card (w-72), 320px from 640px (sm:w-80), with a 1px border and 8px rounded-lg corners. The full-width cover is h-24 96px. A p-5 20px body starts with a flex identity row: a 72px avatar, a 4px white border and a -mt-14 56px pull-up on the identity row relative to the padded body place the avatar 36px over the cover; a 44px Message action aligns to its bottom. Name follows by 12px, bio by 8px, and a wrapping facts row by 16px with 8px row and 16px column gaps.
States: The Message button fills neutral-50 on hover and shows a 2px neutral-900 focus-visible outline offset 2px, with a 150ms colour transition. Its accessible label names Morgan Chen. The avatar and cover are static placeholders. No open, selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│                          Image                           │
│   ┌────────┐                                             │
├───┤ Avatar ├─────────────────────────────────────────────┤
│   └────────┘                         [Message]           │
│   Morgan Chen                                            │
│   Role or handle                                         │
│   Short biography                                        │
│   Profile detail                 Joined Mar 2024         │
└──────────────────────────────────────────────────────────┘

View all

Profile cards — Biography above a portrait footer
Layout tags: stacked,media,compact
Profile cards — Centred with stats row
Layout tags: stacked,centered,numbers
Profile cards — Expandable details
Layout tags: stacked,compact

Profile cards — Cover banner with overlapping avatar

Pattern notes

More in Profile cards

Profile cards — Biography above a portrait footer

Profile cards — Centred with stats row

Profile cards — Expandable details