Like
Be the first to like this
Preview
HTML
<div class="zap-hero py-16 bg-cover" style="background-image: url('')">
<div class="container mx-auto">
<div class="zap-header text-center mb-16">
<h2 class="mb-0 text-3xl md:text-4xl text-brand-primary">Title</h2>
</div>
<div class="zap-actions relative">
<div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<div class="zap-actions-btn bg-white border-t-4 border-brand-primary rounded-lg">
<!-- Add button URL below -->
<a href="" class="flex flex-col items-center group relative p-6 w-full
text-center text-gray-700 transition ease-in-out hover:text-gray-800
hover:no-underline">
<p class="text-2xl mt-2 mb-6 font-bold">Heading →</p>
<p class="mb-0 text-md">Description</p>
</a>
</div>
<div class="zap-actions-btn bg-white border-t-4 border-brand-primary rounded-lg">
<!-- Add button URL below -->
<a href="" class="flex flex-col items-center group relative p-6 w-full
text-center text-gray-700 transition ease-in-out hover:text-gray-800
hover:no-underline">
<p class="text-2xl mt-2 mb-6 font-bold">Heading →</p>
<p class="mb-0 text-md">Description</p>
</a>
</div>
<div class="zap-actions-btn bg-white border-t-4 border-brand-primary rounded-lg">
<!-- Add button URL below -->
<a href="" class="flex flex-col items-center group relative p-6 w-full
text-center text-gray-700 transition ease-in-out hover:text-gray-800
hover:no-underline">
<p class="text-2xl mt-2 mb-6 font-bold">Heading →</p>
<p class="mb-0 text-md">Description</p>
</a>
</div>
</div>
</div>
</div>
</div>
CSS
.zap-actions-btn:hover {
-webkit-transform: scale(1.02);
}
Follow the Topic
Site Management
Product Updates > Site Management
Code Snippet
Product Updates > Site Management > Code Snippet

To access please sign in or register for free
If you are a registered user on Zapnito Knowledge Hub, please sign in
Hi team, what image size would you recommend to fit as a background image here? Thanks!
Hey @Torie Hart we would recommend the dimensions of the snippet which is 1440 x 416 😊
Thank you Chyara!