Image Text Column


An Image Text Column layout displays an image with text below it, making it perfect for showcasing features, team members, services, or products in a structured format.

Default (Image Text Column)

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

  • Bullet info 1
  • Bullet info 2
  • Bullet info 3
  • Bullet info 4
  • Bullet info 5
  • Bullet info 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

  • Bullet info 1
  • Bullet info 2
  • Bullet info 3
  • Bullet info 4
  • Bullet info 5
  • Bullet info 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

  • Bullet info 1
  • Bullet info 2
  • Bullet info 3
  • Bullet info 4
  • Bullet info 5
  • Bullet info 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

<section class="image-text-wrapper">
    <div class="container">
      <div class="align-items-center">
        <div class="content-wrapper">
          <div class="image-text-parent">
            <h5 class="medium-text-2 title">Lorem ipsum dolor sit amet</h5>
            <div class="img-parent">
              <img
                src="./assets/component-images/program-card.svg"
                class="img"
              />
            </div>
            <p class="para--two intro-txt">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
            <div class="info-list-parent para--two">
              <ul class=" list-unstyled p-0 m-0">
                <li>Bullet info 1</li>
                <li>Bullet info 2</li>
                <li>Bullet info 3</li>
                <li>Bullet info 4</li>
                <li>Bullet info 5</li>
                <li>Bullet info 6</li>
              </ul>
            </div>
            <p class="para--four">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
          </div>
          <div class="image-text-parent">
            <h5 class="medium-text-2 title">Lorem ipsum dolor sit amet</h5>
            <div class="img-parent">
              <img
                src="./assets/component-images/program-card.svg"
                class="img"
                data-src="./assets/component-images/program-card.svg"
              />
            </div>
            <p class="para--two intro-txt">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
            <div class="info-list-parent para--two">
              <ul class=" list-unstyled p-0 m-0">
                <li>Bullet info 1</li>
                <li>Bullet info 2</li>
                <li>Bullet info 3</li>
                <li>Bullet info 4</li>
                <li>Bullet info 5</li>
                <li>Bullet info 6</li>
              </ul>
            </div>
            <p class="para--four">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
          </div>
          <div class="image-text-parent">
            <h5 class="medium-text-2 title">Lorem ipsum dolor sit amet</h5>
            <div class="img-parent">
              <img
                src="./assets/component-images/program-card.svg"
                class="img"
                data-src="./assets/component-images/program-card.svg"
              />
            </div>
            <p class="para--two intro-txt">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
            <div class="info-list-parent para--two">
              <ul class="list-unstyled p-0 m-0">
                <li>Bullet info 1</li>
                <li>Bullet info 2</li>
                <li>Bullet info 3</li>
                <li>Bullet info 4</li>
                <li>Bullet info 5</li>
                <li>Bullet info 6</li>
              </ul>
            </div>
            <p class="para--four">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco
            </p>
          </div>
        </div>
      </div>
    </div>
</section>