Open demo

CSS code

HTML 
<div><span class="lbl">Year-on-year comparison</span>
<div class="sx sx-cards">
  <article class="sx-card"><h3>Orders delivered, Jan–Sep 2026</h3><p class="sx-num">184,320</p>
    <p class="sx-delta"><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>Up 23% on 2025</p>
    <p class="sx-was">149,850 in the same months of 2025</p>
    <div class="sx-compare" aria-hidden="true"><span>2025</span><i style="--w:81%"></i><span>2026</span><i class="is-now" style="--w:100%"></i></div></article>
  <article class="sx-card"><h3>Average time to doorstep</h3><p class="sx-num">1.8 days</p>
    <p class="sx-delta"><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 days faster</p>
    <p class="sx-was">2.4 days in 2025</p>
    <div class="sx-compare" aria-hidden="true"><span>2025</span><i style="--w:100%"></i><span>2026</span><i class="is-now" style="--w:75%"></i></div></article>
  <article class="sx-card"><h3>Orders returned</h3><p class="sx-num">2.1%</p>
    <p class="sx-delta"><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>Down 1.3 pts, lower is better</p>
    <p class="sx-was">3.4% in 2025</p>
    <div class="sx-compare" aria-hidden="true"><span>2025</span><i style="--w:100%"></i><span>2026</span><i class="is-now" style="--w:62%"></i></div></article>
</div></div>

<div><span class="lbl">Shares with a target marker</span>
<ul class="sx sx-shares">
  <li class="sx-share"><p class="sx-num">84%</p><p>of orders packed and shipped the same day<small>Target 80%, the black tick on the bar</small></p>
    <div class="sx-bar" aria-hidden="true"><i style="--v:84%"></i><b style="--t:80%"></b></div></li>
  <li class="sx-share"><p class="sx-num">92%</p><p>of support chats solved in the first reply<small>Target 85%, up from 88% last quarter</small></p>
    <div class="sx-bar" aria-hidden="true"><i style="--v:92%"></i><b style="--t:85%"></b></div></li>
  <li class="sx-share"><p class="sx-num">67%</p><p>of customers order again within 12 months<small>Target 70%, still 3 points short</small></p>
    <div class="sx-bar" aria-hidden="true"><i style="--v:67%"></i><b style="--t:70%"></b></div></li>
</ul></div>

<div><span class="lbl">Footnoted stats with sources</span>
<section class="sx sx-noted" aria-label="Ferndale Pantry in numbers">
  <ul>
    <li><p class="sx-num">3 in 4</p><p>shoppers say delivery slots decide where they buy groceries<sup><a href="#sx-src-1" id="sx-ref-1" aria-label="Source 1">1</a></sup></p></li>
    <li><p class="sx-num">£38</p><p>average basket in 2026, up from £33 two years ago<sup><a href="#sx-src-2" id="sx-ref-2" aria-label="Source 2">2</a></sup></p></li>
    <li><p class="sx-num">11 kg</p><p>of CO₂ saved per household a year by grouping deliveries<sup><a href="#sx-src-3" id="sx-ref-3" aria-label="Source 3">3</a></sup></p></li>
  </ul>
  <div class="sx-sources"><h4>Sources</h4>
    <ol>
      <li id="sx-src-1">Halden Research, Online Grocery Habits 2026, survey of 2,014 UK adults, March 2026. <a href="#sx-ref-1" aria-label="Back to stat 1">↩︎</a></li>
      <li id="sx-src-2">Ferndale Pantry order data, January to September 2026, 184,320 orders. <a href="#sx-ref-2" aria-label="Back to stat 2">↩︎</a></li>
      <li id="sx-src-3">Greenmile Analytics estimate from 2025 route data; method note on request. <a href="#sx-ref-3" aria-label="Back to stat 3">↩︎</a></li>
    </ol>
    <p>Figures as of 30 September 2026.</p></div>
</section></div>
CSS 
/* Stats with context: every headline number carries its comparison, its share or its source in words.
   The small bars are decorative (aria-hidden) because the sentence beside them already states the value. */
.sx{--sx-ink:#0f172a;--sx-muted:#475569;--sx-line:#e2e8f0;--sx-accent:#1d4ed8;--sx-accent-soft:#dbe6fd;--sx-good:#166534;--sx-good-bg:#dcfce7;
  --sx-track:#e8edf3;color:var(--sx-ink)}
.sx-num{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 1. Year-on-year cards */
.sx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.sx-card{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -16px rgba(15,23,42,.2)}
.sx-card h3{font-size:.9rem;font-weight:600;color:var(--sx-muted)}
.sx-card .sx-num{font-size:2.5rem}
.sx-delta{display:inline-flex;align-items:center;gap:4px;width:fit-content;font-size:.8rem;font-weight:700;padding:3px 10px 3px 7px;
  border-radius:999px;color:var(--sx-good);background:var(--sx-good-bg);font-variant-numeric:tabular-nums}
.sx-delta svg{width:14px;height:14px}
.sx-was{font-size:.86rem;color:var(--sx-muted)}
.sx-compare{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;margin-top:4px;font-size:.74rem;color:var(--sx-muted);font-variant-numeric:tabular-nums}
.sx-compare i{display:block;height:8px;border-radius:99px;background:#94a3b8;width:var(--w)}
.sx-compare i.is-now{background:var(--sx-accent)}

/* 2. Share with a bar and a target marker */
.sx-shares{background:#fff;border:1px solid var(--sx-line);border-radius:20px;padding:8px 26px;list-style:none}
.sx-share{display:grid;grid-template-columns:7.5rem 1fr;gap:4px 22px;align-items:center;padding:20px 0}
.sx-share + .sx-share{border-top:1px solid var(--sx-line)}
.sx-share .sx-num{grid-row:span 2;font-size:2.6rem;color:var(--sx-accent)}
.sx-share p{font-weight:600}
.sx-share p small{display:block;font-weight:400;font-size:.84rem;color:var(--sx-muted)}
.sx-bar{position:relative;height:10px;border-radius:99px;background:var(--sx-track)}
.sx-bar i{position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,#3b6ff0,var(--sx-accent))}
.sx-bar b{position:absolute;top:-4px;bottom:-4px;left:var(--t);width:2px;background:var(--sx-ink);border-radius:2px}

/* 3. Footnoted stats with a source list */
.sx-noted{background:#fff;border:1px solid var(--sx-line);border-radius:20px;padding:clamp(22px,3.5vw,34px)}
.sx-noted ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;list-style:none}
.sx-noted ul .sx-num{font-size:clamp(2.2rem,4vw,2.8rem)}
.sx-noted ul p:last-child{margin-top:6px;color:#334155}
.sx-noted sup{font-size:.62em;line-height:0;vertical-align:super;margin-left:2px}
.sx-noted a{color:var(--sx-accent);font-weight:700;text-decoration:none;border-radius:3px;padding:0 2px}
.sx-noted a:hover{text-decoration:underline}
.sx-noted a:focus-visible{outline:2px solid var(--sx-accent);outline-offset:2px}
.sx-noted a:target,.sx-noted li:target{background:var(--sx-accent-soft)}
.sx-sources{margin-top:26px;padding-top:18px;border-top:1px solid var(--sx-line);font-size:.8rem;color:var(--sx-muted)}
.sx-sources h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sx-muted);margin-bottom:8px}
.sx-sources ol{padding-left:1.3em;display:grid;gap:4px}
.sx-sources li{border-radius:4px;padding:0 4px}
.sx-sources p{margin-top:8px}

@media (max-width:760px){.sx-noted ul{grid-template-columns:1fr;gap:20px}}
@media (max-width:480px){.sx-share{grid-template-columns:1fr}.sx-share .sx-num{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.sx *{transition:none;animation:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Year-on-year comparison</span>
<div class="sx row row-cols-1 row-cols-md-3 g-3">
  <div class="col"><article class="card h-100"><div class="card-body d-flex flex-column gap-2">
    <h3 class="mb-0">Orders delivered, Jan–Sep 2026</h3><p class="sx-num">184,320</p>
    <p class="badge rounded-pill sx-delta"><svg width="14" height="14" 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>Up 23% on 2025</p>
    <p class="small text-body-secondary">149,850 in the same months of 2025</p>
    <div class="sx-compare mt-1" aria-hidden="true"><span>2025</span><div class="progress"><div class="progress-bar" style="width:81%"></div></div><span>2026</span><div class="progress is-now"><div class="progress-bar" style="width:100%"></div></div></div>
  </div></article></div>
  <div class="col"><article class="card h-100"><div class="card-body d-flex flex-column gap-2">
    <h3 class="mb-0">Average time to doorstep</h3><p class="sx-num">1.8 days</p>
    <p class="badge rounded-pill sx-delta"><svg width="14" height="14" 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 days faster</p>
    <p class="small text-body-secondary">2.4 days in 2025</p>
    <div class="sx-compare mt-1" aria-hidden="true"><span>2025</span><div class="progress"><div class="progress-bar" style="width:100%"></div></div><span>2026</span><div class="progress is-now"><div class="progress-bar" style="width:75%"></div></div></div>
  </div></article></div>
  <div class="col"><article class="card h-100"><div class="card-body d-flex flex-column gap-2">
    <h3 class="mb-0">Orders returned</h3><p class="sx-num">2.1%</p>
    <p class="badge rounded-pill sx-delta text-wrap text-start"><svg width="14" height="14" 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>Down 1.3 pts, lower is better</p>
    <p class="small text-body-secondary">3.4% in 2025</p>
    <div class="sx-compare mt-1" aria-hidden="true"><span>2025</span><div class="progress"><div class="progress-bar" style="width:100%"></div></div><span>2026</span><div class="progress is-now"><div class="progress-bar" style="width:62%"></div></div></div>
  </div></article></div>
</div></div>

<div><span class="lbl">Shares with a target marker</span>
<ul class="sx list-group list-group-flush bg-white border rounded-4 px-4 py-2">
  <li class="list-group-item sx-share"><p class="sx-num">84%</p><p>of orders packed and shipped the same day<small class="d-block fw-normal text-body-secondary">Target 80%, the black tick on the bar</small></p>
    <div class="progress" aria-hidden="true"><div class="progress-bar" style="width:84%"></div><span class="sx-target" style="left:80%"></span></div></li>
  <li class="list-group-item sx-share"><p class="sx-num">92%</p><p>of support chats solved in the first reply<small class="d-block fw-normal text-body-secondary">Target 85%, up from 88% last quarter</small></p>
    <div class="progress" aria-hidden="true"><div class="progress-bar" style="width:92%"></div><span class="sx-target" style="left:85%"></span></div></li>
  <li class="list-group-item sx-share"><p class="sx-num">67%</p><p>of customers order again within 12 months<small class="d-block fw-normal text-body-secondary">Target 70%, still 3 points short</small></p>
    <div class="progress" aria-hidden="true"><div class="progress-bar" style="width:67%"></div><span class="sx-target" style="left:70%"></span></div></li>
</ul></div>

<div><span class="lbl">Footnoted stats with sources</span>
<section class="sx sx-noted card rounded-4 p-4" aria-label="Ferndale Pantry in numbers">
  <ul class="list-unstyled row row-cols-1 row-cols-md-3 g-4 mb-0">
    <li class="col"><p class="sx-num">3 in 4</p><p class="mt-2 text-secondary-emphasis">shoppers say delivery slots decide where they buy groceries<sup><a href="#sx-src-1" id="sx-ref-1" aria-label="Source 1">1</a></sup></p></li>
    <li class="col"><p class="sx-num">£38</p><p class="mt-2 text-secondary-emphasis">average basket in 2026, up from £33 two years ago<sup><a href="#sx-src-2" id="sx-ref-2" aria-label="Source 2">2</a></sup></p></li>
    <li class="col"><p class="sx-num">11 kg</p><p class="mt-2 text-secondary-emphasis">of CO₂ saved per household a year by grouping deliveries<sup><a href="#sx-src-3" id="sx-ref-3" aria-label="Source 3">3</a></sup></p></li>
  </ul>
  <div class="border-top mt-4 pt-3 small text-body-secondary" style="font-size:.8rem"><h4 class="text-uppercase fw-semibold mb-2" style="font-size:.74rem;letter-spacing:.1em">Sources</h4>
    <ol class="ps-3 mb-2 d-grid gap-1">
      <li id="sx-src-1">Halden Research, Online Grocery Habits 2026, survey of 2,014 UK adults, March 2026. <a href="#sx-ref-1" aria-label="Back to stat 1">↩︎</a></li>
      <li id="sx-src-2">Ferndale Pantry order data, January to September 2026, 184,320 orders. <a href="#sx-ref-2" aria-label="Back to stat 2">↩︎</a></li>
      <li id="sx-src-3">Greenmile Analytics estimate from 2025 route data; method note on request. <a href="#sx-ref-3" aria-label="Back to stat 3">↩︎</a></li>
    </ol>
    <p>Figures as of 30 September 2026.</p></div>
</section></div>
CSS 
/* Stats with context on Bootstrap: .card, .badge, .progress and .list-group, restyled through their CSS variables.
   The bars are aria-hidden because the text beside them already states each value. */
.sx{--sx-accent:#1d4ed8;--sx-line:#e2e8f0;--bs-secondary-color:#475569;--bs-border-color:#e2e8f0;color:#0f172a}
.sx p{margin:0}
.sx-num{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.sx .card{--bs-card-border-radius:18px;--bs-card-spacer-x:22px;--bs-card-spacer-y:22px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -16px rgba(15,23,42,.2)}
.sx .card h3{font-size:.9rem;font-weight:600;color:#475569}
.sx .card .sx-num{font-size:2.5rem}
.sx .badge.sx-delta{--bs-badge-font-size:.8rem;--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;color:#166534;background:#dcfce7;
  display:inline-flex;align-items:center;gap:4px;width:fit-content;font-variant-numeric:tabular-nums}
.sx-compare{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;font-size:.74rem;color:#475569}
.sx-compare .progress{--bs-progress-height:8px;--bs-progress-bg:transparent;--bs-progress-bar-bg:#94a3b8;--bs-progress-border-radius:99px}
.sx-compare .progress.is-now{--bs-progress-bar-bg:var(--sx-accent)}
.sx-compare .progress-bar{border-radius:99px}
.sx .list-group{--bs-list-group-border-color:var(--sx-line);--bs-list-group-item-padding-x:0;--bs-list-group-item-padding-y:20px}
.sx-share{display:grid;grid-template-columns:7.5rem 1fr;gap:4px 22px;align-items:center}
.sx-share .sx-num{grid-row:span 2;font-size:2.6rem;color:var(--sx-accent)}
.sx-share > p:nth-child(2){font-weight:600}
.sx-share .progress{--bs-progress-height:10px;--bs-progress-bg:#e8edf3;--bs-progress-border-radius:99px;position:relative;overflow:visible}
.sx-share .progress-bar{border-radius:99px;background:linear-gradient(90deg,#3b6ff0,var(--sx-accent))}
.sx-share .sx-target{position:absolute;top:-4px;bottom:-4px;width:2px;background:#0f172a;border-radius:2px}
.sx-noted sup{font-size:.62em;margin-left:2px}
.sx-noted a{color:var(--sx-accent);font-weight:700;text-decoration:none;border-radius:3px;padding:0 2px}
.sx-noted a:hover{text-decoration:underline}
.sx-noted a:focus-visible{outline:2px solid var(--sx-accent);outline-offset:2px;box-shadow:none}
.sx-noted a:target,.sx-noted li:target{background:#dbe6fd}
.sx-noted ol li{border-radius:4px;padding:0 4px}
.sx-noted ul .sx-num{font-size:clamp(2.2rem,4vw,2.8rem)}
@media (max-width:480px){.sx-share{grid-template-columns:1fr}.sx-share .sx-num{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.sx *{transition:none;animation:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Year-on-year comparison</span>
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,260px),1fr))] gap-[18px]">
  <article class="flex flex-col gap-2.5 rounded-[18px] border border-sx-line bg-white p-[22px] shadow-[0_1px_2px_rgba(15,23,42,.04),0_10px_26px_-16px_rgba(15,23,42,.2)]"><h3 class="text-[.9rem] font-semibold text-[#475569]">Orders delivered, Jan–Sep 2026</h3><p class="text-[2.5rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">184,320</p>
    <p class="inline-flex w-fit items-center gap-1 rounded-full bg-sx-good-bg py-[3px] pr-2.5 pl-[7px] text-[.8rem] font-bold text-sx-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>Up 23% on 2025</p>
    <p class="text-[.86rem] text-[#475569]">149,850 in the same months of 2025</p>
    <div class="mt-1 grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-1.5 text-[.74rem] text-[#475569] tabular-nums" aria-hidden="true"><span>2025</span><i class="block h-2 w-[81%] rounded-full bg-[#94a3b8]"></i><span>2026</span><i class="block h-2 w-full rounded-full bg-sx-accent"></i></div></article>
  <article class="flex flex-col gap-2.5 rounded-[18px] border border-sx-line bg-white p-[22px] shadow-[0_1px_2px_rgba(15,23,42,.04),0_10px_26px_-16px_rgba(15,23,42,.2)]"><h3 class="text-[.9rem] font-semibold text-[#475569]">Average time to doorstep</h3><p class="text-[2.5rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">1.8 days</p>
    <p class="inline-flex w-fit items-center gap-1 rounded-full bg-sx-good-bg py-[3px] pr-2.5 pl-[7px] text-[.8rem] font-bold text-sx-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>0.6 days faster</p>
    <p class="text-[.86rem] text-[#475569]">2.4 days in 2025</p>
    <div class="mt-1 grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-1.5 text-[.74rem] text-[#475569] tabular-nums" aria-hidden="true"><span>2025</span><i class="block h-2 w-full rounded-full bg-[#94a3b8]"></i><span>2026</span><i class="block h-2 w-[75%] rounded-full bg-sx-accent"></i></div></article>
  <article class="flex flex-col gap-2.5 rounded-[18px] border border-sx-line bg-white p-[22px] shadow-[0_1px_2px_rgba(15,23,42,.04),0_10px_26px_-16px_rgba(15,23,42,.2)]"><h3 class="text-[.9rem] font-semibold text-[#475569]">Orders returned</h3><p class="text-[2.5rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">2.1%</p>
    <p class="inline-flex w-fit items-center gap-1 rounded-full bg-sx-good-bg py-[3px] pr-2.5 pl-[7px] text-[.8rem] font-bold text-sx-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>Down 1.3 pts, lower is better</p>
    <p class="text-[.86rem] text-[#475569]">3.4% in 2025</p>
    <div class="mt-1 grid grid-cols-[auto_1fr] items-center gap-x-2.5 gap-y-1.5 text-[.74rem] text-[#475569] tabular-nums" aria-hidden="true"><span>2025</span><i class="block h-2 w-full rounded-full bg-[#94a3b8]"></i><span>2026</span><i class="block h-2 w-[62%] rounded-full bg-sx-accent"></i></div></article>
</div></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Shares with a target marker</span>
<ul class="rounded-[20px] border border-sx-line bg-white px-[26px] py-2">
  <li class="grid grid-cols-1 items-center gap-x-[22px] gap-y-1 py-5 min-[481px]:grid-cols-[7.5rem_1fr]"><p class="text-[2.6rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap text-sx-accent tabular-nums min-[481px]:row-span-2">84%</p><p class="font-semibold">of orders packed and shipped the same day<small class="block text-[.84rem] font-normal text-[#475569]">Target 80%, the black tick on the bar</small></p>
    <div class="relative h-2.5 rounded-full bg-[#e8edf3]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[84%] rounded-full bg-linear-to-r from-[#3b6ff0] to-sx-accent"></i><b class="absolute -inset-y-1 left-[80%] w-0.5 rounded-sm bg-[#0f172a]"></b></div></li>
  <li class="grid grid-cols-1 items-center gap-x-[22px] gap-y-1 border-t border-sx-line py-5 min-[481px]:grid-cols-[7.5rem_1fr]"><p class="text-[2.6rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap text-sx-accent tabular-nums min-[481px]:row-span-2">92%</p><p class="font-semibold">of support chats solved in the first reply<small class="block text-[.84rem] font-normal text-[#475569]">Target 85%, up from 88% last quarter</small></p>
    <div class="relative h-2.5 rounded-full bg-[#e8edf3]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[92%] rounded-full bg-linear-to-r from-[#3b6ff0] to-sx-accent"></i><b class="absolute -inset-y-1 left-[85%] w-0.5 rounded-sm bg-[#0f172a]"></b></div></li>
  <li class="grid grid-cols-1 items-center gap-x-[22px] gap-y-1 border-t border-sx-line py-5 min-[481px]:grid-cols-[7.5rem_1fr]"><p class="text-[2.6rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap text-sx-accent tabular-nums min-[481px]:row-span-2">67%</p><p class="font-semibold">of customers order again within 12 months<small class="block text-[.84rem] font-normal text-[#475569]">Target 70%, still 3 points short</small></p>
    <div class="relative h-2.5 rounded-full bg-[#e8edf3]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[67%] rounded-full bg-linear-to-r from-[#3b6ff0] to-sx-accent"></i><b class="absolute -inset-y-1 left-[70%] w-0.5 rounded-sm bg-[#0f172a]"></b></div></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Footnoted stats with sources</span>
<section class="rounded-[20px] border border-sx-line bg-white p-[clamp(22px,3.5vw,34px)]" aria-label="Ferndale Pantry in numbers">
  <ul class="grid grid-cols-1 gap-5 min-[761px]:grid-cols-3 min-[761px]:gap-[26px]">
    <li><p class="text-[clamp(2.2rem,4vw,2.8rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">3 in 4</p><p class="mt-1.5 text-[#334155]">shoppers say delivery slots decide where they buy groceries<sup class="ml-0.5 text-[.62em]"><a class="rounded-[3px] px-0.5 font-bold text-sx-accent no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sx-accent target:bg-sx-soft" href="#sx-src-1" id="sx-ref-1" aria-label="Source 1">1</a></sup></p></li>
    <li><p class="text-[clamp(2.2rem,4vw,2.8rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">£38</p><p class="mt-1.5 text-[#334155]">average basket in 2026, up from £33 two years ago<sup class="ml-0.5 text-[.62em]"><a class="rounded-[3px] px-0.5 font-bold text-sx-accent no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sx-accent target:bg-sx-soft" href="#sx-src-2" id="sx-ref-2" aria-label="Source 2">2</a></sup></p></li>
    <li><p class="text-[clamp(2.2rem,4vw,2.8rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">11 kg</p><p class="mt-1.5 text-[#334155]">of CO₂ saved per household a year by grouping deliveries<sup class="ml-0.5 text-[.62em]"><a class="rounded-[3px] px-0.5 font-bold text-sx-accent no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sx-accent target:bg-sx-soft" href="#sx-src-3" id="sx-ref-3" aria-label="Source 3">3</a></sup></p></li>
  </ul>
  <div class="mt-[26px] border-t border-sx-line pt-[18px] text-[.8rem] text-[#475569]"><h4 class="mb-2 text-[.74rem] tracking-[.1em] text-[#475569] uppercase">Sources</h4>
    <ol class="grid list-decimal gap-1 pl-[1.3em]">
      <li class="rounded px-1 target:bg-sx-soft" id="sx-src-1">Halden Research, Online Grocery Habits 2026, survey of 2,014 UK adults, March 2026. <a class="rounded-[3px] px-0.5 font-bold text-sx-accent no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sx-accent" href="#sx-ref-1" aria-label="Back to stat 1">↩︎</a></li>
      <li class="rounded px-1 target:bg-sx-soft" id="sx-src-2">Ferndale Pantry order data, January to September 2026, 184,320 orders. <a class="rounded-[3px] px-0.5 font-bold text-sx-accent no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sx-accent" href="#sx-ref-2" aria-label="Back to stat 2">↩︎</a></li>
      <li class="rounded px-1 target:bg-sx-soft" id="sx-src-3">Greenmile Analytics estimate from 2025 route data; method note on request. <a class="rounded-[3px] px-0.5 font-bold text-sx-accent no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sx-accent" href="#sx-ref-3" aria-label="Back to stat 3">↩︎</a></li>
    </ol>
    <p class="mt-2">Figures as of 30 September 2026.</p></div>
</section></div>
CSS 
/* Stats with context: theme tokens for the accent and the good-news green; bars are aria-hidden. */
@theme { --color-sx-accent: #1d4ed8; --color-sx-soft: #dbe6fd; --color-sx-line: #e2e8f0; --color-sx-good: #166534; --color-sx-good-bg: #dcfce7; }

About this set

Numbers that carry their own context, for annual reviews, case studies and pages where a bare figure would not be trusted. Year-on-year comparison shows each headline figure with a badge that says the change in words, the previous year’s value and two small bars comparing the years. Shares with a target marker lists percentages with a progress bar and a black tick at the target, with a line saying whether the target was met. Footnoted stats with sources adds numbered footnote links to each claim and a source list underneath with back links and an as-of date. Everything is static HTML and CSS. The bars are decorative, because the sentence beside each one already gives the value, and the footnotes are ordinary in-page links, so the :target selector highlights the source you jumped to. Use the comparison cards when the trend matters more than the number, the target bars for service levels, and footnotes whenever a figure comes from a survey or someone else’s data.

What’s included

  • Change badges that say up, down or faster in words, not colour alone
  • Previous-year values and comparison bars on every card
  • Target markers on percentage bars
  • Numbered footnotes with back links and a dated source list
  • Static HTML and CSS, no JavaScript

Accessibility

Every change is written out, for example Down 1.3 pts, lower is better, so meaning never depends on green or an arrow. Comparison and progress bars are aria-hidden because the text states each value. Footnote links have names such as Source 1 and Back to stat 1, show a focus outline, and the targeted source is highlighted. All text meets WCAG AA contrast.

Customise it

Change --sx-accent, --sx-good and --sx-good-bg on .sx, and the --w, --v and --t custom properties on each bar for its width and target. In Bootstrap the bars are .progress with style widths; in Tailwind edit the --color-sx-* theme colours and the w-[…] and left-[…] utilities.