ServicesFree AuditWorkInspirationBlogAbouthello@optimaflow.id
← All components

Section

Component

Stats 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