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 Banner XL Centered

Open in new tab

Share on:

<!-- .tbxlc -->
<div class="tbxlc // p--xl">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .core -->
        <div class="core // flex flex-col items-center // text-center">

            <!-- .eyebrow -->
            <p class="eyebrow // type-eyebrow-sm opacity-sm">Lorem Ipsum</p>

            <!-- .headline -->
            <p class="headline // max-w-head // type-8xl">A sensible, responsive starting point for Beaver Builders.</p>

            <!-- .subhead -->
            <p class="subhead // max-w-subhead // opacity-md type-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>

            <!-- .cta -->
            <div class="cta // mt-sm // 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>
    </div>
</div>
<!-- .tbxlc -->
<div class="tbxlc // p--xl">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .core -->
        <div class="core // flex flex-col items-center // text-center">

            <!-- .eyebrow -->
            <p class="eyebrow // type-eyebrow-sm opacity-sm">Lorem Ipsum</p>

            <!-- .headline -->
            <p class="headline // max-w-head // type-8xl">A sensible, responsive starting point for Beaver Builders.</p>

            <!-- .subhead -->
            <p class="subhead // max-w-subhead // opacity-md type-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>

            <!-- .cta -->
            <div class="cta // mt-sm // 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>
    </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.