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.