work-process-steps

Summary

Numbered four-step intake process on a navy-overlaid photo background. Each step has an oversized step number, an icon, a title, short copy, and a deep-link CTA. The steps live inside a Slick carousel (4-up at xl) and the section closes with a CTA alert banner.

HTML structure (minimal)

<section class="work-process work-process-carousel pt-130 pb-0 bg-overlay bg-overlay-secondary">
  <div class="bg-img"><img src="assets/images/banners/1.jpg" alt="background"></div>
  <div class="container">
    <div class="row heading-layout2">
      <div class="col-12">
        <h2 class="heading__subtitle color-primary">Caring For The Health Of You And Your Family.</h2>
      </div>
      <div class="col-xl-5">
        <h3 class="heading__title color-white">We Provide All Aspects Of Medical Practice For Your Whole Family!</h3>
      </div>
      <div class="col-xl-6 offset-xl-1">
        <p class="heading__desc font-weight-bold color-gray mb-40">We will work with you to develop individualised care plans…</p>
        <ul class="list-items list-items-layout2 list-items-light list-horizontal list-unstyled">
          <li>Fractures and dislocations</li>
          <li>Health Assessments</li>
          <!-- … -->
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="carousel-container mt-90">
          <div class="slick-carousel"
               data-slick='{"slidesToShow":4,"slidesToScroll":1,"infinite":false,"arrows":false,"dots":false,"responsive":[{"breakpoint":1200,"settings":{"slidesToShow":3}},{"breakpoint":992,"settings":{"slidesToShow":2}},{"breakpoint":480,"settings":{"slidesToShow":1}}]}'>
            <div class="process-item">
              <span class="process__number">01</span>
              <div class="process__icon"><i class="icon-health-report"></i></div>
              <h4 class="process__title">Fill In Our Medical Application</h4>
              <p class="process__desc">Medcity offers low-cost health coverage for adults…</p>
              <a href="#" class="btn btn__secondary btn__link"><span>Doctors’ Timetable</span><i class="icon-arrow-right"></i></a>
            </div>
            <!-- 02 / 03 / 04 / 05 -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cta bg-light-blue">
    <!-- inline CTA banner — see cta-alert-banner.md -->
  </div>
</section>

Key SCSS tokens

.bg-overlay-secondary::before { background: rgba($color-secondary, .85); }
.work-process .process-item {
  padding: 30px;
  .process__number {
    display: block; font-family: $font-heading; font-size: 60px;
    font-weight: 700; color: rgba($color-primary, .15);
    line-height: 1; margin-bottom: 10px;
  }
  .process__icon { color: $color-primary; font-size: 50px; margin-bottom: 18px; }
  .process__title { color: $color-white; font-size: 20px; margin-bottom: 12px; }
  .process__desc { color: $color-gray; font-size: 15px; margin-bottom: 18px; }
}

Notable details

• The step number is a translucent watermark (rgba($color-primary, .15)) sitting behind the icon — gives the card a poster-style number stamp without overpowering the content.
• The headline + intro live in the same row but use col-xl-5 and col-xl-6 offset-xl-1, splitting into a two-column intro that still reads as one heading block.
• Below the carousel, an inline CTA strip (bg-light-blue) is nested inside the same <section> — useful pattern for capping a long band with a colour shift instead of starting a new section.

Use when

• "How it works" / onboarding / patient-flow strips with 4–6 steps.
• Pages that need a step-numbered process AND a closing CTA in one continuous band.

Caveats

• Heavy reliance on Bootstrap col offsets — different content lengths will misalign without manual tuning.
• Step number color uses RGBA on a dark background; testing on light hero photos will require adjusting the alpha.