Open demo

CSS code

HTML 
<div class="duo">
<div><span class="lbl">Cover band, centred avatar</span>
<article class="pc" aria-labelledby="pc-lena">
  <div class="pc-cover" aria-hidden="true"></div>
  <div class="pc-body">
    <span class="pc-av" aria-hidden="true">LV<span class="pc-dot"></span></span>
    <h3 class="pc-name" id="pc-lena">Lena Varga</h3>
    <p class="pc-role">Product designer at Fieldnote</p>
    <p class="pc-loc"><svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 18s6-5.3 6-10a6 6 0 0 0-12 0c0 4.7 6 10 6 10z"/><circle cx="10" cy="8" r="2.2"/></svg>Budapest, Hungary<span class="sr-only">, online now</span></p>
    <dl class="pc-stats">
      <div><dt>Projects</dt><dd>128</dd></div>
      <div><dt>Followers</dt><dd>4.2k</dd></div>
      <div><dt>Following</dt><dd>310</dd></div>
    </dl>
    <div class="pc-actions">
      <button class="pc-btn pc-btn-primary" type="button">Follow<span class="sr-only"> Lena Varga</span></button>
      <a class="pc-btn pc-btn-ghost" href="#">Message<span class="sr-only"> Lena Varga</span></a>
    </div>
  </div>
</article></div>

<div><span class="lbl">Pattern cover, left-aligned</span>
<article class="pc pc-left" aria-labelledby="pc-tomas">
  <div class="pc-cover" aria-hidden="true"></div>
  <div class="pc-body">
    <span class="pc-av" aria-hidden="true">TR</span>
    <div class="pc-head"><h3 class="pc-name" id="pc-tomas">Tomás Rivera</h3><svg viewBox="0 0 20 20" width="18" height="18" role="img" aria-label="Verified account" focusable="false"><path fill="currentColor" d="M10 1.5l2.2 1.6 2.7-.1.9 2.6 2.2 1.6-.8 2.6.8 2.6-2.2 1.6-.9 2.6-2.7-.1L10 18.5l-2.2-1.6-2.7.1-.9-2.6L2 12.8l.8-2.6L2 7.6l2.2-1.6.9-2.6 2.7.1z"/><path d="M6.6 10.2l2.3 2.3 4.6-4.8" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
    <p class="pc-role">Type historian and newsletter writer</p>
    <p class="pc-bio">Writes about grids, typefaces and Swiss poster design. Publishes the Gridwork letter every second Sunday.</p>
    <dl class="pc-stats">
      <div><dt>Essays</dt><dd>86</dd></div>
      <div><dt>Readers</dt><dd>12.9k</dd></div>
      <div><dt>Likes</dt><dd>41k</dd></div>
    </dl>
    <div class="pc-actions">
      <button class="pc-btn pc-btn-primary" type="button">Subscribe<span class="sr-only"> to Tomás Rivera</span></button>
      <a class="pc-btn pc-btn-ghost" href="#">Message<span class="sr-only"> Tomás Rivera</span></a>
    </div>
  </div>
</article></div>
</div>

<div><span class="lbl">Horizontal card</span>
<article class="pc pc-row" aria-labelledby="pc-amara">
  <span class="pc-av" aria-hidden="true">AO</span>
  <div class="pc-info">
    <h3 class="pc-name" id="pc-amara">Amara Okafor</h3>
    <p class="pc-role">Staff engineer, payments platform</p>
  </div>
  <dl class="pc-stats">
    <div><dt>Repos</dt><dd>64</dd></div>
    <div><dt>Followers</dt><dd>2.8k</dd></div>
    <div><dt>Stars</dt><dd>9.1k</dd></div>
  </dl>
  <div class="pc-actions">
    <button class="pc-btn pc-btn-primary" type="button">Follow<span class="sr-only"> Amara Okafor</span></button>
    <a class="pc-btn pc-btn-ghost" href="#">Message<span class="sr-only"> Amara Okafor</span></a>
  </div>
</article></div>
CSS 
/* Classic profile cards: a cover band, an avatar that overlaps it, name and role, a stats row (a <dl>) and two actions. */
.pc{--pc-accent:#4f46e5;--pc-accent-dark:#4338ca;--pc-ink:#1e1b3a;--pc-muted:#555a72;--pc-line:#e5e7f2;--pc-edge:#8b90ad;--pc-bg:#fff;--pc-radius:20px;
  background:var(--pc-bg);color:var(--pc-ink);border:1px solid var(--pc-line);border-radius:var(--pc-radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(30,27,58,.05),0 22px 44px -28px rgba(30,27,58,.35)}
.pc :where(h3,p,dl,dd){margin:0}
.pc-cover{height:104px;background:linear-gradient(120deg,#6366f1,#a855f7 55%,#ec4899)}
.pc-body{padding:0 24px 24px;text-align:center}
.pc-av{position:relative;display:grid;place-items:center;width:92px;height:92px;margin:-46px auto 0;border:4px solid var(--pc-bg);border-radius:50%;
  background:linear-gradient(135deg,#4338ca,#7e22ce);color:#fff;font-size:1.6rem;font-weight:700;letter-spacing:.02em}
.pc-dot{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border:3px solid var(--pc-bg);border-radius:50%;background:#16a34a}
.pc-name{margin-top:12px;font-size:1.22rem;font-weight:700;letter-spacing:-.01em}
.pc-role{margin-top:4px;font-size:.93rem;color:var(--pc-muted)}
.pc-loc{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.85rem;color:var(--pc-muted)}
.pc-loc svg{flex:none}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;padding:14px 0;border-block:1px solid var(--pc-line)}
.pc-stats div{display:flex;flex-direction:column-reverse;gap:3px;padding:0 6px}
.pc-stats div+div{border-left:1px solid var(--pc-line)}
.pc-stats dd{font-size:1.18rem;font-weight:700;font-variant-numeric:tabular-nums}
.pc-stats dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-muted)}
.pc-actions{display:flex;gap:10px;margin-top:20px}
.pc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:1.5px solid transparent;border-radius:12px;
  font:inherit;font-size:.93rem;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.pc-btn-primary{background:var(--pc-accent);color:#fff}
.pc-btn-primary:hover{background:var(--pc-accent-dark)}
.pc-btn-ghost{background:transparent;color:var(--pc-ink);border-color:var(--pc-edge)}
.pc-btn-ghost:hover{background:#f1f1fa}
.pc-btn:focus-visible{outline:3px solid var(--pc-accent);outline-offset:3px}
/* left-aligned variant with a dotted pattern cover and a rounded-square avatar */
.pc-left{--pc-accent:#0f766e;--pc-accent-dark:#115e59}
.pc-left .pc-cover{background:radial-gradient(rgba(255,255,255,.35) 1.3px,transparent 1.6px) 0 0/14px 14px,linear-gradient(120deg,#0f766e,#0d9488 50%,#22c55e)}
.pc-left .pc-body{text-align:left}
.pc-left .pc-av{margin-left:0;border-radius:24px;background:linear-gradient(135deg,#115e59,#15803d)}
.pc-head{display:flex;align-items:center;gap:6px;margin-top:12px}
.pc-head .pc-name{margin-top:0}
.pc-head svg{flex:none;color:#0f766e}
.pc-bio{margin-top:12px;font-size:.92rem;line-height:1.55;color:var(--pc-muted)}
.pc-left .pc-stats div{padding:0 12px}
.pc-left .pc-stats div:first-child{padding-left:0}
/* horizontal card: avatar, details, stats and actions in one row that wraps on small screens */
.pc-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;padding:22px 24px}
.pc-row .pc-av{width:68px;height:68px;margin:0;border:0;font-size:1.25rem;background:linear-gradient(135deg,#be185d,#7c3aed)}
.pc-row .pc-info{flex:1 1 180px;min-width:0}
.pc-row .pc-name{margin-top:0;font-size:1.1rem}
.pc-row .pc-stats{flex:0 1 auto;margin:0;padding:0;border:0;grid-template-columns:repeat(3,auto)}
.pc-row .pc-stats div{padding:0 16px}
.pc-row .pc-stats div:first-child{padding-left:0}
.pc-row .pc-actions{margin:0;flex:0 0 auto}
.pc-row .pc-btn{flex:none}
@media (max-width:560px){.pc-row .pc-actions{flex:1 1 100%}.pc-row .pc-btn{flex:1}}
.pc .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.pc-btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="duo">
<div><span class="lbl">Cover band, centred avatar</span>
<article class="card pc" aria-labelledby="pc-lena">
  <div class="pc-cover" aria-hidden="true"></div>
  <div class="card-body text-center">
    <span class="pc-av rounded-circle" aria-hidden="true">LV<span class="pc-dot rounded-circle"></span></span>
    <h3 class="pc-name" id="pc-lena">Lena Varga</h3>
    <p class="pc-role">Product designer at Fieldnote</p>
    <p class="pc-loc d-inline-flex align-items-center gap-2"><svg class="flex-shrink-0" viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 18s6-5.3 6-10a6 6 0 0 0-12 0c0 4.7 6 10 6 10z"/><circle cx="10" cy="8" r="2.2"/></svg>Budapest, Hungary<span class="visually-hidden">, online now</span></p>
    <dl class="pc-stats row row-cols-3 g-0">
      <div class="col"><dt>Projects</dt><dd>128</dd></div>
      <div class="col"><dt>Followers</dt><dd>4.2k</dd></div>
      <div class="col"><dt>Following</dt><dd>310</dd></div>
    </dl>
    <div class="pc-actions d-flex gap-2">
      <button class="btn btn-primary flex-fill w-50" type="button">Follow<span class="visually-hidden"> Lena Varga</span></button>
      <a class="btn btn-outline-secondary flex-fill w-50" href="#">Message<span class="visually-hidden"> Lena Varga</span></a>
    </div>
  </div>
</article></div>

<div><span class="lbl">Pattern cover, left-aligned</span>
<article class="card pc pc-left" aria-labelledby="pc-tomas">
  <div class="pc-cover" aria-hidden="true"></div>
  <div class="card-body">
    <span class="pc-av" aria-hidden="true">TR</span>
    <div class="pc-head d-flex align-items-center gap-2"><h3 class="pc-name" id="pc-tomas">Tomás Rivera</h3><svg class="flex-shrink-0" viewBox="0 0 20 20" width="18" height="18" role="img" aria-label="Verified account" focusable="false"><path fill="currentColor" d="M10 1.5l2.2 1.6 2.7-.1.9 2.6 2.2 1.6-.8 2.6.8 2.6-2.2 1.6-.9 2.6-2.7-.1L10 18.5l-2.2-1.6-2.7.1-.9-2.6L2 12.8l.8-2.6L2 7.6l2.2-1.6.9-2.6 2.7.1z"/><path d="M6.6 10.2l2.3 2.3 4.6-4.8" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
    <p class="pc-role">Type historian and newsletter writer</p>
    <p class="pc-bio">Writes about grids, typefaces and Swiss poster design. Publishes the Gridwork letter every second Sunday.</p>
    <dl class="pc-stats row row-cols-3 g-0">
      <div class="col"><dt>Essays</dt><dd>86</dd></div>
      <div class="col"><dt>Readers</dt><dd>12.9k</dd></div>
      <div class="col"><dt>Likes</dt><dd>41k</dd></div>
    </dl>
    <div class="pc-actions d-flex gap-2">
      <button class="btn btn-primary flex-fill w-50" type="button">Subscribe<span class="visually-hidden"> to Tomás Rivera</span></button>
      <a class="btn btn-outline-secondary flex-fill w-50" href="#">Message<span class="visually-hidden"> Tomás Rivera</span></a>
    </div>
  </div>
</article></div>
</div>

<div><span class="lbl">Horizontal card</span>
<article class="card pc pc-row" aria-labelledby="pc-amara">
  <div class="card-body d-flex flex-wrap align-items-center">
    <span class="pc-av rounded-circle flex-shrink-0" aria-hidden="true">AO</span>
    <div class="pc-info">
      <h3 class="pc-name" id="pc-amara">Amara Okafor</h3>
      <p class="pc-role">Staff engineer, payments platform</p>
    </div>
    <dl class="pc-stats row g-0">
      <div class="col"><dt>Repos</dt><dd>64</dd></div>
      <div class="col"><dt>Followers</dt><dd>2.8k</dd></div>
      <div class="col"><dt>Stars</dt><dd>9.1k</dd></div>
    </dl>
    <div class="pc-actions d-flex gap-2">
      <button class="btn btn-primary" type="button">Follow<span class="visually-hidden"> Amara Okafor</span></button>
      <a class="btn btn-outline-secondary" href="#">Message<span class="visually-hidden"> Amara Okafor</span></a>
    </div>
  </div>
</article></div>
CSS 
/* Classic profile cards on Bootstrap .card, .row-cols-3 and .btn, restyled through Bootstrap's CSS variables. */
.pc{--pc-accent:#4f46e5;--pc-accent-dark:#4338ca;--pc-ink:#1e1b3a;--pc-muted:#555a72;--pc-line:#e5e7f2;--pc-edge:#8b90ad;
  --bs-card-bg:#fff;--bs-card-color:var(--pc-ink);--bs-card-border-color:var(--pc-line);--bs-card-border-radius:20px;--bs-card-inner-border-radius:19px;
  overflow:hidden;box-shadow:0 1px 2px rgba(30,27,58,.05),0 22px 44px -28px rgba(30,27,58,.35)}
.pc :where(h3,p,dl,dd,dt){margin:0}
.pc-cover{height:104px;background:linear-gradient(120deg,#6366f1,#a855f7 55%,#ec4899)}
.pc .card-body{padding:0 24px 24px}
.pc-av{position:relative;display:grid;place-items:center;width:92px;height:92px;margin:-46px auto 0;border:4px solid #fff;
  background:linear-gradient(135deg,#4338ca,#7e22ce);color:#fff;font-size:1.6rem;font-weight:700;letter-spacing:.02em}
.pc-dot{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border:3px solid #fff;background:#16a34a}
.pc .pc-name{margin-top:12px;font-size:1.22rem;font-weight:700;letter-spacing:-.01em;line-height:normal}
.pc-role,.pc-loc,.pc-bio{color:var(--pc-muted)}
.pc-role{margin-top:4px;font-size:.93rem}
.pc .pc-loc{margin-top:10px;font-size:.85rem}
.pc-stats{margin-top:20px;padding:14px 0;border-block:1px solid var(--pc-line)}
.pc-stats .col{display:flex;flex-direction:column-reverse;gap:3px;padding:0 6px}
.pc-stats .col+.col{border-left:1px solid var(--pc-line)}
.pc-actions{margin-top:20px}
.pc-stats dd{font-size:1.18rem;font-weight:700;font-variant-numeric:tabular-nums}
.pc-stats dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-muted)}
.pc .btn{--bs-btn-padding-x:16px;--bs-btn-padding-y:11px;--bs-btn-font-size:.93rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.3;--bs-btn-border-width:1.5px;--bs-btn-border-radius:12px;
  --bs-btn-focus-box-shadow:none;transition:background-color .2s,border-color .2s,color .2s}
.pc .btn-primary{--bs-btn-bg:var(--pc-accent);--bs-btn-border-color:var(--pc-accent);--bs-btn-hover-bg:var(--pc-accent-dark);--bs-btn-hover-border-color:var(--pc-accent-dark);
  --bs-btn-active-bg:var(--pc-accent-dark);--bs-btn-active-border-color:var(--pc-accent-dark)}
.pc .btn-outline-secondary{--bs-btn-color:var(--pc-ink);--bs-btn-border-color:var(--pc-edge);--bs-btn-hover-color:var(--pc-ink);--bs-btn-hover-bg:#f1f1fa;--bs-btn-hover-border-color:var(--pc-edge);
  --bs-btn-active-color:var(--pc-ink);--bs-btn-active-bg:#e7e7f5;--bs-btn-active-border-color:var(--pc-edge)}
.pc .btn:focus-visible{outline:3px solid var(--pc-accent);outline-offset:3px}
/* left-aligned variant */
.pc-left{--pc-accent:#0f766e;--pc-accent-dark:#115e59}
.pc-left .pc-cover{background:radial-gradient(rgba(255,255,255,.35) 1.3px,transparent 1.6px) 0 0/14px 14px,linear-gradient(120deg,#0f766e,#0d9488 50%,#22c55e)}
.pc-left .pc-av{margin-left:0;border-radius:24px;background:linear-gradient(135deg,#115e59,#15803d)}
.pc-left .pc-head{margin-top:12px}
.pc-left .pc-head .pc-name{margin-top:0}
.pc-left .pc-head svg{color:#0f766e}
.pc .pc-bio{margin-top:12px;font-size:.92rem;line-height:1.55}
.pc-left .pc-stats .col{padding:0 12px}
.pc-left .pc-stats .col:first-child{padding-left:0}
/* horizontal card */
.pc-row .card-body{padding:22px 24px;gap:18px 24px}
.pc-row .pc-av{width:68px;height:68px;margin:0;border:0;font-size:1.25rem;background:linear-gradient(135deg,#be185d,#7c3aed)}
.pc-row .pc-info{flex:1 1 180px;min-width:0}
.pc-row .pc-name{margin-top:0;font-size:1.1rem}
.pc-row .pc-stats,.pc-row .pc-actions{margin:0;padding:0;border:0}
.pc-row .pc-stats .col{flex:0 0 auto;width:auto;padding:0 16px}
.pc-row .pc-stats .col:first-child{padding-left:0}
@media (max-width:560px){.pc-row .pc-actions{flex:1 1 100%}.pc-row .pc-actions .btn{flex:1 1 0}}
@media (prefers-reduced-motion:reduce){.pc .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,300px),1fr))] gap-x-7 gap-y-14">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#555a72] uppercase">Cover band, centred avatar</span>
<article class="overflow-hidden rounded-[20px] border border-[#e5e7f2] bg-white text-[#1e1b3a] shadow-[0_1px_2px_rgba(30,27,58,.05),0_22px_44px_-28px_rgba(30,27,58,.35)]" aria-labelledby="pc-lena">
  <div class="h-[104px] bg-[linear-gradient(120deg,#6366f1,#a855f7_55%,#ec4899)]" aria-hidden="true"></div>
  <div class="px-6 pb-6 text-center">
    <span class="relative mx-auto -mt-[46px] grid size-[92px] place-items-center rounded-full border-4 border-white bg-[linear-gradient(135deg,#4338ca,#7e22ce)] text-[1.6rem] font-bold tracking-[.02em] text-white" aria-hidden="true">LV<span class="absolute right-1 bottom-1 size-4 rounded-full border-[3px] border-white bg-[#16a34a]"></span></span>
    <h3 class="mt-3 text-[1.22rem] font-bold tracking-[-.01em]" id="pc-lena">Lena Varga</h3>
    <p class="mt-1 text-[.93rem] text-[#555a72]">Product designer at Fieldnote</p>
    <p class="mt-2.5 inline-flex items-center gap-1.5 text-[.85rem] text-[#555a72]"><svg class="flex-none" viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 18s6-5.3 6-10a6 6 0 0 0-12 0c0 4.7 6 10 6 10z"/><circle cx="10" cy="8" r="2.2"/></svg>Budapest, Hungary<span class="sr-only">, online now</span></p>
    <dl class="mt-5 grid grid-cols-3 divide-x divide-[#e5e7f2] border-y border-[#e5e7f2] py-3.5">
      <div class="flex flex-col-reverse gap-[3px] px-1.5"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Projects</dt><dd class="text-[1.18rem] font-bold tabular-nums">128</dd></div>
      <div class="flex flex-col-reverse gap-[3px] px-1.5"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Followers</dt><dd class="text-[1.18rem] font-bold tabular-nums">4.2k</dd></div>
      <div class="flex flex-col-reverse gap-[3px] px-1.5"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Following</dt><dd class="text-[1.18rem] font-bold tabular-nums">310</dd></div>
    </dl>
    <div class="mt-5 flex gap-2.5">
      <button class="flex-1 cursor-pointer rounded-xl border-[1.5px] border-transparent bg-[#4f46e5] px-4 py-[11px] text-[.93rem] leading-[1.3] font-semibold text-white transition-[color,background-color,border-color] duration-200 hover:bg-[#4338ca] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none" type="button">Follow<span class="sr-only"> Lena Varga</span></button>
      <a class="flex-1 rounded-xl border-[1.5px] border-[#8b90ad] px-4 py-[11px] text-center text-[.93rem] leading-[1.3] font-semibold text-[#1e1b3a] no-underline transition-[color,background-color,border-color] duration-200 hover:bg-[#f1f1fa] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none" href="#">Message<span class="sr-only"> Lena Varga</span></a>
    </div>
  </div>
</article></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#555a72] uppercase">Pattern cover, left-aligned</span>
<article class="overflow-hidden rounded-[20px] border border-[#e5e7f2] bg-white text-[#1e1b3a] shadow-[0_1px_2px_rgba(30,27,58,.05),0_22px_44px_-28px_rgba(30,27,58,.35)]" aria-labelledby="pc-tomas">
  <div class="h-[104px] bg-[radial-gradient(rgba(255,255,255,.35)_1.3px,transparent_1.6px),linear-gradient(120deg,#0f766e,#0d9488_50%,#22c55e)] bg-size-[14px_14px,auto]" aria-hidden="true"></div>
  <div class="px-6 pb-6">
    <span class="-mt-[46px] grid size-[92px] place-items-center rounded-3xl border-4 border-white bg-[linear-gradient(135deg,#115e59,#15803d)] text-[1.6rem] font-bold tracking-[.02em] text-white" aria-hidden="true">TR</span>
    <div class="mt-3 flex items-center gap-1.5"><h3 class="text-[1.22rem] font-bold tracking-[-.01em]" id="pc-tomas">Tomás Rivera</h3><svg class="flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" role="img" aria-label="Verified account" focusable="false"><path fill="currentColor" d="M10 1.5l2.2 1.6 2.7-.1.9 2.6 2.2 1.6-.8 2.6.8 2.6-2.2 1.6-.9 2.6-2.7-.1L10 18.5l-2.2-1.6-2.7.1-.9-2.6L2 12.8l.8-2.6L2 7.6l2.2-1.6.9-2.6 2.7.1z"/><path d="M6.6 10.2l2.3 2.3 4.6-4.8" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
    <p class="mt-1 text-[.93rem] text-[#555a72]">Type historian and newsletter writer</p>
    <p class="mt-3 text-[.92rem] leading-[1.55] text-[#555a72]">Writes about grids, typefaces and Swiss poster design. Publishes the Gridwork letter every second Sunday.</p>
    <dl class="mt-5 grid grid-cols-3 divide-x divide-[#e5e7f2] border-y border-[#e5e7f2] py-3.5">
      <div class="flex flex-col-reverse gap-[3px] pr-3"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Essays</dt><dd class="text-[1.18rem] font-bold tabular-nums">86</dd></div>
      <div class="flex flex-col-reverse gap-[3px] px-3"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Readers</dt><dd class="text-[1.18rem] font-bold tabular-nums">12.9k</dd></div>
      <div class="flex flex-col-reverse gap-[3px] px-3"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Likes</dt><dd class="text-[1.18rem] font-bold tabular-nums">41k</dd></div>
    </dl>
    <div class="mt-5 flex gap-2.5">
      <button class="flex-1 cursor-pointer rounded-xl border-[1.5px] border-transparent bg-[#0f766e] px-4 py-[11px] text-[.93rem] leading-[1.3] font-semibold text-white transition-[color,background-color,border-color] duration-200 hover:bg-[#115e59] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] motion-reduce:transition-none" type="button">Subscribe<span class="sr-only"> to Tomás Rivera</span></button>
      <a class="flex-1 rounded-xl border-[1.5px] border-[#8b90ad] px-4 py-[11px] text-center text-[.93rem] leading-[1.3] font-semibold text-[#1e1b3a] no-underline transition-[color,background-color,border-color] duration-200 hover:bg-[#f1f1fa] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#">Message<span class="sr-only"> Tomás Rivera</span></a>
    </div>
  </div>
</article></div>
</div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#555a72] uppercase">Horizontal card</span>
<article class="flex flex-wrap items-center gap-x-6 gap-y-[18px] overflow-hidden rounded-[20px] border border-[#e5e7f2] bg-white px-6 py-[22px] text-[#1e1b3a] shadow-[0_1px_2px_rgba(30,27,58,.05),0_22px_44px_-28px_rgba(30,27,58,.35)]" aria-labelledby="pc-amara">
  <span class="grid size-[68px] flex-none place-items-center rounded-full bg-[linear-gradient(135deg,#be185d,#7c3aed)] text-[1.25rem] font-bold tracking-[.02em] text-white" aria-hidden="true">AO</span>
  <div class="min-w-0 flex-[1_1_180px]">
    <h3 class="text-[1.1rem] font-bold tracking-[-.01em]" id="pc-amara">Amara Okafor</h3>
    <p class="mt-1 text-[.93rem] text-[#555a72]">Staff engineer, payments platform</p>
  </div>
  <dl class="flex divide-x divide-[#e5e7f2]">
    <div class="flex flex-col-reverse gap-[3px] pr-4"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Repos</dt><dd class="text-[1.18rem] font-bold tabular-nums">64</dd></div>
    <div class="flex flex-col-reverse gap-[3px] px-4"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Followers</dt><dd class="text-[1.18rem] font-bold tabular-nums">2.8k</dd></div>
    <div class="flex flex-col-reverse gap-[3px] px-4"><dt class="text-[.72rem] font-semibold tracking-[.08em] text-[#555a72] uppercase">Stars</dt><dd class="text-[1.18rem] font-bold tabular-nums">9.1k</dd></div>
  </dl>
  <div class="flex flex-none gap-2.5 max-[560px]:flex-[1_1_100%]">
    <button class="cursor-pointer rounded-xl border-[1.5px] border-transparent bg-[#4f46e5] px-4 py-[11px] text-[.93rem] leading-[1.3] font-semibold text-white transition-[color,background-color,border-color] duration-200 hover:bg-[#4338ca] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none max-[560px]:flex-1" type="button">Follow<span class="sr-only"> Amara Okafor</span></button>
    <a class="rounded-xl border-[1.5px] border-[#8b90ad] px-4 py-[11px] text-center text-[.93rem] leading-[1.3] font-semibold text-[#1e1b3a] no-underline transition-[color,background-color,border-color] duration-200 hover:bg-[#f1f1fa] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none max-[560px]:flex-1" href="#">Message<span class="sr-only"> Amara Okafor</span></a>
  </div>
</article></div>

About this set

The profile card most sites need, in three layouts. Cover band with centred avatar has a gradient cover, a round initials avatar that overlaps it with a green online dot, the name, the role, a location line, a stats row with projects, followers and following, and Follow and Message buttons. Pattern cover, left-aligned uses a dotted cover, a rounded-square avatar, a verified badge beside the name and a two-line bio, which suits writers and newsletter authors. The horizontal card puts avatar, name, stats and both buttons in one row that wraps on phones, for directories and search results. The stats are a real description list, so a screen reader hears Projects 128 rather than two loose numbers, and CSS shows the number above its label with flex-direction: column-reverse. Every button carries the person’s name in visually hidden text, so a page with many cards still has distinct Follow and Message controls. There is no JavaScript: the buttons are left for your own handlers.

What’s included

  • Three layouts: centred, left-aligned with a bio, and a horizontal row
  • Initials avatars with an online dot and a verified badge, no photos
  • Stats written as a <dl> so labels and numbers are read together
  • Follow and Message buttons named per person with hidden text
  • Bootstrap version built on .card, .row-cols-3 and .btn

Accessibility

Each card is an article labelled by its heading, and the stats are a description list. Buttons and links include the person's name in visually hidden text, the verified badge is an image with the label Verified account, and decorative covers and avatars are hidden from screen readers. Every button shows a 3px outline on keyboard focus, and colour transitions stop under prefers-reduced-motion.

Customise it

Change --pc-accent, --pc-ink, --pc-muted and --pc-line on .pc, and the gradients on .pc-cover and .pc-av. In Bootstrap the same variables feed the --bs-card-* and --bs-btn-* variables; in Tailwind edit the colour utilities such as bg-[#4f46e5].