Profile cards — Status badge with skill tags

An availability badge beside an avatar, followed by identity, a positioning statement and skill tags. Use it for a person whose availability and skills drive contact.

ReactHTML

1440 × 480

Open in new tab

Component.tsx18 lines

export default function ProfileCardStatusSkills() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <div className="flex items-center justify-between gap-2">
        <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">JQ</span>
        <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium gap-1.5"><span aria-hidden="true" className="size-1.5 rounded-full bg-neutral-900"></span>Available Mar 14</span>
      </div>
      <h2 className="mt-3 text-lg font-semibold">Jamie Quinn</h2>
      <p className="text-sm text-neutral-500">Design consultant</p>
      <p className="mt-2 text-sm text-neutral-600">Positioning statement naming a focus, an approach and the value of working together.</p>
      <ul role="list" className="mt-3 flex flex-wrap gap-2">
        <li className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Design</li><li className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Review</li><li className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">QA</li><li className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Ops</li>
      </ul>
      <a href="#" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-4 w-full gap-2">Contact Jamie <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M5 12h14m-6-6 6 6-6 6" /></svg></a>
    </article>
  )
}

Pattern notes

When to use: Use for a short professional profile when skills and availability determine fit. Pick profile-card-identity-details for longer practical label/value facts. Variations: replace the date with a response window, change skills to service types, or make the action Request availability.
Hierarchy: Availability and the 48px avatar lead into an 18px semibold name, 14px role and 14px positioning statement of two or three lines. Four 12px skill tags precede Contact Jamie. Slots: name up to 20 characters, role up to 22, statement up to 16 words, availability up to 20 characters and skill labels up to 7. The badge dot is decorative; the availability wording carries its meaning.
Responsive: Only width changes at 640px, from 288px to 320px. Skill tags wrap with 8px gaps if their labels need a second line. The availability row keeps both items aligned and uses a short date to keep the badge on one line.
Layout: A 288px card (w-72), 320px at 640px (sm:w-80), with p-6 24px padding, 8px corners and a 1px border. A flex row spaces a 48px avatar against a compact availability badge with an 8px gap. Name follows by 12px, statement by 8px, four wrapping skill badges by 12px with 8px gaps, and a full-width 44px primary action by 16px. Badges use 10px horizontal and 2px vertical padding with rounded-full corners.
States: Contact Jamie changes from neutral-900 to neutral-700 on hover with a 150ms colour transition and shows a 2px neutral-900 focus-visible outline offset 2px. Availability and skill badges are static labels. No open, selected or disabled state.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│ Avatar                         Available Mar 14          │
│ Jamie Quinn                                              │
│ Role or specialty                                        │
│ Positioning statement                                    │
│ [Skill] [Skill] [Skill] [Skill]                          │
│ [                   Contact Jamie ->                   ] │
└──────────────────────────────────────────────────────────┘

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 — Status badge with skill tags

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