cta-alert-banner

Summary

Light-blue inline CTA strip nested inside the work-process band. Carries an alert icon at left, a headline + lead in the centre, and a teal pill button to the healthcare-programs page on the right.

HTML structure (minimal)

<div class="cta bg-light-blue">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-2 col-lg-2">
        <img src="assets/images/icons/alert2.png" class="cta__img" alt="alert">
      </div>
      <div class="col-md-7 col-lg-7">
        <h4 class="cta__title">True Healthcare For Your Family!</h4>
        <p class="cta__desc">Serve the community by improving the quality of life through better health…</p>
      </div>
      <div class="col-md-12 col-lg-3">
        <a href="appointment.html" class="btn btn__primary btn__secondary-style2 btn__rounded">
          <span>Healthcare Programs</span><i class="icon-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.cta {
  padding: 30px 0;
  &.bg-light-blue { background: #d9f2ef; } // pale teal tint
  .cta__img { max-width: 80px; }
  .cta__title { font-size: 24px; font-weight: 700; color: $color-secondary; margin-bottom: 5px; }
  .cta__desc { color: $color-body; margin-bottom: 0; font-size: 14px; }
}
.btn__secondary-style2 { background: $color-primary; color: $color-white; }
.btn__rounded { border-radius: 50px; padding: 14px 30px; }

Notable details

• This CTA is nested inside the parent section.work-process rather than living as its own section — the colour shift visually closes the dark band above without breaking page rhythm.
• The alert PNG (alert2.png) is rendered as a regular <img> rather than an icon-font glyph, so brand designers can swap it for a custom illustration without touching the icomoon font.
• 2/7/3 column split keeps the icon visually weighty without it dominating the row.

Use when

• Low-friction CTA strips between content blocks (subscription nudges, programmes, donation prompts).
• Whenever you want a colour-shift "interlude" inside a darker section to break monotony.

Caveats

• Hard-coded bg-light-blue colour is defined inline in the CTA stylesheet — changing the parent palette means hand-tuning this tint.
• Three-column row collapses awkwardly between md and lg: text gets too narrow before the button wraps.