featured-cases

Summary

Three-up case showcase mounted on a wide dark photographic banner: an intro card on the left with section title, paragraph and outline CTA, plus two image cards on the right with category badge and external-link arrow.

HTML structure (minimal)

<section class="our_project_wrapper section-padding bg-center bg-cover" style="background-image: url(banner_1920x530.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 mt-30 wow fadeInUp" data-wow-duration="1s">
        <div class="single_our_item me-0 me-sm-5">
          <div class="section-title">
            <h6><img src="bage_head.svg" alt="">Testimonials</h6>
            <h2 class="text-white">Our Featured Cases</h2>
          </div>
          <p>Lorem ipsum…</p>
          <a href="#" class="theme-btn theme-border">See More Services <i class="icon-arrow-right-2"></i></a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 mt-30 wow fadeInUp" data-wow-duration="1.5s">
        <div class="single_our_item_2">
          <div class="items_img">
            <img src="card_420x300.jpg" alt="">
            <span>Car Accident</span>
          </div>
          <a href="#" class="content">
            <h4>Chicago Car Accident With Syndrome</h4>
            <i class="fal fa-external-link"></i>
          </a>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 mt-30 wow fadeInUp" data-wow-duration="2s"><!-- card 3 --></div>
    </div>
  </div>
</section>

Key SCSS tokens

.our_project_wrapper {
  position: relative;
  &::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(34,33,39,0.78);
    z-index: 0;
  }
  .container { position: relative; z-index: 1; }
  h2.text-white, p { color: #fff; }
  p { color: rgba(255,255,255,0.78); }

  .single_our_item_2 {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    .items_img {
      position: relative;
      img { width: 100%; height: 240px; object-fit: cover; }
      span {
        position: absolute; left: 16px; top: 16px;
        background: #c8242f; color: #fff;
        padding: 4px 12px; border-radius: 2px;
        text-transform: uppercase; font-size: 12px;
      }
    }
    .content {
      padding: 22px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      h4 { font-family: 'Crimson Pro', serif; color: #222127; margin: 0; flex: 1; }
      i { color: #c8242f; }
      &:hover h4 { color: #c8242f; }
    }
  }
}

Animation logic

new WOW().init();
// Per-column data-wow-duration: 1s, 1.5s, 2s creates a wave

Notable details

• First column is intentionally a "section header card" rather than a project card — saves the row from needing a separate .section-title block above the grid.
• Crimson category badge sits flush in the top-left of the image, contrasting with the white card body.
• External-link icon makes each card unmistakably a link without needing a button label.

Use when

• Portfolio / case-study teasers where you want a CTA + 2 cards instead of 3 cards + a button below.
• Dark hero-into-content transitions where the section needs its own atmospheric backdrop.
• Brands that file work into named categories (e.g. "Car Accident", "Family Law").

Caveats

• Section title h6 ships with placeholder text "Testimonials" instead of "Cases" — copy bug.
• Background image banner_1920x530.jpg has a typo on cta_wrapper.cta-1 style url; verify CSS files don't reuse the typo before swapping.