0 180 0 1 180 0 0 hidden transform 0 .8 top left 1 1 .01 .5 0 .8 1 power4.out top 60% top 10% true 360 180 none .05
1 transform top top bottom top true 20vmin none .001 auto .33 hidden auto 75 3 .15 top center hidden transform 60 .9 0 center 60% play none none reverse 0 1 .01 1 .8 .1

Text/Image Banner Checkerboard

Open in new tab

Share on:

<!-- .tba -->
<div class="tba // p--xl pb-0i">
    <!-- yo -->
    <div class="flex flex-col items-center lg:flex-row  lg:justify-between // max-w-screen-lg mx-auto">

        <!-- .core -->
        <div class="core // flex flex-col items-center lg:items-start // mb-lg lg:mb-0 lg:w-45% // text-center lg:text-left">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">The first thing that you really want to point out to the visitor.</p>
            <p class="type-base max-w-subhead opacity-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow"> <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a> </div>
        </div>

        <!-- .art -->
        <div class="art md:w-65% lg:w-45% // rounded-ctr overflow-hidden bg-a-300">
            <img class="opacity-75" src="https://source.unsplash.com/collection/39199601/1000" alt="Enter alt text here" style="filter:grayscale(1)">
        </div>

    </div>
</div>

<!-- .tba -->
<div class="tba // p--xl">
    <!-- yo -->
    <div class="flex flex-col items-center lg:flex-row-reverse lg:justify-between // max-w-screen-lg mx-auto">

        <!-- .core -->
        <div class="core // flex flex-col items-center lg:items-start // mb-lg lg:mb-0 lg:w-45% // text-center lg:text-left">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">The second thing that you really want to point out to the visitor.</p>
            <p class="type-base max-w-subhead opacity-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow"> <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a> </div>
        </div>

        <!-- .art -->
        <div class="art md:w-65% lg:w-45% // rounded-ctr overflow-hidden bg-a-300">
            <img class="opacity-75" src="https://source.unsplash.com/collection/39199601/1000" alt="Enter alt text here" style="filter:grayscale(1)">
        </div>

    </div>
</div>
<!-- .tba -->
<div class="tba // p--xl pb-0i">
    <!-- yo -->
    <div class="flex flex-col items-center lg:flex-row  lg:justify-between // max-w-screen-lg mx-auto">

        <!-- .core -->
        <div class="core // flex flex-col items-center lg:items-start // mb-lg lg:mb-0 lg:w-45% // text-center lg:text-left">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">The first thing that you really want to point out to the visitor.</p>
            <p class="type-base max-w-subhead opacity-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow"> <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a> </div>
        </div>

        <!-- .art -->
        <div class="art md:w-65% lg:w-45% // rounded-ctr overflow-hidden bg-a-300">
            <img class="opacity-75" src="https://source.unsplash.com/collection/39199601/1000" alt="Enter alt text here" style="filter:grayscale(1)">
        </div>

    </div>
</div>

<!-- .tba -->
<div class="tba // p--xl">
    <!-- yo -->
    <div class="flex flex-col items-center lg:flex-row-reverse lg:justify-between // max-w-screen-lg mx-auto">

        <!-- .core -->
        <div class="core // flex flex-col items-center lg:items-start // mb-lg lg:mb-0 lg:w-45% // text-center lg:text-left">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">The second thing that you really want to point out to the visitor.</p>
            <p class="type-base max-w-subhead opacity-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow"> <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a> </div>
        </div>

        <!-- .art -->
        <div class="art md:w-65% lg:w-45% // rounded-ctr overflow-hidden bg-a-300">
            <img class="opacity-75" src="https://source.unsplash.com/collection/39199601/1000" alt="Enter alt text here" style="filter:grayscale(1)">
        </div>

    </div>
</div>

Ready to use this component in your Beaver Builder sites?

Copy the snippet from the Code tab (above) into a SoulSections module with SoulMagic also installed. That’s it.

Need the Soul Plugins? Get the bundle.