Open demo

CSS code

HTML 
<div><span class="lbl">Icon strip</span>
<section class="ss ss-strip" aria-label="Larkline Freight at a glance">
  <div><span class="ss-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg></span>
    <div><p class="ss-num">1,850</p><p>shipments leave our hubs every day</p></div></div>
  <div><span class="ss-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg></span>
    <div><p class="ss-num">42</p><p>countries with door-to-door delivery</p></div></div>
  <div><span class="ss-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
    <div><p class="ss-num">99.2%</p><p>of parcels delivered on the promised day</p></div></div>
  <div><span class="ss-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
    <div><p class="ss-num">24/7</p><p>live tracking and a human on the phone</p></div></div>
</section></div>

<div><span class="lbl">Brand-colour band</span>
<section class="ss ss-band" aria-labelledby="ss-band-title">
  <h3 id="ss-band-title">Halyard Workspace since 2011</h3>
  <ul>
    <li><p class="ss-num">6</p><p>cities, from Leeds to Lisbon</p></li>
    <li><p class="ss-num">1,240</p><p>members working with us today</p></li>
    <li><p class="ss-num">38,000<small>m²</small></p><p>of desks, studios and meeting rooms</p></li>
    <li><p class="ss-num">4.8<small>/5</small></p><p>average member rating in 2026</p></li>
  </ul>
</section></div>

<div><span class="lbl">Split band with headline</span>
<section class="ss ss-split" aria-labelledby="ss-split-title">
  <div class="ss-copy"><p class="ss-eyebrow">Brookfield Family Clinic</p>
    <h3 id="ss-split-title">Eighteen years of care, close to home</h3>
    <p>One practice for the whole family, from first vaccinations to physiotherapy after a hip replacement.</p>
    <a class="ss-link" href="#">Meet our clinicians →</a></div>
  <ul class="ss-grid">
    <li><p class="ss-num">9,600</p><p>patients seen last year</p></li>
    <li><p class="ss-num">14</p><p>doctors, nurses and therapists</p></li>
    <li><p class="ss-num">92%</p><p>of urgent cases seen the same day</p></li>
    <li><p class="ss-num">4 min</p><p>average wait on the phone</p></li>
  </ul>
</section></div>

<div><span class="lbl">Compact proof strip</span>
<ul class="ss ss-proof" aria-label="Pebble Notes ratings and usage">
  <li><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg><strong>4.9</strong> from 2,300 reviews</li>
  <li><strong>60,000</strong> installs</li>
  <li><strong>140</strong> schools on the class plan</li>
</ul></div>
CSS 
/* Stats strips for landing pages. Static HTML and CSS: every number is plain text. */
.ss{--ss-ink:#0f172a;--ss-muted:#475569;--ss-line:#e2e8f0;--ss-accent:#0b7a5c;--ss-soft:#e3f4ee;color:var(--ss-ink)}
.ss-num{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.ss svg{flex:none}

/* 1. Icon strip: dividers are inset box-shadows, so they follow the items when the strip wraps */
.ss-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--ss-line);
  border-radius:20px;overflow:hidden;box-shadow:0 12px 32px -18px rgba(15,23,42,.18)}
.ss-strip > div{display:flex;align-items:center;gap:14px;padding:24px 22px;box-shadow:-1px 0 0 var(--ss-line),0 -1px 0 var(--ss-line)}
.ss-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ss-soft);color:var(--ss-accent)}
.ss-icon svg{width:24px;height:24px}
.ss-strip .ss-num{font-size:1.75rem}
.ss-strip p:last-child{font-size:.86rem;color:var(--ss-muted);line-height:1.35}

/* 2. Brand-colour band */
.ss-band{--ss-band:#0b3d4a;background:radial-gradient(120% 140% at 0% 0%,#14606f 0%,var(--ss-band) 55%);color:#fff;
  border-radius:24px;padding:40px clamp(22px,4vw,48px)}
.ss-band h3{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a9e3dc}
.ss-band ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px}
.ss-band li{padding:4px 22px;border-left:1px solid rgba(255,255,255,.22)}
.ss-band li:first-child{padding-left:0;border-left:0}
.ss-band .ss-num{font-size:clamp(2.2rem,4.6vw,3.2rem)}
.ss-band .ss-num small{font-size:.5em;font-weight:700;margin-left:3px;color:#a9e3dc}
.ss-band li p:last-child{margin-top:6px;font-size:.9rem;color:#d3ebe8}

/* 3. Split band: headline on the left, a 2 × 2 grid of stats on the right */
.ss-split{--ss-accent:#b4235a;--ss-soft:#fdf2f6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 48px;
  align-items:center;background:var(--ss-soft);border-radius:24px;padding:clamp(24px,4vw,44px)}
.ss-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-accent)}
.ss-split h3{margin-top:8px;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.ss-split .ss-copy p:not(.ss-eyebrow){margin-top:12px;color:#4a5363}
.ss-link{display:inline-block;margin-top:16px;font-weight:700;color:var(--ss-accent);text-decoration:none;border-radius:4px}
.ss-link:hover{text-decoration:underline}
.ss-link:focus-visible{outline:2px solid var(--ss-accent);outline-offset:3px}
.ss-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;list-style:none}
.ss-grid li{border-top:3px solid var(--ss-accent);padding-top:14px}
.ss-grid .ss-num{font-size:clamp(2rem,4vw,2.6rem)}
.ss-grid li p:last-child{margin-top:4px;font-size:.9rem;color:#4a5363}

/* 4. Compact proof strip for under a hero */
.ss-proof{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0;list-style:none;
  background:#fff;border:1px solid var(--ss-line);border-radius:999px;padding:12px 26px;width:fit-content;max-width:100%;margin:0 auto;font-size:.92rem;color:var(--ss-muted)}
.ss-proof li{display:flex;align-items:center;gap:6px;padding:0 16px}
.ss-proof li + li{border-left:1px solid var(--ss-line)}
.ss-proof strong{color:var(--ss-ink);font-variant-numeric:tabular-nums}
.ss-proof svg{width:18px;height:18px;color:#b45309}

@media (max-width:860px){
  .ss-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-band ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0}
  .ss-band li:nth-child(odd){padding-left:0;border-left:0}
  .ss-split{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ss-strip{grid-template-columns:1fr}
  .ss-proof{border-radius:18px;flex-direction:column;align-items:flex-start;padding:14px 18px}
  .ss-proof li{padding:0}.ss-proof li + li{border-left:0}
}
@media (max-width:400px){.ss-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ss *{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Icon strip</span>
<section class="ss ss-strip bg-white" aria-label="Larkline Freight at a glance"><div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-0">
  <div class="col d-flex align-items-center gap-3"><span class="ss-icon flex-shrink-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg></span>
    <div><p class="ss-num">1,850</p><p class="small text-body-secondary lh-sm">shipments leave our hubs every day</p></div></div>
  <div class="col d-flex align-items-center gap-3"><span class="ss-icon flex-shrink-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg></span>
    <div><p class="ss-num">42</p><p class="small text-body-secondary lh-sm">countries with door-to-door delivery</p></div></div>
  <div class="col d-flex align-items-center gap-3"><span class="ss-icon flex-shrink-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
    <div><p class="ss-num">99.2%</p><p class="small text-body-secondary lh-sm">of parcels delivered on the promised day</p></div></div>
  <div class="col d-flex align-items-center gap-3"><span class="ss-icon flex-shrink-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
    <div><p class="ss-num">24/7</p><p class="small text-body-secondary lh-sm">live tracking and a human on the phone</p></div></div>
</div></section></div>

<div><span class="lbl">Brand-colour band</span>
<section class="ss ss-band text-white" aria-labelledby="ss-band-title">
  <h3 class="fw-bold text-uppercase mb-0" id="ss-band-title">Halyard Workspace since 2011</h3>
  <ul class="list-unstyled row row-cols-2 row-cols-md-4 gx-0 gy-4 mt-1 mb-0">
    <li class="col"><p class="ss-num">6</p><p>cities, from Leeds to Lisbon</p></li>
    <li class="col"><p class="ss-num">1,240</p><p>members working with us today</p></li>
    <li class="col"><p class="ss-num">38,000<small>m²</small></p><p>of desks, studios and meeting rooms</p></li>
    <li class="col"><p class="ss-num">4.8<small>/5</small></p><p>average member rating in 2026</p></li>
  </ul>
</section></div>

<div><span class="lbl">Split band with headline</span>
<section class="ss ss-split" aria-labelledby="ss-split-title"><div class="row g-4 gx-lg-5 align-items-center">
  <div class="col-lg-5"><p class="small fw-bold text-uppercase text-accent" style="letter-spacing:.12em">Brookfield Family Clinic</p>
    <h3 class="fw-bold mt-2 mb-0" id="ss-split-title">Eighteen years of care, close to home</h3>
    <p class="lead-copy mt-3">One practice for the whole family, from first vaccinations to physiotherapy after a hip replacement.</p>
    <a class="ss-link fw-bold d-inline-block mt-3" href="#">Meet our clinicians →</a></div>
  <div class="col-lg-7"><ul class="list-unstyled row row-cols-1 row-cols-sm-2 g-4 mb-0">
    <li class="col"><p class="ss-num">9,600</p><p>patients seen last year</p></li>
    <li class="col"><p class="ss-num">14</p><p>doctors, nurses and therapists</p></li>
    <li class="col"><p class="ss-num">92%</p><p>of urgent cases seen the same day</p></li>
    <li class="col"><p class="ss-num">4 min</p><p>average wait on the phone</p></li>
  </ul></div>
</div></section></div>

<div><span class="lbl">Compact proof strip</span>
<ul class="ss ss-proof list-unstyled d-flex flex-wrap justify-content-center align-items-center row-gap-2 bg-white rounded-pill py-2 px-4 mx-auto mb-0 text-body-secondary" aria-label="Pebble Notes ratings and usage">
  <li class="d-flex align-items-center gap-2 px-3"><svg width="18" height="18" viewBox="0 0 24 24" fill="#b45309" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg><span><strong>4.9</strong> from 2,300 reviews</span></li>
  <li class="d-flex align-items-center gap-2 px-3"><span><strong>60,000</strong> installs</span></li>
  <li class="d-flex align-items-center gap-2 px-3"><span><strong>140</strong> schools on the class plan</span></li>
</ul></div>
CSS 
/* Stats strips on Bootstrap: grid columns and utilities for layout, a few rules for the dividers and the band. */
.ss{--ss-line:#e2e8f0;--ss-accent:#0b7a5c;--ss-soft:#e3f4ee;--bs-secondary-color:#475569;color:#0f172a}
.ss p{margin:0}
.ss-num{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.ss-strip{border:1px solid var(--ss-line);border-radius:20px;overflow:hidden;box-shadow:0 12px 32px -18px rgba(15,23,42,.18)}
.ss-strip .col{padding:24px 22px;box-shadow:-1px 0 0 var(--ss-line),0 -1px 0 var(--ss-line)}
.ss-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ss-soft);color:var(--ss-accent)}
.ss-strip .ss-num{font-size:1.75rem}
.ss-band{background:radial-gradient(120% 140% at 0% 0%,#14606f 0%,#0b3d4a 55%);border-radius:24px;padding:40px clamp(22px,4vw,48px)}
.ss-band h3{font-size:.8rem;letter-spacing:.14em;color:#a9e3dc}
.ss-band .ss-num{font-size:clamp(2.2rem,4.6vw,3.2rem)}
.ss-band .ss-num small{font-size:.5em;font-weight:700;margin-left:3px;color:#a9e3dc}
.ss-band .col p:last-child{margin-top:6px;font-size:.9rem;color:#d3ebe8}
.ss-band .col{border-left:1px solid rgba(255,255,255,.22);padding:4px 22px}
.ss-band .col:first-child{border-left:0;padding-left:0}
.ss-split{--ss-accent:#b4235a;background:#fdf2f6;border-radius:24px;padding:clamp(24px,4vw,44px)}
.ss-split .text-accent{color:var(--ss-accent)}
.ss-split h3{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.ss-split .lead-copy{color:#4a5363}
.ss-split .ss-link{color:var(--ss-accent);text-decoration:none;border-radius:4px}
.ss-split .ss-link:hover{text-decoration:underline}
.ss-split .ss-link:focus-visible{outline:2px solid var(--ss-accent);outline-offset:3px;box-shadow:none}
.ss-split li{border-top:3px solid var(--ss-accent);padding-top:14px}
.ss-split .ss-num{font-size:clamp(2rem,4vw,2.6rem)}
.ss-split li p:last-child{margin-top:4px;font-size:.9rem;color:#4a5363}
.ss-proof{border:1px solid var(--ss-line);width:fit-content;max-width:100%;font-size:.92rem}
.ss-proof li + li{border-left:1px solid var(--ss-line)}
.ss-proof strong{color:#0f172a;font-variant-numeric:tabular-nums}
@media (max-width:767.98px){.ss-band .col:nth-child(odd){border-left:0;padding-left:0}}
@media (max-width:520px){.ss-proof{border-radius:18px!important;flex-direction:column;align-items:flex-start!important;padding:14px 18px!important}
  .ss-proof li{padding:0!important}.ss-proof li + li{border-left:0}}
@media (prefers-reduced-motion:reduce){.ss *{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Icon strip</span>
<section class="grid grid-cols-1 overflow-hidden rounded-[20px] border border-ss-line bg-white shadow-[0_12px_32px_-18px_rgba(15,23,42,.18)] min-[521px]:grid-cols-2 min-[861px]:grid-cols-4" aria-label="Larkline Freight at a glance">
  <div class="flex items-center gap-3.5 px-[22px] py-6 shadow-[-1px_0_0_var(--color-ss-line),0_-1px_0_var(--color-ss-line)]"><span class="grid size-12 flex-none place-items-center rounded-[14px] bg-ss-soft text-ss-accent"><svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg></span>
    <div><p class="text-[1.75rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">1,850</p><p class="text-[.86rem] leading-[1.35] text-[#475569]">shipments leave our hubs every day</p></div></div>
  <div class="flex items-center gap-3.5 px-[22px] py-6 shadow-[-1px_0_0_var(--color-ss-line),0_-1px_0_var(--color-ss-line)]"><span class="grid size-12 flex-none place-items-center rounded-[14px] bg-ss-soft text-ss-accent"><svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg></span>
    <div><p class="text-[1.75rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">42</p><p class="text-[.86rem] leading-[1.35] text-[#475569]">countries with door-to-door delivery</p></div></div>
  <div class="flex items-center gap-3.5 px-[22px] py-6 shadow-[-1px_0_0_var(--color-ss-line),0_-1px_0_var(--color-ss-line)]"><span class="grid size-12 flex-none place-items-center rounded-[14px] bg-ss-soft text-ss-accent"><svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
    <div><p class="text-[1.75rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">99.2%</p><p class="text-[.86rem] leading-[1.35] text-[#475569]">of parcels delivered on the promised day</p></div></div>
  <div class="flex items-center gap-3.5 px-[22px] py-6 shadow-[-1px_0_0_var(--color-ss-line),0_-1px_0_var(--color-ss-line)]"><span class="grid size-12 flex-none place-items-center rounded-[14px] bg-ss-soft text-ss-accent"><svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
    <div><p class="text-[1.75rem] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">24/7</p><p class="text-[.86rem] leading-[1.35] text-[#475569]">live tracking and a human on the phone</p></div></div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Brand-colour band</span>
<section class="rounded-3xl bg-[radial-gradient(120%_140%_at_0%_0%,#14606f_0%,var(--color-ss-band)_55%)] px-[clamp(22px,4vw,48px)] py-10 text-white" aria-labelledby="ss-band-title">
  <h3 class="text-[.8rem] font-bold tracking-[.14em] text-[#a9e3dc] uppercase" id="ss-band-title">Halyard Workspace since 2011</h3>
  <ul class="mt-[22px] grid grid-cols-2 gap-y-6 min-[861px]:grid-cols-4">
    <li class="border-l border-white/22 px-[22px] py-1 odd:border-l-0 odd:pl-0 min-[861px]:[&:nth-child(3)]:border-l min-[861px]:[&:nth-child(3)]:pl-[22px]"><p class="text-[clamp(2.2rem,4.6vw,3.2rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">6</p><p class="mt-1.5 text-[.9rem] text-[#d3ebe8]">cities, from Leeds to Lisbon</p></li>
    <li class="border-l border-white/22 px-[22px] py-1 odd:border-l-0 odd:pl-0 min-[861px]:[&:nth-child(3)]:border-l min-[861px]:[&:nth-child(3)]:pl-[22px]"><p class="text-[clamp(2.2rem,4.6vw,3.2rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">1,240</p><p class="mt-1.5 text-[.9rem] text-[#d3ebe8]">members working with us today</p></li>
    <li class="border-l border-white/22 px-[22px] py-1 odd:border-l-0 odd:pl-0 min-[861px]:[&:nth-child(3)]:border-l min-[861px]:[&:nth-child(3)]:pl-[22px]"><p class="text-[clamp(2.2rem,4.6vw,3.2rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">38,000<small class="ml-[3px] text-[.5em] font-bold text-[#a9e3dc]">m²</small></p><p class="mt-1.5 text-[.9rem] text-[#d3ebe8]">of desks, studios and meeting rooms</p></li>
    <li class="border-l border-white/22 px-[22px] py-1 odd:border-l-0 odd:pl-0 min-[861px]:[&:nth-child(3)]:border-l min-[861px]:[&:nth-child(3)]:pl-[22px]"><p class="text-[clamp(2.2rem,4.6vw,3.2rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">4.8<small class="ml-[3px] text-[.5em] font-bold text-[#a9e3dc]">/5</small></p><p class="mt-1.5 text-[.9rem] text-[#d3ebe8]">average member rating in 2026</p></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Split band with headline</span>
<section class="grid grid-cols-1 items-center gap-x-12 gap-y-7 rounded-3xl bg-[#fdf2f6] p-[clamp(24px,4vw,44px)] min-[861px]:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)]" aria-labelledby="ss-split-title">
  <div><p class="text-[.78rem] font-bold tracking-[.12em] text-ss-rose uppercase">Brookfield Family Clinic</p>
    <h3 class="mt-2 text-[clamp(1.5rem,3vw,2.1rem)] leading-[1.15] font-bold tracking-[-.02em] text-balance" id="ss-split-title">Eighteen years of care, close to home</h3>
    <p class="mt-3 text-[#4a5363]">One practice for the whole family, from first vaccinations to physiotherapy after a hip replacement.</p>
    <a class="mt-4 inline-block rounded font-bold text-ss-rose no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-ss-rose" href="#">Meet our clinicians →</a></div>
  <ul class="grid grid-cols-1 gap-x-7 gap-y-6 min-[401px]:grid-cols-2">
    <li class="border-t-[3px] border-ss-rose pt-3.5"><p class="text-[clamp(2rem,4vw,2.6rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">9,600</p><p class="mt-1 text-[.9rem] text-[#4a5363]">patients seen last year</p></li>
    <li class="border-t-[3px] border-ss-rose pt-3.5"><p class="text-[clamp(2rem,4vw,2.6rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">14</p><p class="mt-1 text-[.9rem] text-[#4a5363]">doctors, nurses and therapists</p></li>
    <li class="border-t-[3px] border-ss-rose pt-3.5"><p class="text-[clamp(2rem,4vw,2.6rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">92%</p><p class="mt-1 text-[.9rem] text-[#4a5363]">of urgent cases seen the same day</p></li>
    <li class="border-t-[3px] border-ss-rose pt-3.5"><p class="text-[clamp(2rem,4vw,2.6rem)] leading-[1.05] font-extrabold tracking-[-.03em] whitespace-nowrap tabular-nums">4 min</p><p class="mt-1 text-[.9rem] text-[#4a5363]">average wait on the phone</p></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526075] uppercase">Compact proof strip</span>
<ul class="mx-auto flex w-fit max-w-full flex-col items-start gap-y-2.5 rounded-[18px] border border-ss-line bg-white px-[18px] py-3.5 text-[.92rem] text-[#475569] min-[521px]:flex-row min-[521px]:flex-wrap min-[521px]:items-center min-[521px]:justify-center min-[521px]:rounded-full min-[521px]:px-[26px] min-[521px]:py-3" aria-label="Pebble Notes ratings and usage">
  <li class="flex items-center gap-1.5 min-[521px]:px-4"><svg class="size-[18px] flex-none text-[#b45309]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg><span><strong class="text-[#0f172a] tabular-nums">4.9</strong> from 2,300 reviews</span></li>
  <li class="flex items-center gap-1.5 min-[521px]:border-l min-[521px]:border-ss-line min-[521px]:px-4"><span><strong class="text-[#0f172a] tabular-nums">60,000</strong> installs</span></li>
  <li class="flex items-center gap-1.5 min-[521px]:border-l min-[521px]:border-ss-line min-[521px]:px-4"><span><strong class="text-[#0f172a] tabular-nums">140</strong> schools on the class plan</span></li>
</ul></div>
CSS 
/* Stats strips: brand colours as theme tokens, layout and type as utilities. */
@theme { --color-ss-accent: #0b7a5c; --color-ss-soft: #e3f4ee; --color-ss-line: #e2e8f0; --color-ss-band: #0b3d4a; --color-ss-rose: #b4235a; }

About this set

Four stats strips for landing pages, the band of numbers that sits under a hero or between sections. Icon strip pairs each figure with an icon tile and a short label in a white bar, for logistics, SaaS or service pages. Brand-colour band sets white numbers on a deep teal gradient with thin dividers, for a section that needs to stand out. Split band with headline puts a heading, a sentence and a link on the left and a two by two grid of stats on the right, for an About or Why us section. Compact proof strip is a single pill line with a star rating, an install count and a usage figure, for directly under a call to action. All four are static HTML and CSS with no script. The dividers in the icon strip are 1px box-shadows on each cell, so they follow the cells when the strip wraps from four columns to two and then one, and the other layouts step down with simple grid and media query changes.

What’s included

  • Four layouts: icon strip, brand band, split band, compact proof strip
  • Static HTML and CSS, no JavaScript
  • Dividers that follow the cells when the strip wraps
  • Tabular figures so numbers line up across columns
  • Steps down to one column at 375px without overflow

Accessibility

Each strip is a labelled section or list, so screen readers announce it as a group, and every number is followed by its label in reading order. Icons are decorative and hidden from assistive technology. The only interactive element, the Meet our clinicians link, shows a 2px focus outline, and all text meets WCAG AA contrast, including the light labels on the teal band.

Customise it

Change --ss-accent and --ss-soft on .ss for the icon tiles and the split band, and --ss-band in the band rule for its background. In Bootstrap the same variables sit on .ss next to the grid utilities; in Tailwind edit the --color-ss-* theme colours.