stats-counter

Summary

Four-up counter band on a deep teal background. Each cell is a stacked headline (large amber number with <sup>+</sup> plus) and a white sub-label. No actual count-up animation — the numbers are static text.

HTML structure (minimal)

<div class="section bg-accent-color">
  <div class="r-container">
    <div class="text-white">
      <div class="row row-cols-xl-4 row-cols-1 text-center">
        <div class="col mb-3">
          <h2 class="accent-color-2">15<sup>+</sup></h2>
          <h5>Years Experience</h5>
        </div>
        <div class="col mb-3">
          <h2 class="accent-color-2">50<sup>+</sup></h2>
          <h5>Expert lawyers</h5>
        </div>
        <div class="col mb-3">
          <h2 class="accent-color-2">1K</h2>
          <h5>Satisfied Clients</h5>
        </div>
        <div class="col mb-3">
          <h2 class="accent-color-2">200<sup>+</sup></h2>
          <h5>Completed Task</h5>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.bg-accent-color { background: var(--accent-color); }
.accent-color-2  { color: var(--accent-color-2); }
h2 { font-size: 60px; font-family: var(--font-1); }
h5 { font-size: 20px; }

Notable details

• Pure typography solution — no JS, no count-up library, no SVG ring. The visual punch comes entirely from the 60px serif numerals against teal.
• The <sup>+</sup> after each number is a tiny detail that makes the figures read as approximate-and-growing rather than literal.
• Mobile collapses to a single column via row-cols-1, with the cells already centered (text-center).

Use when

• Quick "by the numbers" bands on serious B2B sites where animated counters would feel gimmicky.
• Any time the design budget doesn't justify shipping a count-up library.

Caveats

• If the user explicitly wants a count-up animation, you'll need to add Odometer.js or write a small requestAnimationFrame loop — not provided here.
• Translations of "Satisfied Clients" / "Years Experience" can be much longer than the English originals; the cells centre but don't equalize, so adjust min-height if rows look uneven.