A team grid.
Share on:
<soulmagic id="team-grid" users=".card">
<set targets=".longerbio">
<auto-alpha>0</auto-alpha>
<backface-visibility>hidden</backface-visibility>
</set>
<event type="click" trigger="button" away="false" closer=".overlay, .closer"></event>
<timeline>
<to targets=".longerbio">
<auto-alpha>1</auto-alpha>
</to>
<to targets="body" position="0" scope="html">
<overflow>hidden</overflow>
</to>
</timeline>
<timeline>
<to targets=".longerbio">
<auto-alpha>0</auto-alpha>
</to>
<to targets="body" position="0" scope="html">
<overflow>auto</overflow>
</to>
</timeline>
</soulmagic>
<!-- SOULSECTIONS -->
<!-- .bb2xlc -->
<div class="bb2xlc // p--xl">
<!-- .subsection -->
<div class="subsection // flex flex-col items-center // max-w--doc">
<!-- .grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-md gap-y-lg">
<!-- .card -->
<div class="card relative // rounded-ctr shadow-md overflow-hidden">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="Enter alt text here" />
<!-- .core -->
<div class="core // p-sm lc-mb-0i">
<p class="mb-4i // type-xl font-600i">Jane Doe</p>
<p class="type-xs opacity-md">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi dolore tenetur optio.</p>
<button class="mt-sm text-a-600 type-xs">Full Bio</button>
</div>
<!-- .longerbio -->
<div class="hidden-ib longerbio // fixed z-10 inset-0 // flex flex-col items-center justify-center // w-full h-screen">
<!-- .overlay -->
<div class="overlay absolute inset-0 // h-full w-full // bg-p-900 bg-opacity-95"></div>
<!-- .core -->
<div class="core relative // max-w-3xl p-md // shadow-lg bg-p-50 overflow-y-scroll" style="max-height: 75vh;"><button class="closer absolute right-8 top-4 // flex items-center // text-p-900 text-4xl opacity-50">×</button>
<img class="w-16 md:w-48 rounded-full mb-md" src="https://source.unsplash.com/collection/39199601/1000x1000" alt="Enter alt text here" />
<p class="type-5xl">Jane Doe is the CEO of this company.</p>
<p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
<p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
<p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
<button class="px-5 py-3 // bg-a-600 text-p-50 rounded-button">Email</button>
</div>
</div>
</div>
</div>
</div>
</div><soulmagic id="team-grid" users=".card">
<set targets=".longerbio">
<auto-alpha>0</auto-alpha>
<backface-visibility>hidden</backface-visibility>
</set>
<event type="click" trigger="button" away="false" closer=".overlay, .closer"></event>
<timeline>
<to targets=".longerbio">
<auto-alpha>1</auto-alpha>
</to>
<to targets="body" position="0" scope="html">
<overflow>hidden</overflow>
</to>
</timeline>
<timeline>
<to targets=".longerbio">
<auto-alpha>0</auto-alpha>
</to>
<to targets="body" position="0" scope="html">
<overflow>auto</overflow>
</to>
</timeline>
</soulmagic>
<!-- SOULSECTIONS -->
<!-- .bb2xlc -->
<div class="bb2xlc // p--xl">
<!-- .subsection -->
<div class="subsection // flex flex-col items-center // max-w--doc">
<!-- .grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-md gap-y-lg">
<!-- .card -->
<div class="card relative // rounded-ctr shadow-md overflow-hidden">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="Enter alt text here" />
<!-- .core -->
<div class="core // p-sm lc-mb-0i">
<p class="mb-4i // type-xl font-600i">Jane Doe</p>
<p class="type-xs opacity-md">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi dolore tenetur optio.</p>
<button class="mt-sm text-a-600 type-xs">Full Bio</button>
</div>
<!-- .longerbio -->
<div class="hidden-ib longerbio // fixed z-10 inset-0 // flex flex-col items-center justify-center // w-full h-screen">
<!-- .overlay -->
<div class="overlay absolute inset-0 // h-full w-full // bg-p-900 bg-opacity-95"></div>
<!-- .core -->
<div class="core relative // max-w-3xl p-md // shadow-lg bg-p-50 overflow-y-scroll" style="max-height: 75vh;"><button class="closer absolute right-8 top-4 // flex items-center // text-p-900 text-4xl opacity-50">×</button>
<img class="w-16 md:w-48 rounded-full mb-md" src="https://source.unsplash.com/collection/39199601/1000x1000" alt="Enter alt text here" />
<p class="type-5xl">Jane Doe is the CEO of this company.</p>
<p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
<p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
<p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
<button class="px-5 py-3 // bg-a-600 text-p-50 rounded-button">Email</button>
</div>
</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.