funfact-counters

Summary

Four crest-shaped stat blocks on a beige section, each rendering its number inside a heraldic shield PNG (bage_02.png) and animated on first scroll into view via counterUp.js.

HTML structure (minimal)

<section class="funfact_wrapper funfact_wrapper-1 section-padding">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 mt-30">
        <div class="single_funfact_items text-center" style="background-image: url(bage_02.png)">
          <h6>Professional</h6>
          <h3><span class="counter">26050</span></h3>
          <h4>Lawyers</h4>
        </div>
      </div>
      <!-- 250+, 1750+, 120 -->
    </div>
  </div>
  <div class="feature_element d-none d-xl-block"><img src="law_cale.svg" alt=""></div>
</section>

Key SCSS tokens

.funfact_wrapper-1 {
  background-color: #ebe6e3; /* stone-cream */
  padding: 100px 0;

  .single_funfact_items {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 40px 20px 60px;

    h6 { font-family: 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.3em; color: #b69d74; }
    h3 { font-family: 'Crimson Pro', serif; font-size: 56px; color: #222127; margin: 6px 0 4px; }
    h4 { font-family: 'Crimson Pro', serif; font-size: 18px; color: #666; }
  }

  .feature_element { position: absolute; right: 6%; bottom: 0; opacity: .5; }
}

Animation logic

$('.counter').counterUp({
  delay: 10,
  time: 3000
});

Notable details

• Crest PNG behind each number turns generic stats into trust-signal heraldry — fits law, notary, family-business brands.
• Numbers ship as raw integers (26050, not 26,050); counterUp formats them on the fly. Use data-comma if you fork.
• Decorative feature_element (a scale-of-justice SVG) anchored absolutely at the right edge is hidden on <xl breakpoints — graceful degradation pattern worth copying.

Use when

• Professional-services brands that need "X years / Y clients" trust signalling.
• You want stats to feel ornamental rather than dashboardy.
• Backgrounds where a centered medallion shape complements the typography.

Caveats

• Crest backgrounds depend on bage_02.png aspect ratio — if you swap the asset, retune padding so the number stays inside the frame.
• counterUp.js fires on visibility — make sure the section isn't initially display: none.
• Last stat on index.html reads 120 with the label "Lawyers"; copy is duplicated across cards.