attorneys-team

Summary

Centered section title above a four-column grid of attorney cards, each with a portrait, name, short bio, and a "View Attorney Profile" level-up arrow CTA. Cards stagger with WOW fadeInUp durations from 1s to 2s.

HTML structure (minimal)

<section class="team_wrapper section-padding">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 offset-md-3">
        <div class="section-title text-center mb-30 wow fadeInUp" data-wow-duration="1s">
          <h6><img src="bage_head.svg" alt="">Our attorneys</h6>
          <h2>We are personally committed to securing your justice</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 mt-30">
        <div class="single_team_item wow fadeInUp" data-wow-duration="1s">
          <div class="team_img"><img src="card_300x350.jpg" alt=""></div>
          <div class="content text-center">
            <h4>Stephen Larry</h4>
            <p>There are many variations of passages of Lorem Ipsum available.</p>
            <a href="#" class="btnd">View Attorney Profile <i class="far fa-level-up-alt"></i></a>
          </div>
        </div>
      </div>
      <!-- 3 more attorneys: Elizabeth Linda 1.3s, Richard Paul 1.7s, Ashikul Islam 2s -->
    </div>
  </div>
</section>

Key SCSS tokens

.team_wrapper {
  .single_team_item {
    background: #fff;
    border: 1px solid rgba(34,33,39,0.08);
    border-radius: 4px;
    overflow: hidden;
    transition: 0.3s ease;

    .team_img {
      overflow: hidden;
      img { width: 100%; height: 320px; object-fit: cover; transition: transform 0.5s ease; }
    }
    .content {
      padding: 22px 18px;
      h4 { font-family: 'Crimson Pro', serif; color: #222127; margin-bottom: 6px; }
      p  { color: #666; font-size: 14px; min-height: 50px; }
      .btnd { color: #c8242f; font-weight: 500; }
    }
    &:hover {
      box-shadow: 0 18px 36px rgba(34,33,39,0.10);
      .team_img img { transform: scale(1.05); }
    }
  }
}

Animation logic

new WOW().init();
// Stagger: 1s, 1.3s, 1.7s, 2s

Notable details

• Subtle image scale on hover (transform: scale(1.05)) is the only motion beyond shadow lift — restrained, suits formal sectors.
• Min-height on the bio paragraph keeps card heights consistent even with uneven copy lengths.
• Card order matches the WOW duration so the wave reads left-to-right.

Use when

• Teams where each member has a portrait and a short bio (≤ 2 lines) plus a profile link.
• Sectors where photos should feel calm rather than playful — no tilt, no hover lift, just gentle scale.
• Cards that link to dedicated profile pages (attorneys-details.html).

Caveats

• Source copy is duplicated across all four cards.
• Card heights drift if the bio runs longer than 2 lines — consider clamping with -webkit-line-clamp.