Open demo

CSS code

HTML 
<div class="cq-set"><span class="lbl">One widget, three widths (container queries)</span>
<div class="cq-demo">
<div class="cq-wrap is-narrow">
<article class="cq-card">
  <div class="cq-head"><h3 class="cq-title">Active trials</h3><span class="cq-period">Week 42</span></div>
  <div class="cq-main"><p class="cq-value">1,248</p><p class="cq-delta"><span class="cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="cq-spark" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="ln" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="cq-stats"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
<div class="cq-wrap is-medium">
<article class="cq-card">
  <div class="cq-head"><h3 class="cq-title">Active trials</h3><span class="cq-period">Week 42</span></div>
  <div class="cq-main"><p class="cq-value">1,248</p><p class="cq-delta"><span class="cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="cq-spark" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="ln" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="cq-stats"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
<div class="cq-wrap">
<article class="cq-card">
  <div class="cq-head"><h3 class="cq-title">Active trials</h3><span class="cq-period">Week 42</span></div>
  <div class="cq-main"><p class="cq-value">1,248</p><p class="cq-delta"><span class="cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="cq-spark" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="ln" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="cq-stats"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
</div></div>

<div class="cq-set"><span class="lbl">Stat cards on subgrid rows</span>
<div class="sg-board">
  <article class="sg-card"><div class="sg-head"><h3 class="cq-title">Signups</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg></span></div>
    <p class="cq-value">2,904</p><p class="cq-delta"><span class="cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+11.3%</span>vs September</p></article>
  <article class="sg-card"><div class="sg-head"><h3 class="cq-title">Average revenue per account</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span></div>
    <p class="cq-value">$37.03</p><p class="cq-delta"><span class="cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+$1.20</span>vs September</p></article>
  <article class="sg-card"><div class="sg-head"><h3 class="cq-title">Trial to paid</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span></div>
    <p class="cq-value">17.1%</p><p class="cq-delta"><span class="cq-pill is-bad"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>−0.6 pts</span>vs September</p></article>
  <article class="sg-card"><div class="sg-head"><h3 class="cq-title">Refunds</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg></span></div>
    <p class="cq-value">$1,284</p><p class="cq-delta"><span class="cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>−18%</span>lower is better</p></article>
</div></div>

<div class="cq-set"><span class="lbl">Conic-gradient donut, narrow and wide</span>
<div class="dn-row">
<div class="dn-wrap">
<section class="dn-card" aria-labelledby="dn-t1">
  <div class="dn-head"><h3 class="cq-title" id="dn-t1">Plan mix, paying accounts</h3><p class="cq-period">October 16 · 3,069 accounts</p></div>
  <div class="dn-figure"><div class="dn-ring" aria-hidden="true"></div><p class="dn-total" aria-hidden="true">3,069<small>accounts</small></p></div>
  <ul class="dn-legend">
      <li><i style="background:#2a78d6"></i><span>Starter</span><b>1,412</b><span>46%</span></li>
      <li><i style="background:#eb6834"></i><span>Growth</span><b>982</b><span>32%</span></li>
      <li><i style="background:#1baf7a"></i><span>Scale</span><b>491</b><span>16%</span></li>
      <li><i style="background:#eda100"></i><span>Enterprise</span><b>184</b><span>6%</span></li>
  </ul>
</section></div>
<div class="dn-wrap">
<section class="dn-card" aria-labelledby="dn-t2">
  <div class="dn-head"><h3 class="cq-title" id="dn-t2">Plan mix, paying accounts</h3><p class="cq-period">October 16 · 3,069 accounts</p></div>
  <div class="dn-figure"><div class="dn-ring" aria-hidden="true"></div><p class="dn-total" aria-hidden="true">3,069<small>accounts</small></p></div>
  <ul class="dn-legend">
      <li><i style="background:#2a78d6"></i><span>Starter</span><b>1,412</b><span>46%</span></li>
      <li><i style="background:#eb6834"></i><span>Growth</span><b>982</b><span>32%</span></li>
      <li><i style="background:#1baf7a"></i><span>Scale</span><b>491</b><span>16%</span></li>
      <li><i style="background:#eda100"></i><span>Enterprise</span><b>184</b><span>6%</span></li>
  </ul>
</section></div>
</div></div>
CSS 
/* Modern CSS widgets. Each widget sits in a size container and rearranges itself from its own width
   (@container), not the viewport's; the stat cards share row tracks through subgrid so their values line up;
   the donut is a conic-gradient with a radial mask. No JavaScript. */
.cq-set{--cq-ink:#1e1b2e;--cq-muted:#57546a;--cq-line:#e4e2ee;--cq-surface:#fff;--cq-accent:#6250d6;--cq-good:#15803d;--cq-good-bg:#dcfce7;--cq-bad:#b91c1c;--cq-bad-bg:#fee2e2;color:var(--cq-ink)}
.cq-card,.sg-card,.dn-card{background:var(--cq-surface);border:1px solid var(--cq-line);border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(30,27,46,.05),0 10px 28px rgba(98,80,214,.08);min-width:0}
.cq-title{font-size:.84rem;font-weight:600;color:var(--cq-muted)}
.cq-period{font-size:.74rem;color:var(--cq-muted)}
.cq-value{font-size:1.9rem;font-weight:750;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.cq-delta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--cq-muted)}
.cq-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.cq-pill svg{width:14px;height:14px}
.cq-pill.is-good{color:var(--cq-good);background:var(--cq-good-bg)}
.cq-pill.is-bad{color:var(--cq-bad);background:var(--cq-bad-bg)}
/* 1. container-query widget */
.cq-demo{display:flex;flex-direction:column;gap:18px}
.cq-wrap{container-type:inline-size}
.cq-wrap.is-narrow{max-width:250px}
.cq-wrap.is-medium{max-width:440px}
.cq-card{display:grid;gap:10px 18px;grid-template-areas:"head" "main" "spark" "stats"}
.cq-head{grid-area:head;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cq-main{grid-area:main;display:flex;flex-direction:column;gap:6px}
.cq-card .cq-value{font-size:clamp(1.7rem,9cqi,2.8rem)}
.cq-spark{grid-area:spark;display:block;width:100%;height:48px;overflow:visible;align-self:end}
.cq-spark .ln{fill:none;stroke:var(--cq-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cq-spark .ar{fill:var(--cq-accent);opacity:.12}
.cq-stats{grid-area:stats;display:grid;gap:6px;border-top:1px solid var(--cq-line);padding-top:10px;font-size:.8rem}
.cq-stats div{display:flex;justify-content:space-between;gap:8px}
.cq-stats dt{color:var(--cq-muted)}
.cq-stats dd{font-weight:700;font-variant-numeric:tabular-nums}
@container (min-width:340px){
  .cq-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "main spark" "stats stats"}
  .cq-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cq-stats div{flex-direction:column;gap:0}
  .cq-spark{height:56px}
}
@container (min-width:620px){
  .cq-card{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 200px;grid-template-areas:"head head stats" "main spark stats";padding:22px}
  .cq-stats{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--cq-line);padding:0 0 0 18px;align-content:center;gap:12px}
  .cq-stats dd{font-size:1.05rem}
  .cq-spark{height:72px}
}
/* 2. subgrid board */
.sg-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px}
.sg-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:8px}
.sg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sg-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#efedfb;color:var(--cq-accent)}
.sg-icon svg{width:18px;height:18px}
.sg-card .cq-value{align-self:end}
/* 3. conic-gradient donut */
.dn-wrap{container-type:inline-size}
.dn-card{display:grid;gap:18px;justify-items:center}
.dn-head{justify-self:stretch}
.dn-ring{position:relative;width:min(100%,190px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#2a78d6 0% 45.6%, var(--cq-surface) 45.6% 46%, #eb6834 46% 77.6%, var(--cq-surface) 77.6% 78%, #1baf7a 78% 93.6%, var(--cq-surface) 93.6% 94%, #eda100 94% 99.6%, var(--cq-surface) 99.6% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent 61%,#000 calc(61% + 1px));mask:radial-gradient(farthest-side,transparent 61%,#000 calc(61% + 1px))}
.dn-figure{position:relative;display:grid;place-items:center;width:min(100%,190px)}
.dn-total{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:1.5rem;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.dn-total small{display:block;font-size:.72rem;font-weight:500;color:var(--cq-muted)}
.dn-legend{list-style:none;display:grid;gap:9px;font-size:.86rem;justify-self:stretch}
.dn-legend li{display:grid;grid-template-columns:12px 1fr auto 3.5ch;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.dn-legend i{width:12px;height:12px;border-radius:3px}
.dn-legend b{font-weight:700}
.dn-legend span:last-child{color:var(--cq-muted);text-align:right}
@container (min-width:460px){
  .dn-card{grid-template-columns:190px minmax(0,1fr);grid-template-areas:"head head" "ring legend";align-items:center;column-gap:32px;padding:22px}
  .dn-head{grid-area:head}
  .dn-figure{grid-area:ring}
  .dn-legend{grid-area:legend;max-width:380px}
}
.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}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="cq-set"><span class="lbl">One widget, three widths (container queries)</span>
<div class="cq-demo">
<div class="cq-wrap is-narrow">
<article class="card cq-card">
  <div class="cq-head"><h3 class="cq-title">Active trials</h3><span class="cq-period">Week 42</span></div>
  <div class="cq-main"><p class="cq-value">1,248</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="cq-spark" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="ln" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="cq-stats mb-0"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
<div class="cq-wrap is-medium">
<article class="card cq-card">
  <div class="cq-head"><h3 class="cq-title">Active trials</h3><span class="cq-period">Week 42</span></div>
  <div class="cq-main"><p class="cq-value">1,248</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="cq-spark" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="ln" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="cq-stats mb-0"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
<div class="cq-wrap">
<article class="card cq-card">
  <div class="cq-head"><h3 class="cq-title">Active trials</h3><span class="cq-period">Week 42</span></div>
  <div class="cq-main"><p class="cq-value">1,248</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="cq-spark" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="ln" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="cq-stats mb-0"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
</div></div>

<div class="cq-set"><span class="lbl">Stat cards on subgrid rows</span>
<div class="sg-board">
  <article class="card sg-card"><div class="sg-head"><h3 class="cq-title">Signups</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg></span></div>
    <p class="cq-value">2,904</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+11.3%</span>vs September</p></article>
  <article class="card sg-card"><div class="sg-head"><h3 class="cq-title">Average revenue per account</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span></div>
    <p class="cq-value">$37.03</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+$1.20</span>vs September</p></article>
  <article class="card sg-card"><div class="sg-head"><h3 class="cq-title">Trial to paid</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span></div>
    <p class="cq-value">17.1%</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-bad"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>−0.6 pts</span>vs September</p></article>
  <article class="card sg-card"><div class="sg-head"><h3 class="cq-title">Refunds</h3><span class="sg-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg></span></div>
    <p class="cq-value">$1,284</p><p class="cq-delta"><span class="badge rounded-pill cq-pill is-good"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>−18%</span>lower is better</p></article>
</div></div>

<div class="cq-set"><span class="lbl">Conic-gradient donut, narrow and wide</span>
<div class="dn-row">
<div class="dn-wrap">
<section class="card dn-card" aria-labelledby="dn-t1">
  <div class="dn-head"><h3 class="cq-title" id="dn-t1">Plan mix, paying accounts</h3><p class="cq-period">October 16 · 3,069 accounts</p></div>
  <div class="dn-figure"><div class="dn-ring" aria-hidden="true"></div><p class="dn-total" aria-hidden="true">3,069<small>accounts</small></p></div>
  <ul class="dn-legend list-unstyled mb-0">
      <li><i style="background:#2a78d6"></i><span>Starter</span><b>1,412</b><span>46%</span></li>
      <li><i style="background:#eb6834"></i><span>Growth</span><b>982</b><span>32%</span></li>
      <li><i style="background:#1baf7a"></i><span>Scale</span><b>491</b><span>16%</span></li>
      <li><i style="background:#eda100"></i><span>Enterprise</span><b>184</b><span>6%</span></li>
  </ul>
</section></div>
<div class="dn-wrap">
<section class="card dn-card" aria-labelledby="dn-t2">
  <div class="dn-head"><h3 class="cq-title" id="dn-t2">Plan mix, paying accounts</h3><p class="cq-period">October 16 · 3,069 accounts</p></div>
  <div class="dn-figure"><div class="dn-ring" aria-hidden="true"></div><p class="dn-total" aria-hidden="true">3,069<small>accounts</small></p></div>
  <ul class="dn-legend list-unstyled mb-0">
      <li><i style="background:#2a78d6"></i><span>Starter</span><b>1,412</b><span>46%</span></li>
      <li><i style="background:#eb6834"></i><span>Growth</span><b>982</b><span>32%</span></li>
      <li><i style="background:#1baf7a"></i><span>Scale</span><b>491</b><span>16%</span></li>
      <li><i style="background:#eda100"></i><span>Enterprise</span><b>184</b><span>6%</span></li>
  </ul>
</section></div>
</div></div>
CSS 
/* Bootstrap .card, .badge and .list-unstyled; Bootstrap has no container-query or subgrid utilities,
   so those rules live here. Modern CSS widgets. Each widget sits in a size container and rearranges itself from its own width
   (@container), not the viewport's; the stat cards share row tracks through subgrid so their values line up;
   the donut is a conic-gradient with a radial mask. No JavaScript. */
.cq-set p,.cq-set dl{margin:0}
.cq-set{--cq-ink:#1e1b2e;--cq-muted:#57546a;--cq-line:#e4e2ee;--cq-surface:#fff;--cq-accent:#6250d6;--cq-good:#15803d;--cq-good-bg:#dcfce7;--cq-bad:#b91c1c;--cq-bad-bg:#fee2e2;color:var(--cq-ink)}
.cq-card,.sg-card,.dn-card{--bs-card-bg:var(--cq-surface);--bs-card-border-color:var(--cq-line);--bs-card-border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(30,27,46,.05),0 10px 28px rgba(98,80,214,.08);min-width:0}
.cq-title{font-size:.84rem;font-weight:600;color:var(--cq-muted)}
.cq-period{font-size:.74rem;color:var(--cq-muted)}
.cq-value{font-size:1.9rem;font-weight:750;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.cq-delta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--cq-muted)}
.cq-pill{display:inline-flex;align-items:center;gap:3px;padding:3px 8px 3px 6px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.cq-pill svg{width:14px;height:14px}
.cq-pill.is-good{color:var(--cq-good);background:var(--cq-good-bg)}
.cq-pill.is-bad{color:var(--cq-bad);background:var(--cq-bad-bg)}
/* 1. container-query widget */
.cq-demo{display:flex;flex-direction:column;gap:18px}
.cq-wrap{container-type:inline-size}
.cq-wrap.is-narrow{max-width:250px}
.cq-wrap.is-medium{max-width:440px}
.cq-card{display:grid;gap:10px 18px;grid-template-areas:"head" "main" "spark" "stats"}
.cq-head{grid-area:head;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cq-main{grid-area:main;display:flex;flex-direction:column;gap:6px}
.cq-card .cq-value{font-size:clamp(1.7rem,9cqi,2.8rem)}
.cq-spark{grid-area:spark;display:block;width:100%;height:48px;overflow:visible;align-self:end}
.cq-spark .ln{fill:none;stroke:var(--cq-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cq-spark .ar{fill:var(--cq-accent);opacity:.12}
.cq-stats{grid-area:stats;display:grid;gap:6px;border-top:1px solid var(--cq-line);padding-top:10px;font-size:.8rem}
.cq-stats div{display:flex;justify-content:space-between;gap:8px}
.cq-stats dt{color:var(--cq-muted)}
.cq-stats dt{font-weight:400}
.cq-stats dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
@container (min-width:340px){
  .cq-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "main spark" "stats stats"}
  .cq-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cq-stats div{flex-direction:column;gap:0}
  .cq-spark{height:56px}
}
@container (min-width:620px){
  .cq-card{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 200px;grid-template-areas:"head head stats" "main spark stats";padding:22px}
  .cq-stats{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--cq-line);padding:0 0 0 18px;align-content:center;gap:12px}
  .cq-stats dd{font-size:1.05rem}
  .cq-spark{height:72px}
}
/* 2. subgrid board */
.sg-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px}
.sg-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:8px}
.sg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sg-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#efedfb;color:var(--cq-accent)}
.sg-icon svg{width:18px;height:18px}
.sg-card .cq-value{align-self:end}
/* 3. conic-gradient donut */
.dn-wrap{container-type:inline-size}
.dn-card{display:grid;gap:18px;justify-items:center}
.dn-head{justify-self:stretch}
.dn-ring{position:relative;width:min(100%,190px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#2a78d6 0% 45.6%, var(--cq-surface) 45.6% 46%, #eb6834 46% 77.6%, var(--cq-surface) 77.6% 78%, #1baf7a 78% 93.6%, var(--cq-surface) 93.6% 94%, #eda100 94% 99.6%, var(--cq-surface) 99.6% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent 61%,#000 calc(61% + 1px));mask:radial-gradient(farthest-side,transparent 61%,#000 calc(61% + 1px))}
.dn-figure{position:relative;display:grid;place-items:center;width:min(100%,190px)}
.dn-total{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:1.5rem;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.dn-total small{display:block;font-size:.72rem;font-weight:500;color:var(--cq-muted)}
.dn-legend{list-style:none;display:grid;gap:9px;font-size:.86rem;justify-self:stretch}
.dn-legend li{display:grid;grid-template-columns:12px 1fr auto 3.5ch;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.dn-legend i{width:12px;height:12px;border-radius:3px}
.dn-legend b{font-weight:700}
.dn-legend span:last-child{color:var(--cq-muted);text-align:right}
@container (min-width:460px){
  .dn-card{grid-template-columns:190px minmax(0,1fr);grid-template-areas:"head head" "ring legend";align-items:center;column-gap:32px;padding:22px}
  .dn-head{grid-area:head}
  .dn-figure{grid-area:ring}
  .dn-legend{grid-area:legend;max-width:380px}
}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-cq-muted uppercase">One widget, three widths (container queries)</span>
<div class="flex flex-col gap-[18px]">
<div class="@container max-w-[250px]">
<article class="grid gap-x-[18px] gap-y-2.5 [grid-template-areas:'head'_'main'_'spark'_'stats'] @min-[340px]:grid-cols-2 @min-[340px]:[grid-template-areas:'head_head'_'main_spark'_'stats_stats'] @min-[620px]:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)_200px] @min-[620px]:p-[22px] @min-[620px]:[grid-template-areas:'head_head_stats'_'main_spark_stats'] min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]">
  <div class="flex items-baseline justify-between gap-2 [grid-area:head]"><h3 class="text-[.84rem] font-semibold text-cq-muted">Active trials</h3><span class="text-[.74rem] text-cq-muted">Week 42</span></div>
  <div class="flex flex-col gap-1.5 [grid-area:main]"><p class="text-[clamp(1.7rem,9cqi,2.8rem)] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">1,248</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-good-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-good tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="block h-12 w-full self-end overflow-visible [grid-area:spark] @min-[340px]:h-14 @min-[620px]:h-[72px]" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="fill-cq-accent opacity-12" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="fill-none stroke-cq-accent stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="grid gap-1.5 border-t border-cq-line pt-2.5 text-[.8rem] [grid-area:stats] @min-[340px]:grid-cols-3 @min-[620px]:grid-cols-1 @min-[620px]:content-center @min-[620px]:gap-3 @min-[620px]:border-t-0 @min-[620px]:border-l @min-[620px]:pt-0 @min-[620px]:pl-[18px] [&>div]:flex [&>div]:justify-between [&>div]:gap-2 @min-[340px]:[&>div]:flex-col @min-[340px]:[&>div]:gap-0 [&_dt]:text-cq-muted [&_dd]:font-bold [&_dd]:tabular-nums @min-[620px]:[&_dd]:text-[1.05rem]"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
<div class="@container max-w-[440px]">
<article class="grid gap-x-[18px] gap-y-2.5 [grid-template-areas:'head'_'main'_'spark'_'stats'] @min-[340px]:grid-cols-2 @min-[340px]:[grid-template-areas:'head_head'_'main_spark'_'stats_stats'] @min-[620px]:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)_200px] @min-[620px]:p-[22px] @min-[620px]:[grid-template-areas:'head_head_stats'_'main_spark_stats'] min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]">
  <div class="flex items-baseline justify-between gap-2 [grid-area:head]"><h3 class="text-[.84rem] font-semibold text-cq-muted">Active trials</h3><span class="text-[.74rem] text-cq-muted">Week 42</span></div>
  <div class="flex flex-col gap-1.5 [grid-area:main]"><p class="text-[clamp(1.7rem,9cqi,2.8rem)] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">1,248</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-good-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-good tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="block h-12 w-full self-end overflow-visible [grid-area:spark] @min-[340px]:h-14 @min-[620px]:h-[72px]" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="fill-cq-accent opacity-12" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="fill-none stroke-cq-accent stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="grid gap-1.5 border-t border-cq-line pt-2.5 text-[.8rem] [grid-area:stats] @min-[340px]:grid-cols-3 @min-[620px]:grid-cols-1 @min-[620px]:content-center @min-[620px]:gap-3 @min-[620px]:border-t-0 @min-[620px]:border-l @min-[620px]:pt-0 @min-[620px]:pl-[18px] [&>div]:flex [&>div]:justify-between [&>div]:gap-2 @min-[340px]:[&>div]:flex-col @min-[340px]:[&>div]:gap-0 [&_dt]:text-cq-muted [&_dd]:font-bold [&_dd]:tabular-nums @min-[620px]:[&_dd]:text-[1.05rem]"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
<div class="@container">
<article class="grid gap-x-[18px] gap-y-2.5 [grid-template-areas:'head'_'main'_'spark'_'stats'] @min-[340px]:grid-cols-2 @min-[340px]:[grid-template-areas:'head_head'_'main_spark'_'stats_stats'] @min-[620px]:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)_200px] @min-[620px]:p-[22px] @min-[620px]:[grid-template-areas:'head_head_stats'_'main_spark_stats'] min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]">
  <div class="flex items-baseline justify-between gap-2 [grid-area:head]"><h3 class="text-[.84rem] font-semibold text-cq-muted">Active trials</h3><span class="text-[.74rem] text-cq-muted">Week 42</span></div>
  <div class="flex flex-col gap-1.5 [grid-area:main]"><p class="text-[clamp(1.7rem,9cqi,2.8rem)] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">1,248</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-good-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-good tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+9.2%</span>vs last week</p></div>
  <svg class="block h-12 w-full self-end overflow-visible [grid-area:spark] @min-[340px]:h-14 @min-[620px]:h-[72px]" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path class="fill-cq-accent opacity-12" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3L120 40L0 40Z"/><path class="fill-none stroke-cq-accent stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" vector-effect="non-scaling-stroke" d="M0 37L8.6 33.9L17.1 35.9L25.7 29.7L34.3 26.3L42.9 28.1L51.4 22.7L60 20.7L68.6 24.4L77.1 18L85.7 13.3L94.3 11L102.9 18L111.4 8.4L120 3"/></svg>
  <dl class="grid gap-1.5 border-t border-cq-line pt-2.5 text-[.8rem] [grid-area:stats] @min-[340px]:grid-cols-3 @min-[620px]:grid-cols-1 @min-[620px]:content-center @min-[620px]:gap-3 @min-[620px]:border-t-0 @min-[620px]:border-l @min-[620px]:pt-0 @min-[620px]:pl-[18px] [&>div]:flex [&>div]:justify-between [&>div]:gap-2 @min-[340px]:[&>div]:flex-col @min-[340px]:[&>div]:gap-0 [&_dt]:text-cq-muted [&_dd]:font-bold [&_dd]:tabular-nums @min-[620px]:[&_dd]:text-[1.05rem]"><div><dt>Converted</dt><dd>214</dd></div><div><dt>Expiring this week</dt><dd>96</dd></div><div><dt>Days to convert</dt><dd>9.4</dd></div></dl>
</article></div>
</div></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-cq-muted uppercase">Stat cards on subgrid rows</span>
<div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,210px),1fr))] gap-4">
  <article class="row-span-3 grid grid-rows-subgrid gap-2 min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]"><div class="flex items-start justify-between gap-2.5"><h3 class="text-[.84rem] font-semibold text-cq-muted">Signups</h3><span class="grid size-[34px] flex-none place-items-center rounded-[10px] bg-[#efedfb] text-cq-accent" aria-hidden="true"><svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg></span></div>
    <p class="self-end text-[1.9rem] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">2,904</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-good-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-good tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+11.3%</span>vs September</p></article>
  <article class="row-span-3 grid grid-rows-subgrid gap-2 min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]"><div class="flex items-start justify-between gap-2.5"><h3 class="text-[.84rem] font-semibold text-cq-muted">Average revenue per account</h3><span class="grid size-[34px] flex-none place-items-center rounded-[10px] bg-[#efedfb] text-cq-accent" aria-hidden="true"><svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span></div>
    <p class="self-end text-[1.9rem] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">$37.03</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-good-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-good tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>+$1.20</span>vs September</p></article>
  <article class="row-span-3 grid grid-rows-subgrid gap-2 min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]"><div class="flex items-start justify-between gap-2.5"><h3 class="text-[.84rem] font-semibold text-cq-muted">Trial to paid</h3><span class="grid size-[34px] flex-none place-items-center rounded-[10px] bg-[#efedfb] text-cq-accent" aria-hidden="true"><svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span></div>
    <p class="self-end text-[1.9rem] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">17.1%</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-bad-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-bad tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>−0.6 pts</span>vs September</p></article>
  <article class="row-span-3 grid grid-rows-subgrid gap-2 min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]"><div class="flex items-start justify-between gap-2.5"><h3 class="text-[.84rem] font-semibold text-cq-muted">Refunds</h3><span class="grid size-[34px] flex-none place-items-center rounded-[10px] bg-[#efedfb] text-cq-accent" aria-hidden="true"><svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg></span></div>
    <p class="self-end text-[1.9rem] leading-[1.15] font-[750] tracking-[-.02em] tabular-nums">$1,284</p><p class="flex flex-wrap items-center gap-2 text-[.8rem] text-cq-muted"><span class="inline-flex items-center gap-[3px] rounded-full bg-cq-good-bg py-0.5 pr-2 pl-1.5 text-[.78rem] font-bold text-cq-good tabular-nums"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>−18%</span>lower is better</p></article>
</div></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-cq-muted uppercase">Conic-gradient donut, narrow and wide</span>
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,300px),1fr))] gap-4">
<div class="@container">
<section class="grid justify-items-center gap-[18px] @min-[460px]:grid-cols-[190px_minmax(0,1fr)] @min-[460px]:items-center @min-[460px]:gap-x-8 @min-[460px]:p-[22px] @min-[460px]:[grid-template-areas:'head_head'_'ring_legend'] min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]" aria-labelledby="dn-t1">
  <div class="justify-self-stretch @min-[460px]:[grid-area:head]"><h3 class="text-[.84rem] font-semibold text-cq-muted" id="dn-t1">Plan mix, paying accounts</h3><p class="text-[.74rem] text-cq-muted">October 16 · 3,069 accounts</p></div>
  <div class="relative grid w-[min(100%,190px)] place-items-center @min-[460px]:[grid-area:ring]"><div class="aspect-square w-full rounded-full bg-[conic-gradient(#2a78d6_0%_45.6%,#fff_45.6%_46%,#eb6834_46%_77.6%,#fff_77.6%_78%,#1baf7a_78%_93.6%,#fff_93.6%_94%,#eda100_94%_99.6%,#fff_99.6%_100%)] [-webkit-mask:radial-gradient(farthest-side,transparent_61%,#000_calc(61%+1px))] [mask:radial-gradient(farthest-side,transparent_61%,#000_calc(61%+1px))]" aria-hidden="true"></div><p class="absolute inset-0 grid place-content-center text-center text-2xl leading-[1.1] font-[750] tabular-nums" aria-hidden="true">3,069<small class="block text-[.72rem] font-medium text-cq-muted">accounts</small></p></div>
  <ul class="grid gap-[9px] justify-self-stretch text-[.86rem] @min-[460px]:[grid-area:legend] @min-[460px]:max-w-[380px]">
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#2a78d6]"></i><span>Starter</span><b class="font-bold">1,412</b><span class="text-right text-cq-muted">46%</span></li>
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#eb6834]"></i><span>Growth</span><b class="font-bold">982</b><span class="text-right text-cq-muted">32%</span></li>
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#1baf7a]"></i><span>Scale</span><b class="font-bold">491</b><span class="text-right text-cq-muted">16%</span></li>
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#eda100]"></i><span>Enterprise</span><b class="font-bold">184</b><span class="text-right text-cq-muted">6%</span></li>
  </ul>
</section></div>
<div class="@container min-[701px]:col-span-2">
<section class="grid justify-items-center gap-[18px] @min-[460px]:grid-cols-[190px_minmax(0,1fr)] @min-[460px]:items-center @min-[460px]:gap-x-8 @min-[460px]:p-[22px] @min-[460px]:[grid-template-areas:'head_head'_'ring_legend'] min-w-0 rounded-[18px] border border-cq-line bg-white p-[18px] shadow-[0_1px_2px_rgba(30,27,46,.05),0_10px_28px_rgba(98,80,214,.08)]" aria-labelledby="dn-t2">
  <div class="justify-self-stretch @min-[460px]:[grid-area:head]"><h3 class="text-[.84rem] font-semibold text-cq-muted" id="dn-t2">Plan mix, paying accounts</h3><p class="text-[.74rem] text-cq-muted">October 16 · 3,069 accounts</p></div>
  <div class="relative grid w-[min(100%,190px)] place-items-center @min-[460px]:[grid-area:ring]"><div class="aspect-square w-full rounded-full bg-[conic-gradient(#2a78d6_0%_45.6%,#fff_45.6%_46%,#eb6834_46%_77.6%,#fff_77.6%_78%,#1baf7a_78%_93.6%,#fff_93.6%_94%,#eda100_94%_99.6%,#fff_99.6%_100%)] [-webkit-mask:radial-gradient(farthest-side,transparent_61%,#000_calc(61%+1px))] [mask:radial-gradient(farthest-side,transparent_61%,#000_calc(61%+1px))]" aria-hidden="true"></div><p class="absolute inset-0 grid place-content-center text-center text-2xl leading-[1.1] font-[750] tabular-nums" aria-hidden="true">3,069<small class="block text-[.72rem] font-medium text-cq-muted">accounts</small></p></div>
  <ul class="grid gap-[9px] justify-self-stretch text-[.86rem] @min-[460px]:[grid-area:legend] @min-[460px]:max-w-[380px]">
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#2a78d6]"></i><span>Starter</span><b class="font-bold">1,412</b><span class="text-right text-cq-muted">46%</span></li>
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#eb6834]"></i><span>Growth</span><b class="font-bold">982</b><span class="text-right text-cq-muted">32%</span></li>
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#1baf7a]"></i><span>Scale</span><b class="font-bold">491</b><span class="text-right text-cq-muted">16%</span></li>
      <li class="grid grid-cols-[12px_1fr_auto_3.5ch] items-center gap-2.5 tabular-nums"><i class="size-3 rounded-[3px] bg-[#eda100]"></i><span>Enterprise</span><b class="font-bold">184</b><span class="text-right text-cq-muted">6%</span></li>
  </ul>
</section></div>
</div></div>
CSS 
@theme {
  --color-cq-ink: #1e1b2e;
  --color-cq-muted: #57546a;
  --color-cq-line: #e4e2ee;
  --color-cq-accent: #6250d6;
  --color-cq-good: #15803d;
  --color-cq-good-bg: #dcfce7;
  --color-cq-bad: #b91c1c;
  --color-cq-bad-bg: #fee2e2;
}

About this set

Three widget patterns that usually need JavaScript or extra breakpoints, done in CSS. One widget, three widths places the same active-trials widget in a 250 px column, a 440 px column and a full-width row; container queries change its layout from its own width, not the viewport’s, so it stacks when narrow, sets the value beside the sparkline at medium width and moves the stats into a side column when wide, with the value sized in cqi units. Stat cards on subgrid rows puts four KPI cards in an auto-fill grid where each card spans three rows and uses grid-template-rows: subgrid, so values and footers line up across the row even when one title wraps onto two lines. Conic-gradient donut draws a plan-mix donut with conic-gradient and a radial mask, with thin gaps between segments, a total in the middle and a legend with counts and shares, and it switches from stacked to side by side through a container query. Drop these widgets into any column of a dashboard and they adapt without knowing where they are. No JavaScript.

What’s included

  • Container queries make each widget adapt to its own column
  • Value text sized with cqi container units
  • Subgrid keeps values aligned across a row of cards
  • CSS-only donut from conic-gradient and a radial mask
  • Legend prints every count and share
  • Tailwind version uses @container, @min-[...] and grid-rows-subgrid

Accessibility

Each widget is named by its heading, values and changes are plain text, and deltas pair a signed number and an arrow with words. The donut and sparklines are decorative and hidden from screen readers, because the legend and stats list carry the same numbers. Layout changes do not reorder the reading order.

Customise it

Change --cq-accent, --cq-line and --cq-surface on .cq-set, adjust the @container widths (340 px, 620 px and 460 px), and edit the colour stops in .dn-ring for the donut. In Tailwind edit the cq colours in @theme and the @min-[...] variants.