Modern CSS Badges and Avatars in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">:has() chip picker · counts picks with a CSS counter</span>
<fieldset class="pick">
  <legend>Skills you want to learn<small>Pick up to 3 for your profile.</small></legend>
  <div class="pick-chips">
    <input type="checkbox" id="sk-1" checked><label for="sk-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Figma</label>
    <input type="checkbox" id="sk-2"><label for="sk-2"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Motion design</label>
    <input type="checkbox" id="sk-3" checked><label for="sk-3"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Accessibility</label>
    <input type="checkbox" id="sk-4"><label for="sk-4"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Design systems</label>
    <input type="checkbox" id="sk-5"><label for="sk-5"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>User research</label>
    <input type="checkbox" id="sk-6"><label for="sk-6"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Prototyping</label>
  </div>
  <p class="pick-sum">
    <span class="pick-count"><b></b>picked</span>
    <span class="pick-none">Nothing picked yet</span>
    <span class="pick-warn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.5l6 10.5H2z"/><path d="M8 7v2.5M8 11.5h.01"/></svg>Only your first 3 picks show on your profile</span>
  </p>
</fieldset></div>

<div><span class="lbl">color-mix() tints · one colour per badge and avatar</span>
<ul class="mix-row">
  <li><span class="tint" style="--c:#db2777">Design</span></li>
  <li><span class="tint" style="--c:#2563eb">Backend</span></li>
  <li><span class="tint" style="--c:#0d9488">Infrastructure</span></li>
  <li><span class="tint" style="--c:#7c3aed">Research</span></li>
  <li><span class="tint" style="--c:#ca8a04">Docs</span></li>
  <li><span class="tint" style="--c:#dc2626">Urgent</span></li>
</ul>
<ul class="mix-row">
  <li><span class="tav" style="--c:#db2777" role="img" aria-label="Ines Duarte">ID</span></li>
  <li><span class="tav" style="--c:#2563eb" role="img" aria-label="Omar Aziz">OA</span></li>
  <li><span class="tav" style="--c:#0d9488" role="img" aria-label="Hana Sato">HS</span></li>
  <li><span class="tav" style="--c:#7c3aed" role="img" aria-label="Priya Nair">PN</span></li>
  <li><span class="tav" style="--c:#ca8a04" role="img" aria-label="Kai Moreno">KM</span></li>
  <li><span class="tav" style="--c:#dc2626" role="img" aria-label="Femi Adeyemi">FA</span></li>
</ul></div>

<div><span class="lbl">Container-query member list · same markup in three slots</span>
<div class="slots">
  <div class="slot s1"><span class="slot-cap">Narrow slot: stack</span>
    <div class="mlist"><ul class="ml" aria-label="Design team">
      <li><span class="av" aria-hidden="true">LV</span><span class="ml-txt"><b>Lena Vogt</b><small>Design lead</small></span></li>
      <li><span class="av" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA</span><span class="ml-txt"><b>Omar Aziz</b><small>Product designer</small></span></li>
      <li><span class="av" style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span><span class="ml-txt"><b>June Park</b><small>Illustrator</small></span></li>
      <li><span class="av" style="--a:#334155;--b:#475569" aria-hidden="true">TR</span><span class="ml-txt"><b>Tomás Ruiz</b><small>Researcher</small></span></li>
    </ul></div></div>
  <div class="slot s2"><span class="slot-cap">Medium slot: list</span>
    <div class="mlist"><ul class="ml" aria-label="Design team">
      <li><span class="av" aria-hidden="true">LV</span><span class="ml-txt"><b>Lena Vogt</b><small>Design lead</small></span></li>
      <li><span class="av" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA</span><span class="ml-txt"><b>Omar Aziz</b><small>Product designer</small></span></li>
      <li><span class="av" style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span><span class="ml-txt"><b>June Park</b><small>Illustrator</small></span></li>
      <li><span class="av" style="--a:#334155;--b:#475569" aria-hidden="true">TR</span><span class="ml-txt"><b>Tomás Ruiz</b><small>Researcher</small></span></li>
    </ul></div></div>
  <div class="slot"><span class="slot-cap">Wide slot: grid</span>
    <div class="mlist"><ul class="ml" aria-label="Design team">
      <li><span class="av" aria-hidden="true">LV</span><span class="ml-txt"><b>Lena Vogt</b><small>Design lead</small></span></li>
      <li><span class="av" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA</span><span class="ml-txt"><b>Omar Aziz</b><small>Product designer</small></span></li>
      <li><span class="av" style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span><span class="ml-txt"><b>June Park</b><small>Illustrator</small></span></li>
      <li><span class="av" style="--a:#334155;--b:#475569" aria-hidden="true">TR</span><span class="ml-txt"><b>Tomás Ruiz</b><small>Researcher</small></span></li>
    </ul></div></div>
</div></div>

CSS

/* Modern CSS badges and avatars, no JavaScript:
   1. :has() and a CSS counter turn checkbox chips into a picker that counts and warns past three picks.
   2. color-mix() derives every tint of a badge or soft avatar from one --c colour.
   3. A container query lays a member list out as a stack, a list or a grid by the width of its slot. */
.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}

/* 1. chip picker */
.pick{max-width:560px;margin:0;padding:16px 18px 18px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;counter-reset:pick;
  transition:border-color .2s,box-shadow .2s}
.pick:has(:checked){border-color:#a5b4fc;box-shadow:0 0 0 4px #eef2ff}
.pick legend{float:left;width:100%;font-size:.95rem;font-weight:700;color:#0f172a}
.pick legend small{display:block;margin-top:3px;font-size:.8rem;font-weight:500;color:#526072}
.pick-chips{clear:both;display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.pick-chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pick-chips input:checked{counter-increment:pick}
.pick-chips label{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;
  color:#1e293b;font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.pick-chips label:hover{border-color:#94a3b8}
.pick-chips svg{display:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pick-chips input:checked+label{border-color:#4f46e5;background:#4f46e5;color:#fff;font-weight:600;padding-left:10px}
.pick-chips input:checked+label svg{display:block}
.pick-chips input:focus-visible+label{outline:2px solid #4f46e5;outline-offset:2px}
.pick-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;font-size:.84rem;color:#334155}
.pick-count{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:700}
.pick-count b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#4f46e5;color:#fff;font-size:.72rem}
.pick-count b::before{content:counter(pick)}
.pick:not(:has(:checked)) .pick-count{display:none}
.pick-none{color:#526072}
.pick:has(:checked) .pick-none{display:none}
.pick-warn{display:none;align-items:center;gap:6px;color:#9a3412;font-weight:600}
.pick-warn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pick:has(input:checked ~ input:checked ~ input:checked ~ input:checked) .pick-warn{display:inline-flex}

/* 2. colour-mixed tints from one --c */
.mix-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.tint{--c:#475569;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #cbd5e1;border-radius:999px;background:#f1f5f9;color:#334155;
  font-size:.76rem;font-weight:700;line-height:1.25;white-space:nowrap;
  background:color-mix(in oklab,var(--c) 11%,white);border-color:color-mix(in oklab,var(--c) 38%,white);color:color-mix(in oklab,var(--c) 68%,black)}
.tint::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.tav{--c:#475569;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;background:#f1f5f9;color:#334155;font-size:.88rem;font-weight:800;
  background:color-mix(in oklab,var(--c) 15%,white);color:color-mix(in oklab,var(--c) 68%,black);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--c) 30%,white)}
.mix-row+.mix-row{margin-top:16px}

/* 3. container-query member list */
.mlist{container:mlist/inline-size}
.ml{display:flex;margin:0;padding:0;list-style:none}
.ml li{display:flex;align-items:center;gap:12px;min-width:0}
.ml li+li{margin-left:-6px}
.ml .av{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));
  box-shadow:0 0 0 2.5px #f8fafc;color:#fff;font-size:.82rem;font-weight:700}
.ml-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ml-txt b{display:block;font-size:.9rem;color:#0f172a}
.ml-txt small{display:block;margin-top:1px;font-size:.78rem;color:#526072;overflow:hidden;text-overflow:ellipsis}
@container mlist (min-width:300px){
  .ml{flex-direction:column;gap:12px}
  .ml li+li{margin-left:0}
  .ml-txt{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;min-width:0}
}
@container mlist (min-width:520px){
  .ml{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml li{padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
  .ml .av{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.pick,.pick-chips label{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">:has() chip picker · counts picks with a CSS counter</span>
<fieldset class="pick">
  <legend>Skills you want to learn<small>Pick up to 3 for your profile.</small></legend>
  <div class="pick-chips d-flex flex-wrap">
    <input class="btn-check" type="checkbox" id="sk-1" autocomplete="off" checked><label class="btn rounded-pill" for="sk-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Figma</label>
    <input class="btn-check" type="checkbox" id="sk-2" autocomplete="off"><label class="btn rounded-pill" for="sk-2"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Motion design</label>
    <input class="btn-check" type="checkbox" id="sk-3" autocomplete="off" checked><label class="btn rounded-pill" for="sk-3"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Accessibility</label>
    <input class="btn-check" type="checkbox" id="sk-4" autocomplete="off"><label class="btn rounded-pill" for="sk-4"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Design systems</label>
    <input class="btn-check" type="checkbox" id="sk-5" autocomplete="off"><label class="btn rounded-pill" for="sk-5"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>User research</label>
    <input class="btn-check" type="checkbox" id="sk-6" autocomplete="off"><label class="btn rounded-pill" for="sk-6"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Prototyping</label>
  </div>
  <p class="pick-sum d-flex flex-wrap align-items-center mb-0">
    <span class="badge rounded-pill pick-count"><b></b>picked</span>
    <span class="pick-none">Nothing picked yet</span>
    <span class="pick-warn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.5l6 10.5H2z"/><path d="M8 7v2.5M8 11.5h.01"/></svg>Only your first 3 picks show on your profile</span>
  </p>
</fieldset></div>

<div><span class="lbl">color-mix() tints · one colour per badge and avatar</span>
<ul class="mix-row list-unstyled d-flex flex-wrap align-items-center">
  <li><span class="badge rounded-pill tint" style="--c:#db2777">Design</span></li>
  <li><span class="badge rounded-pill tint" style="--c:#2563eb">Backend</span></li>
  <li><span class="badge rounded-pill tint" style="--c:#0d9488">Infrastructure</span></li>
  <li><span class="badge rounded-pill tint" style="--c:#7c3aed">Research</span></li>
  <li><span class="badge rounded-pill tint" style="--c:#ca8a04">Docs</span></li>
  <li><span class="badge rounded-pill tint" style="--c:#dc2626">Urgent</span></li>
</ul>
<ul class="mix-row list-unstyled d-flex flex-wrap align-items-center">
  <li><span class="tav fw-bolder" style="--c:#db2777" role="img" aria-label="Ines Duarte">ID</span></li>
  <li><span class="tav fw-bolder" style="--c:#2563eb" role="img" aria-label="Omar Aziz">OA</span></li>
  <li><span class="tav fw-bolder" style="--c:#0d9488" role="img" aria-label="Hana Sato">HS</span></li>
  <li><span class="tav fw-bolder" style="--c:#7c3aed" role="img" aria-label="Priya Nair">PN</span></li>
  <li><span class="tav fw-bolder" style="--c:#ca8a04" role="img" aria-label="Kai Moreno">KM</span></li>
  <li><span class="tav fw-bolder" style="--c:#dc2626" role="img" aria-label="Femi Adeyemi">FA</span></li>
</ul></div>

<div><span class="lbl">Container-query member list · same markup in three slots</span>
<div class="slots">
  <div class="slot s1"><span class="slot-cap">Narrow slot: stack</span>
    <div class="mlist"><ul class="ml list-unstyled m-0" aria-label="Design team">
      <li><span class="av rounded-circle" aria-hidden="true">LV</span><span class="ml-txt"><b>Lena Vogt</b><small>Design lead</small></span></li>
      <li><span class="av rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA</span><span class="ml-txt"><b>Omar Aziz</b><small>Product designer</small></span></li>
      <li><span class="av rounded-circle" style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span><span class="ml-txt"><b>June Park</b><small>Illustrator</small></span></li>
      <li><span class="av rounded-circle" style="--a:#334155;--b:#475569" aria-hidden="true">TR</span><span class="ml-txt"><b>Tomás Ruiz</b><small>Researcher</small></span></li>
    </ul></div></div>
  <div class="slot s2"><span class="slot-cap">Medium slot: list</span>
    <div class="mlist"><ul class="ml list-unstyled m-0" aria-label="Design team">
      <li><span class="av rounded-circle" aria-hidden="true">LV</span><span class="ml-txt"><b>Lena Vogt</b><small>Design lead</small></span></li>
      <li><span class="av rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA</span><span class="ml-txt"><b>Omar Aziz</b><small>Product designer</small></span></li>
      <li><span class="av rounded-circle" style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span><span class="ml-txt"><b>June Park</b><small>Illustrator</small></span></li>
      <li><span class="av rounded-circle" style="--a:#334155;--b:#475569" aria-hidden="true">TR</span><span class="ml-txt"><b>Tomás Ruiz</b><small>Researcher</small></span></li>
    </ul></div></div>
  <div class="slot"><span class="slot-cap">Wide slot: grid</span>
    <div class="mlist"><ul class="ml list-unstyled m-0" aria-label="Design team">
      <li><span class="av rounded-circle" aria-hidden="true">LV</span><span class="ml-txt"><b>Lena Vogt</b><small>Design lead</small></span></li>
      <li><span class="av rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA</span><span class="ml-txt"><b>Omar Aziz</b><small>Product designer</small></span></li>
      <li><span class="av rounded-circle" style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span><span class="ml-txt"><b>June Park</b><small>Illustrator</small></span></li>
      <li><span class="av rounded-circle" style="--a:#334155;--b:#475569" aria-hidden="true">TR</span><span class="ml-txt"><b>Tomás Ruiz</b><small>Researcher</small></span></li>
    </ul></div></div>
</div></div>

CSS

/* Modern CSS badges and avatars on Bootstrap's .btn-check, .btn and .badge, no JavaScript:
   1. :has() and a CSS counter turn checkbox chips into a picker that counts and warns past three picks.
   2. color-mix() derives every tint of a badge or soft avatar from one --c colour.
   3. A container query lays a member list out as a stack, a list or a grid by the width of its slot. */

/* 1. chip picker */
.pick{max-width:560px;margin:0;padding:16px 18px 18px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;counter-reset:pick;
  transition:border-color .2s,box-shadow .2s}
.pick:has(:checked){border-color:#a5b4fc;box-shadow:0 0 0 4px #eef2ff}
.pick legend{float:left;width:100%;margin:0;font-size:.95rem;font-weight:700;line-height:normal;color:#0f172a}
.pick legend small{display:block;margin-top:3px;font-size:.8rem;font-weight:500;color:#526072}
.pick-chips{clear:both;gap:8px;padding-top:14px}
.pick-chips .btn-check:checked{counter-increment:pick}
.pick-chips .btn{--bs-btn-padding-x:14px;--bs-btn-padding-y:0;--bs-btn-font-size:.85rem;--bs-btn-font-weight:500;--bs-btn-color:#1e293b;--bs-btn-bg:#fff;--bs-btn-border-color:#cbd5e1;
  --bs-btn-hover-color:#1e293b;--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#94a3b8;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4f46e5;--bs-btn-active-border-color:#4f46e5;
  display:inline-flex;align-items:center;gap:6px;height:34px;transition:background-color .15s,border-color .15s,color .15s}
.pick-chips .btn svg{display:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pick-chips .btn-check:checked+.btn{font-weight:600;padding-left:10px}
.pick-chips .btn-check:checked+.btn svg{display:block}
.pick-chips .btn-check:focus-visible+.btn{outline:2px solid #4f46e5;outline-offset:2px;box-shadow:none}
.pick-sum{gap:6px 12px;margin-top:14px;font-size:.84rem;color:#334155}
.pick-count{--bs-badge-padding-x:10px;--bs-badge-padding-y:3px;--bs-badge-font-size:.84rem;--bs-badge-font-weight:700;--bs-badge-color:#3730a3;display:inline-flex;align-items:center;gap:6px;padding-left:4px;background:#eef2ff;line-height:normal}
.pick-count b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#4f46e5;color:#fff;font-size:.72rem}
.pick-count b::before{content:counter(pick)}
.pick:not(:has(:checked)) .pick-count{display:none}
.pick-none{color:#526072}
.pick:has(:checked) .pick-none{display:none}
.pick-warn{display:none;align-items:center;gap:6px;color:#9a3412;font-weight:600}
.pick-warn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pick:has(input:checked ~ input:checked ~ input:checked ~ input:checked) .pick-warn{display:inline-flex}

/* 2. colour-mixed tints from one --c */
.mix-row{gap:10px;margin:0}
.tint{--c:#475569;--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.76rem;--bs-badge-font-weight:700;display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd5e1;background:#f1f5f9;color:#334155;
  line-height:1.25;
  background:color-mix(in oklab,var(--c) 11%,white);border-color:color-mix(in oklab,var(--c) 38%,white);color:color-mix(in oklab,var(--c) 68%,black)}
.tint::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.tav{--c:#475569;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;background:#f1f5f9;color:#334155;font-size:.88rem;font-weight:800;
  background:color-mix(in oklab,var(--c) 15%,white);color:color-mix(in oklab,var(--c) 68%,black);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--c) 30%,white)}
.mix-row+.mix-row{margin-top:16px}

/* 3. container-query member list */
.mlist{container:mlist/inline-size}
.ml{display:flex}
.ml li{display:flex;align-items:center;gap:12px;min-width:0}
.ml li+li{margin-left:-6px}
.ml .av{display:grid;place-items:center;width:40px;height:40px;flex:none;background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));
  box-shadow:0 0 0 2.5px #f8fafc;color:#fff;font-size:.82rem;font-weight:700}
.ml-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ml-txt b{display:block;font-size:.9rem;color:#0f172a}
.ml-txt small{display:block;margin-top:1px;font-size:.78rem;color:#526072;overflow:hidden;text-overflow:ellipsis}
@container mlist (min-width:300px){
  .ml{flex-direction:column;gap:12px}
  .ml li+li{margin-left:0}
  .ml-txt{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;min-width:0}
}
@container mlist (min-width:520px){
  .ml{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml li{padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
  .ml .av{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.pick,.pick-chips .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">:has() chip picker · counts picks with a CSS counter</span>
<fieldset class="group pick max-w-[560px] rounded-2xl border border-[#e2e8f0] bg-white px-[18px] pt-4 pb-[18px] transition-[border-color,box-shadow] duration-200 has-checked:border-[#a5b4fc] has-checked:shadow-[0_0_0_4px_#eef2ff] motion-reduce:transition-none">
  <legend class="float-left w-full text-[.95rem] font-bold text-[#0f172a]">Skills you want to learn<small class="mt-[3px] block text-[.8rem] font-medium text-[#526072]">Pick up to 3 for your profile.</small></legend>
  <div class="clear-both flex flex-wrap gap-2 pt-3.5">
    <input class="sr-only" type="checkbox" id="sk-1" checked><label class="inline-flex h-[34px] cursor-pointer items-center gap-1.5 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.85rem] font-medium text-[#1e293b] transition-[background-color,border-color,color] duration-150 hover:border-[#94a3b8] [input:checked+&]:border-[#4f46e5] [input:checked+&]:bg-[#4f46e5] [input:checked+&]:pl-2.5 [input:checked+&]:font-semibold [input:checked+&]:text-white [input:focus-visible+&]:outline-2 [input:focus-visible+&]:outline-offset-2 [input:focus-visible+&]:outline-[#4f46e5] motion-reduce:transition-none [&>svg]:hidden [input:checked+&]:[&>svg]:block" for="sk-1"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Figma</label>
    <input class="sr-only" type="checkbox" id="sk-2"><label class="inline-flex h-[34px] cursor-pointer items-center gap-1.5 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.85rem] font-medium text-[#1e293b] transition-[background-color,border-color,color] duration-150 hover:border-[#94a3b8] [input:checked+&]:border-[#4f46e5] [input:checked+&]:bg-[#4f46e5] [input:checked+&]:pl-2.5 [input:checked+&]:font-semibold [input:checked+&]:text-white [input:focus-visible+&]:outline-2 [input:focus-visible+&]:outline-offset-2 [input:focus-visible+&]:outline-[#4f46e5] motion-reduce:transition-none [&>svg]:hidden [input:checked+&]:[&>svg]:block" for="sk-2"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Motion design</label>
    <input class="sr-only" type="checkbox" id="sk-3" checked><label class="inline-flex h-[34px] cursor-pointer items-center gap-1.5 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.85rem] font-medium text-[#1e293b] transition-[background-color,border-color,color] duration-150 hover:border-[#94a3b8] [input:checked+&]:border-[#4f46e5] [input:checked+&]:bg-[#4f46e5] [input:checked+&]:pl-2.5 [input:checked+&]:font-semibold [input:checked+&]:text-white [input:focus-visible+&]:outline-2 [input:focus-visible+&]:outline-offset-2 [input:focus-visible+&]:outline-[#4f46e5] motion-reduce:transition-none [&>svg]:hidden [input:checked+&]:[&>svg]:block" for="sk-3"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Accessibility</label>
    <input class="sr-only" type="checkbox" id="sk-4"><label class="inline-flex h-[34px] cursor-pointer items-center gap-1.5 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.85rem] font-medium text-[#1e293b] transition-[background-color,border-color,color] duration-150 hover:border-[#94a3b8] [input:checked+&]:border-[#4f46e5] [input:checked+&]:bg-[#4f46e5] [input:checked+&]:pl-2.5 [input:checked+&]:font-semibold [input:checked+&]:text-white [input:focus-visible+&]:outline-2 [input:focus-visible+&]:outline-offset-2 [input:focus-visible+&]:outline-[#4f46e5] motion-reduce:transition-none [&>svg]:hidden [input:checked+&]:[&>svg]:block" for="sk-4"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Design systems</label>
    <input class="sr-only" type="checkbox" id="sk-5"><label class="inline-flex h-[34px] cursor-pointer items-center gap-1.5 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.85rem] font-medium text-[#1e293b] transition-[background-color,border-color,color] duration-150 hover:border-[#94a3b8] [input:checked+&]:border-[#4f46e5] [input:checked+&]:bg-[#4f46e5] [input:checked+&]:pl-2.5 [input:checked+&]:font-semibold [input:checked+&]:text-white [input:focus-visible+&]:outline-2 [input:focus-visible+&]:outline-offset-2 [input:focus-visible+&]:outline-[#4f46e5] motion-reduce:transition-none [&>svg]:hidden [input:checked+&]:[&>svg]:block" for="sk-5"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>User research</label>
    <input class="sr-only" type="checkbox" id="sk-6"><label class="inline-flex h-[34px] cursor-pointer items-center gap-1.5 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.85rem] font-medium text-[#1e293b] transition-[background-color,border-color,color] duration-150 hover:border-[#94a3b8] [input:checked+&]:border-[#4f46e5] [input:checked+&]:bg-[#4f46e5] [input:checked+&]:pl-2.5 [input:checked+&]:font-semibold [input:checked+&]:text-white [input:focus-visible+&]:outline-2 [input:focus-visible+&]:outline-offset-2 [input:focus-visible+&]:outline-[#4f46e5] motion-reduce:transition-none [&>svg]:hidden [input:checked+&]:[&>svg]:block" for="sk-6"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Prototyping</label>
  </div>
  <p class="mt-3.5 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[.84rem] text-[#334155]">
    <span class="hidden items-center gap-1.5 rounded-full bg-[#eef2ff] py-[3px] pr-2.5 pl-1 font-bold text-[#3730a3] group-has-checked:inline-flex"><b class="pick-n grid h-5 min-w-5 place-items-center rounded-full bg-[#4f46e5] px-[5px] text-[.72rem] text-white"></b>picked</span>
    <span class="text-[#526072] group-has-checked:hidden">Nothing picked yet</span>
    <span class="hidden items-center gap-1.5 font-semibold text-[#9a3412] group-has-[input:checked~input:checked~input:checked~input:checked]:inline-flex"><svg class="size-[15px]" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2.5l6 10.5H2z"/><path d="M8 7v2.5M8 11.5h.01"/></svg>Only your first 3 picks show on your profile</span>
  </p>
</fieldset></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">color-mix() tints · one colour per badge and avatar</span>
<ul class="flex flex-wrap items-center gap-2.5">
  <li><span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[.76rem] leading-[1.25] font-bold whitespace-nowrap bg-[color:color-mix(in_oklab,var(--c)_11%,white)] border-[color:color-mix(in_oklab,var(--c)_38%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] before:size-[7px] before:rounded-[2px] before:bg-(--c) [--c:#db2777]">Design</span></li>
  <li><span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[.76rem] leading-[1.25] font-bold whitespace-nowrap bg-[color:color-mix(in_oklab,var(--c)_11%,white)] border-[color:color-mix(in_oklab,var(--c)_38%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] before:size-[7px] before:rounded-[2px] before:bg-(--c) [--c:#2563eb]">Backend</span></li>
  <li><span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[.76rem] leading-[1.25] font-bold whitespace-nowrap bg-[color:color-mix(in_oklab,var(--c)_11%,white)] border-[color:color-mix(in_oklab,var(--c)_38%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] before:size-[7px] before:rounded-[2px] before:bg-(--c) [--c:#0d9488]">Infrastructure</span></li>
  <li><span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[.76rem] leading-[1.25] font-bold whitespace-nowrap bg-[color:color-mix(in_oklab,var(--c)_11%,white)] border-[color:color-mix(in_oklab,var(--c)_38%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] before:size-[7px] before:rounded-[2px] before:bg-(--c) [--c:#7c3aed]">Research</span></li>
  <li><span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[.76rem] leading-[1.25] font-bold whitespace-nowrap bg-[color:color-mix(in_oklab,var(--c)_11%,white)] border-[color:color-mix(in_oklab,var(--c)_38%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] before:size-[7px] before:rounded-[2px] before:bg-(--c) [--c:#ca8a04]">Docs</span></li>
  <li><span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[.76rem] leading-[1.25] font-bold whitespace-nowrap bg-[color:color-mix(in_oklab,var(--c)_11%,white)] border-[color:color-mix(in_oklab,var(--c)_38%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] before:size-[7px] before:rounded-[2px] before:bg-(--c) [--c:#dc2626]">Urgent</span></li>
</ul>
<ul class="mt-4 flex flex-wrap items-center gap-2.5">
  <li><span class="grid size-11 flex-none place-items-center rounded-[14px] text-[.88rem] font-extrabold bg-[color:color-mix(in_oklab,var(--c)_15%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--c)_30%,white)] [--c:#db2777]" role="img" aria-label="Ines Duarte">ID</span></li>
  <li><span class="grid size-11 flex-none place-items-center rounded-[14px] text-[.88rem] font-extrabold bg-[color:color-mix(in_oklab,var(--c)_15%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--c)_30%,white)] [--c:#2563eb]" role="img" aria-label="Omar Aziz">OA</span></li>
  <li><span class="grid size-11 flex-none place-items-center rounded-[14px] text-[.88rem] font-extrabold bg-[color:color-mix(in_oklab,var(--c)_15%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--c)_30%,white)] [--c:#0d9488]" role="img" aria-label="Hana Sato">HS</span></li>
  <li><span class="grid size-11 flex-none place-items-center rounded-[14px] text-[.88rem] font-extrabold bg-[color:color-mix(in_oklab,var(--c)_15%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--c)_30%,white)] [--c:#7c3aed]" role="img" aria-label="Priya Nair">PN</span></li>
  <li><span class="grid size-11 flex-none place-items-center rounded-[14px] text-[.88rem] font-extrabold bg-[color:color-mix(in_oklab,var(--c)_15%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--c)_30%,white)] [--c:#ca8a04]" role="img" aria-label="Kai Moreno">KM</span></li>
  <li><span class="grid size-11 flex-none place-items-center rounded-[14px] text-[.88rem] font-extrabold bg-[color:color-mix(in_oklab,var(--c)_15%,white)] text-[color:color-mix(in_oklab,var(--c)_68%,black)] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--c)_30%,white)] [--c:#dc2626]" role="img" aria-label="Femi Adeyemi">FA</span></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Container-query member list · same markup in three slots</span>
<div class="flex flex-wrap items-start gap-4">
  <div class="flex-[0_1_220px] rounded-[14px] border-[1.5px] border-dashed border-[#94a3b8] p-3"><span class="mb-2.5 block text-[.7rem] font-semibold text-[#526072]">Narrow slot: stack</span>
    <div class="@container"><ul class="flex @min-[300px]:flex-col @min-[300px]:gap-3 @min-[520px]:grid @min-[520px]:grid-cols-2" aria-label="Design team">
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#4f46e5] to-[#9333ea]" aria-hidden="true">LV</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Lena Vogt</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Design lead</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#0f766e] to-[#0369a1]" aria-hidden="true">OA</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Omar Aziz</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Product designer</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#c2410c] to-[#be185d]" aria-hidden="true">JP</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">June Park</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Illustrator</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#334155] to-[#475569]" aria-hidden="true">TR</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Tomás Ruiz</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Researcher</small></span></li>
    </ul></div></div>
  <div class="max-w-[400px] flex-[1_1_360px] rounded-[14px] border-[1.5px] border-dashed border-[#94a3b8] p-3"><span class="mb-2.5 block text-[.7rem] font-semibold text-[#526072]">Medium slot: list</span>
    <div class="@container"><ul class="flex @min-[300px]:flex-col @min-[300px]:gap-3 @min-[520px]:grid @min-[520px]:grid-cols-2" aria-label="Design team">
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#4f46e5] to-[#9333ea]" aria-hidden="true">LV</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Lena Vogt</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Design lead</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#0f766e] to-[#0369a1]" aria-hidden="true">OA</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Omar Aziz</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Product designer</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#c2410c] to-[#be185d]" aria-hidden="true">JP</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">June Park</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Illustrator</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#334155] to-[#475569]" aria-hidden="true">TR</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Tomás Ruiz</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Researcher</small></span></li>
    </ul></div></div>
  <div class="flex-[1_1_100%] rounded-[14px] border-[1.5px] border-dashed border-[#94a3b8] p-3"><span class="mb-2.5 block text-[.7rem] font-semibold text-[#526072]">Wide slot: grid</span>
    <div class="@container"><ul class="flex @min-[300px]:flex-col @min-[300px]:gap-3 @min-[520px]:grid @min-[520px]:grid-cols-2" aria-label="Design team">
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#4f46e5] to-[#9333ea]" aria-hidden="true">LV</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Lena Vogt</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Design lead</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#0f766e] to-[#0369a1]" aria-hidden="true">OA</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Omar Aziz</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Product designer</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#c2410c] to-[#be185d]" aria-hidden="true">JP</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">June Park</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Illustrator</small></span></li>
      <li class="flex min-w-0 items-center gap-3 @min-[520px]:rounded-[14px] @min-[520px]:border @min-[520px]:border-[#e2e8f0] @min-[520px]:bg-white @min-[520px]:p-3 -ml-1.5 @min-[300px]:ml-0"><span class="grid size-10 flex-none place-items-center rounded-full bg-linear-135 text-[.82rem] font-bold text-white shadow-[0_0_0_2.5px_#f8fafc] @min-[520px]:shadow-none from-[#334155] to-[#475569]" aria-hidden="true">TR</span><span class="sr-only @min-[300px]:not-sr-only @min-[300px]:min-w-0"><b class="block text-[.9rem] text-[#0f172a]">Tomás Ruiz</b><small class="mt-px block truncate text-[.78rem] text-[#526072]">Researcher</small></span></li>
    </ul></div></div>
</div></div>

CSS

/* The pick counter: every checked chip increments it, and the number is printed into the badge. */
.pick{counter-reset:pick}
.pick input:checked{counter-increment:pick}
.pick-n::before{content:counter(pick)}

About this set

Three patterns that usually need JavaScript, done with current CSS. The chip picker asks for up to three skills: checked chips fill in, a CSS counter prints how many are picked into a small badge, the card gains a soft ring once anything is chosen, a Nothing picked yet line shows when the selection is empty, and a warning appears as soon as a fourth chip is checked. All of it is :has() and sibling selectors on native checkboxes. The colour-mixed row builds each badge and soft avatar from a single –c colour, with color-mix() deriving the tint, border and dark text, so a new label needs one value. The member list sits in a container query and changes layout with the width of its slot rather than the window: an overlapping stack below 300 pixels, a list with names and roles from 300, and a two-column grid of cards from 520. Below 300 pixels the names are visually hidden but still read by screen readers. Use the picker for profile and onboarding forms, the tints for user-defined labels, and the member list in sidebars, cards and pages.

What’s included

:has() picker that counts with a CSS counter and warns past three
color-mix() tints, borders and text from one --c colour
Container query member list: stack, list or grid by slot width
Names stay available to screen readers in the compact stack
No JavaScript in any of the three

Accessibility

The picker is a fieldset with a legend and native checkboxes, so each chip announces its own checked state, and the counter is CSS generated content that most screen readers read but do not announce as it changes. Tints use 68 percent of the colour mixed with black for text, which passes 4.5 to 1 on the light tint. Chips show a 2px indigo focus outline, and the card ring and chip transitions switch off under prefers-reduced-motion.

Customise it

Change --c on any .tint or .tav to recolour it, or the percentages in color-mix() to make tints stronger. The container breakpoints are the two @container mlist rules, and the pick limit is the number of input:checked steps in the warning selector. Bootstrap uses .btn-check and .badge; in Tailwind edit the [--c:] value and the @min-[300px] and @min-[520px] variants.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Badges & Avatars