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

ThreeFeatures

Open in new tab

Share on:

<!-- .tbb -->
<div class="tbb // p--xl // bg-a-100 bg-opacity-25">
    <div class="flex flex-col items-center // max-w--doc">
        <!-- .core -->
        <div class="core // flex flex-col items-center // lc-mb-0i mb-lg // text-center">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">Professional-looking components, designed to beef up your folio.</p>

        </div>

        <!-- GRID -->
        <div class="grid lg:grid-cols-3 gap-lg lg:gap-md">

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

        </div>

    </div>
</div>
<!-- .tbb -->
<div class="tbb // p--xl // bg-a-100 bg-opacity-25">
    <div class="flex flex-col items-center // max-w--doc">
        <!-- .core -->
        <div class="core // flex flex-col items-center // lc-mb-0i mb-lg // text-center">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">Professional-looking components, designed to beef up your folio.</p>

        </div>

        <!-- GRID -->
        <div class="grid lg:grid-cols-3 gap-lg lg:gap-md">

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </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.