Profile cards — Row with follow toggle

A compact identity row with a native follow checkbox, a short bio and two counts. Use it for a suggested person or lightweight social profile.

ReactHTML

1440 × 480

Open in new tab

Component.tsx18 lines

export default function ProfileCardInlineFollow() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-[22rem]">
      <div className="flex items-center gap-2">
        <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600">SP</span>
        <div className="min-w-0 flex-1"><h2 className="truncate text-base font-semibold">Sam Patel</h2><p className="truncate text-xs text-neutral-500">@sampatel</p></div>
        <label className="relative block w-28 shrink-0 cursor-pointer">
          <input type="checkbox" aria-label="Follow Sam Patel" className="peer sr-only focus-visible:outline-hidden" />
          <span 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 w-28 peer-checked:hidden peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">Follow</span>
          <span className="hidden 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 w-28 peer-checked:inline-flex peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">Following</span>
        </label>
      </div>
      <p className="mt-3 text-sm text-neutral-600">Short biography naming experience and interests.</p>
      <p className="mt-3 flex flex-wrap gap-3 text-xs text-neutral-500"><span><strong className="font-medium text-neutral-900">1,284</strong> followers</span><span><strong className="font-medium text-neutral-900">312</strong> following</span></p>
    </article>
  )
}

Pattern notes

When to use: Use in suggestions, search results or a compact social sidebar. Pick profile-card-centered-stats when three metrics deserve a separate row. Variations: start the checkbox checked, change follow to a subscribe toggle, or replace follower counts with project counts.
Hierarchy: The 16px semibold name and 12px handle precede the Follow control. A 14px two-line bio adds context; 12px counts show figures in neutral-900 and labels in neutral-500. Slots: name up to 22 characters, handle up to 18, bio up to 12 words and counts up to 6 characters. The checkbox has the explicit accessible name Follow Sam Patel.
Responsive: Only width changes at 640px, from 288px to 352px. The header stays on one row, with name and handle truncated before the fixed follow control can wrap. Counts wrap independently if longer values need extra room.
Layout: A 288px card (w-72), 352px at 640px (sm:w-[22rem]), with 16px p-4 padding, a 1px border and 8px corners. The header has a 40px avatar, a flex-1 min-w-0 identity block and a fixed 112px follow control, separated by 8px gaps. The bio follows by 12px, then a wrapping 12px count row by 12px with 12px gaps. The follow labels are 44px tall with 6px rounded-md corners.
States: A visually hidden native checkbox starts unchecked. Checking swaps the filled Follow label for an outlined Following label using peer-checked; checking again restores Follow. The primary hover fill is neutral-700 and secondary hover fill neutral-50, with 150ms colour transitions. peer-focus-visible draws a 2px neutral-900 outline offset 2px on the visible label; the input uses focus-visible:outline-hidden so forced colours preserve its own focus cue. No open or disabled state.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Avatar   Sam Patel                     [Follow toggle]    │
│         @sampatel                                        │
│Short biography                                           │
│1,284 followers                    312 following          │
└──────────────────────────────────────────────────────────┘

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 — Row with follow toggle

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