Profile cards — Expandable details

A right-aligned avatar beside identity text above expandable credentials and a profile link. Use it when background details can stay behind a native disclosure.

ReactHTML

1440 × 480

Open in new tab

Component.tsx25 lines

export default function ProfileCardExpandableDetails() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-5 text-neutral-900 sm:w-80">
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0"><h2 className="text-lg font-semibold">Riley Morgan</h2><p className="text-sm text-neutral-500">Research lead</p></div>
        <span aria-hidden="true" className="flex size-12 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600">RM</span>
      </div>
      <p className="mt-2 text-sm text-neutral-600">Short summary of focus and experience.</p>
      <details open className="group mt-3 border-y border-neutral-200">
        <summary className="flex cursor-pointer list-none items-center justify-between gap-2 py-2 text-sm font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
          Experience and credentials <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 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg>
        </summary>
        <div className="pb-2">
          <p className="text-sm text-neutral-600">Brief background and qualifications.</p>
          <dl className="mt-2 grid gap-1 text-xs">
            <div className="flex justify-between gap-3"><dt className="text-neutral-500">Experience</dt><dd className="text-right">8 years</dd></div>
            <div className="flex justify-between gap-3"><dt className="text-neutral-500">Credentials</dt><dd className="text-right">Credential slot</dd></div>
          </dl>
        </div>
      </details>
      <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 inline-block text-sm">View full profile</a>
    </article>
  )
}

Pattern notes

When to use: Use for optional qualifications in a compact profile. Pick profile-card-identity-details when all practical facts must be visible. Variations: start the disclosure closed, replace credentials with recent experience, or link to a longer biography.
Hierarchy: Read the 18px semibold name and 14px role, short 14px summary, then the Experience and credentials disclosure. The first render shows the panel so its compact depth is visible. Slots: name up to 20 characters, role up to 22, summary up to 7 words, background up to 6 words, experience up to 8 characters and qualification up to 18. View full profile closes the card.
Responsive: Only width changes at 640px, from 288px to 320px. Identity stays horizontal with the avatar at the right. The open state stays under 370px high with short content; label/value rows retain right-aligned values and allow wrapping.
Layout: A 288px card (w-72), 320px from 640px (sm:w-80), with p-5 20px padding, 8px corners and a 1px border. The identity row places name and role on the left and a 48px avatar on the right with a 12px gap, distinguishing it from profile-card-identity-details. The summary follows by 8px. Native details begins 12px later between hairlines: its summary has 8px vertical padding, an 8px gap and a 16px chevron. The panel has a 14px background sentence and two 12px definition rows, 8px top spacing and 4px row gaps, with 8px bottom padding. The closing link has 8px top margin.
States: Native details starts open and toggles by mouse or keyboard; the decorative chevron rotates 180 degrees with a 150ms transform transition. Summary hover fills neutral-50 and the text link changes to neutral-600. Both controls show a 2px neutral-900 focus-visible outline offset 2px. No selected or disabled state.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Riley Morgan                                  Avatar      │
│Role or specialty                                         │
│Short summary                                             │
│──────────────────────────────────────────────────────────│
│Experience and credentials                            ^   │
│  Short background paragraph                              │
│  Experience                                   8 years    │
│  Credentials                        Qualification slot   │
│──────────────────────────────────────────────────────────│
│[View full profile]                                       │
└──────────────────────────────────────────────────────────┘

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 — Cover banner with overlapping avatar
Layout tags: stacked,layered,media

Profile cards — Expandable details

Pattern notes

More in Profile cards

Profile cards — Biography above a portrait footer

Profile cards — Centred with stats row

Profile cards — Cover banner with overlapping avatar