support-tri-card

Summary

A row of three pastel-tinted cards covering newsletter signup ("Exclusive offers"), community join ("Join Our Community") and mobile-app download ("Get our FREE app Now!" with App Store / Play Store badges).

HTML structure (minimal)

<section class="support-area section-space pb-0">
  <div class="container">
    <div class="row g-5">
      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
        <div class="support-item">
          <div class="support-content">
            <h3>Exclusive offers for you</h3>
            <p>Get weekly deals, valuable health information and more.</p>
            <a class="join-btn furniture-btn" href="#">sing up<span><i class="fa-regular fa-angle-right"></i></span></a>
          </div>
        </div>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
        <div class="support-item is-light-yellow">
          <div class="support-content">
            <h3>Join Our Community</h3>
            <p>Get weekly deals, valuable health information and more.</p>
            <a class="join-btn furniture-btn" href="#">Join FREE now<span><i class="fa-regular fa-angle-right"></i></span></a>
          </div>
        </div>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
        <div class="support-item is-pale-pink">
          <div class="support-content">
            <h3>Get our FREE app Now!</h3>
            <p>Get weekly deals, valuable health information and more.</p>
            <div class="mobile__app-download">
              <a class="app__download" href="#"><img src="play-store.png" alt=""></a>
              <a class="app__download" href="#"><img src="apple-store.png" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.support-item {
  border-radius: 12px;
  padding: 40px;
  background-color: #f5f1e6;
  &.is-light-yellow { background-color: #fcf3d4; }
  &.is-pale-pink    { background-color: #fbe7e7; }
  h3 { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
  p  { color: var(--clr-text-body); margin-bottom: 24px; }
}
.mobile__app-download {
  display: flex;
  gap: 12px;
}

Notable details

• The same shell (support-item) carries three visual variants via is-light-yellow and is-pale-pink modifiers — adding a fourth variant is a one-line CSS addition.
• The third card swaps the CTA button for two app-store badge images, which keeps the row symmetrical despite the different action.
• "sing up" is a typo for "sign up" in the original markup — worth fixing on adoption.

Use when

• Footer-adjacent retention modules (newsletter, community, app).
• B2C landing pages that want to nudge multiple acquisition channels in one row.
• Quick "what to do next" rows on long content pages.

Caveats

• App store badges in the template are non-clickable PNGs; replace with the official Apple/Google linking guidelines if you ship publicly.
• Pastel backgrounds aren't tokenised in _colors.scss; they're hard-coded modifiers, so a designer changing the palette must edit the SCSS rather than a variable.