stats-strip

Summary

Four-tile statistics strip on a soft cream surface counting happy children, volunteers, products & gifts, and worldwide donors. Each tile uses a flaticon glyph, a bold gradient number, and a description label.

HTML structure (minimal)

<div class="ul-stats ul-section-spacing">
  <div class="ul-container">
    <div class="ul-stats-wrapper wow animate__fadeInUp">
      <div class="row row-cols-md-4 row-cols-sm-3 row-cols-2 row-cols-xxs-1 ul-bs-row justify-content-center">
        <div class="col">
          <div class="ul-stats-item">
            <i class="flaticon-costumer"></i>
            <span class="number">260+</span>
            <span class="txt">Total Happy Children</span>
          </div>
        </div>
        <!-- volunteers / products / donors items -->
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.ul-stats-wrapper {
  background: var(--ul-c4);                /* ivory mist */
  border-radius: clamp(16px, 2.10vw, 40px);
  padding: clamp(30px, 3.15vw, 60px);
}
.ul-stats-item {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;

  i {
    font-size: clamp(40px, 3.15vw, 60px);
    background: var(--ul-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .number {
    font-size: clamp(28px, 2.63vw, 50px);
    font-weight: 800;
    font-family: var(--font-quicksand);
    color: var(--ul-black);
  }
  .txt {
    color: var(--ul-p);
    font-weight: 500;
  }
}

Animation logic

// WOW.js scroll-reveal on the wrapper
//   .wow.animate__fadeInUp
new WOW({}).init();

Notable details

• Glyphs use background-clip: text with the brand gradient — icons inherit the orange→amber gradient automatically without needing colored SVGs.
• Numbers are static text (no count-up) — gives the section a calmer, restful feel after the kinetic donation bars above it.
• Bootstrap row-cols utilities cascade 1 → 2 → 3 → 4 columns from xxs up to md+, keeping the tiles square-ish at every breakpoint.
• Wrapper (not the section background) carries the cream surface, so the section itself can sit on the page background without changing.

Use when

• KPI bands beneath a hero or about section.
• Charity, agency, education sites needing four headline stats without the visual noise of count-up timers.
• When the brand identity is the gradient — applying it to icons via background-clip keeps everything consistent without exporting two icon sets.

Caveats

• background-clip: text has occasional Chromium glitches at extreme zoom; provide a fallback color for older browsers if needed.
• Numbers don't animate — if the project requests a counter, slot in a small counter library or adapt the progressbar.js IO pattern.