image-text-intro

Summary

Two-column intro band pairing a zoom-in-up product photograph with a content column carrying a badge eyebrow, headline, paragraph copy and a checklist of benefits. AOS reveals the image and copy independently as the section enters the viewport.

HTML structure (minimal)

<div class="image-text mt-100">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 col-12">
        <div class="media-wrap" data-aos="zoom-in-up">
          <img src="img1.png" width="992" height="863" />
        </div>
      </div>
      <div class="col-lg-6 col-12">
        <div class="content section-headings">
          <div class="subheading text-20 subheading-bg" data-aos="fade-up">
            <span>About Us</span>
          </div>
          <h2 class="heading text-50" data-aos="fade-up">
            Empowering brands with smart digital solutions
          </h2>
          <div class="text text-18" data-aos="fade-up">Lorem copy paragraph...</div>
          <ul class="text-list list-unstyled">
            <li class="text-item text text-18" data-aos="fade-up">Strategy planning</li>
            <li class="text-item text text-18" data-aos="fade-up">Implementation</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.image-text .media-wrap img {
  width: 100%;
  border-radius: 18px;
}
.section-headings .subheading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-background-subheading);
  border: 1px solid var(--color-border-subheading-bg);
}
.section-headings .heading.text-50 {
  font-size: 50px;
  font-weight: 600;
  line-height: 1.15;
  margin-block-start: 16px;
}

Animation logic

// AOS init in main.js
AOS.init({ duration: 1500, once: true });
// Each [data-aos] element animates once on first viewport entry.
// data-aos-delay attributes stagger the checklist items.

Notable details

• The eyebrow is a pill containing two SVG bullet glyphs flanking the label text, creating an "decorative bracket" effect that's reused in every section heading across the template.
• Splitting AOS attributes across subheading, heading and text lets each subelement land on its own beat instead of one bulk fade.
• mt-100 is a global utility for 100px section spacing — every section in index.html opens with it, giving the page a steady rhythm.

Use when

• About / value-prop bands where you need a feature list beside a hero photo.
• Inner pages where the introduction is content-heavy and needs an image anchor.
• Replacing a stock "split-feature" pattern with one that has staggered AOS reveals.

Caveats

• AOS once: true means scrolling back up won't replay the animation — by design, but worth knowing if you want re-entry behavior.
• The section-headings subheading SVG is repeated literally in every section in HTML (no template partial), so changing the eyebrow icon means a global find-replace.