icon-feature-trio

Summary

A three-column trust block with a colored 70px PNG icon, a short heading, descriptive paragraph and a pill-shaped light-background CTA button leading to deeper pages.

HTML structure (minimal)

<section>
  <div class="container">
    <div class="row g-4">
      <div class="col-md-4">
        <div class="relative wow fadeInUp">
          <img src="images/icons-color/balance.png" class="w-70px mb-4" alt="">
          <h2 class="hs-3">Experienced Legal Team</h2>
          <p>Our attorneys bring extensive courtroom experience and deep legal expertise...</p>
          <a href="team.html" class="btn-main bg-light p-3 py-0">
            <span class="id-color fs-12 fw-600">Meet Our Attorneys</span>
          </a>
        </div>
      </div>
      <!-- Two more columns: handshake.png "Client-Focused", achieve.png "Proven Track Record" -->
    </div>
  </div>
</section>

Key SCSS tokens

.w-70px { width: 70px; }
.hs-3 { font-size: 24px; line-height: 1.5em; }      /* heading-style 3 */
.btn-main {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 30px;
  transition: all .3s ease;
}
.btn-main.bg-light {
  background: var(--bg-light);                       /* #ebf0f6 */
}
.btn-main.bg-light .id-color { color: var(--primary-color); }
.btn-main:hover { background: var(--secondary-color); }

Animation logic

// WOW.js fadeInUp on each .relative.wow item — no per-element delay,
// they all enter simultaneously when the section scrolls into view.

Notable details

• Icons are colored PNGs from images/icons-color/ rather than icon-font glyphs — easier to art-direct, harder to recolor on hover.
• CTA uses an unusual pattern: a light-grey pill with the brand-color text inside. Differentiates it from the more common solid-color buttons elsewhere on the page.
• The hs-3 class lets <h2> visually behave like an h3 — preserves SEO outline while controlling typography.

Use when

• Service pages that need three "why us" tiles above the fold.
• Any block where each tile drives to a distinct deep page (team, services, case-results) instead of opening a modal.
• Light-background sections that need a softer CTA than a full-saturation primary button.

Caveats

• PNG icons aren't recolored by CSS — you need separate icon files for white/dark contexts (the template ships icons-color, icons-white and icons-dark folders).