← All components
Section
ComponentStats Band 04
Light-SaaS stats band: an intro column beside a 2x2 grid of oversized numerals with tiny labels and an indigo accent word.
Built withHTML/CSSTailwindCSS Grid
Preview
Live render at 1440px — scroll, hover and click work as they will on the real page.
Copy the code
paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
Styles below map 1:1 to the class names above. -->
<section class="statsband_component">
<div class="statsband_inner">
<div class="statsband_intro">
<p class="statsband_eyebrow">By the numbers</p>
<h2 class="statsband_title">
<span class="statsband_accent">trust.</span>
</h2>
<p class="statsband_lede">Thousands of scaling companies close their books, reconcile spend, and forecast runway on a single ledger built for speed.</p>
<a class="statsband_cta" href="#">See the live metrics</a>
</div>
<ul class="statsband_grid">
<li class="statsband_card">
<p class="statsband_num">$18.4B</p>
<p class="statsband_label">Processed on the platform in 2025</p>
</li>
<li class="statsband_card">
<p class="statsband_num">3.5x</p>
<p class="statsband_label">Faster monthly close, on average</p>
</li>
<li class="statsband_card">
<p class="statsband_num">99.98%</p>
<p class="statsband_label">Ledger uptime across all regions</p>
</li>
<li class="statsband_card">
<p class="statsband_num">12,400+</p>
<p class="statsband_label">Finance teams closing on-time</p>
</li>
</ul>
</div>
</section>
<style>
.statsband_component {
width:100%;
background:#f7f8fa;
padding:7rem 1.5rem;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
box-sizing:border-box;
}
.statsband_inner {
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:0.9fr 1.4fr;
gap:5rem;
align-items:center;
}
.statsband_intro {
display:flex;
flex-direction:column;
gap:1.5rem;
}
.statsband_eyebrow {
font-size:0.75rem;
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:#3b4cf5;
margin:0;
}
.statsband_title {
font-size:2.6rem;
line-height:1.05;
font-weight:600;
letter-spacing:-0.02em;
color:#0e1116;
margin:0;
}
.statsband_accent {
color:#3b4cf5;
}
.statsband_lede {
font-size:1.05rem;
line-height:1.6;
color:#5b6472;
max-width:34ch;
margin:0;
}
.statsband_cta {
display:inline-flex;
align-items:center;
justify-content:center;
width:fit-content;
margin-top:0.5rem;
padding:0.85rem 1.6rem;
border-radius:999px;
background:#3b4cf5;
color:#ffffff;
font-size:0.95rem;
font-weight:600;
text-decoration:none;
box-shadow:0 8px 24px rgba(59,76,245,0.28);
}
.statsband_grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1.25rem;
list-style:none;
margin:0;
padding:0;
}
.statsband_card {
background:#ffffff;
border-radius:20px;
padding:2rem;
border:1px solid #eceef2;
box-shadow:0 1px 2px rgba(16,17,22,0.03);
}
.statsband_num {
font-size:3.4rem;
line-height:1;
font-weight:600;
letter-spacing:-0.03em;
color:#0e1116;
margin:0;
}
.statsband_label {
font-size:0.8rem;
font-weight:500;
letter-spacing:0.04em;
color:#8a92a1;
margin:0.85rem 0 0;
}
</style>One email unlocks copying across the whole library — that's the only ask.
Want this section shipped on your site?
We install it on Webflow or Shopify — wired to your content, not a paste-and-pray.
Book a free call