Interactive
Flip Box
A card that flips on hover to reveal its back.
Live demo
See it in action
Fast
Flexible
Free
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12 fw-col-sm-4">
<div class="flip-box fb-1f8789ba fw-fb fw-fb--design-solid design-solid fw-fb--dir-left fw-fb--mode-flip fw-fb--hover" style="--fb-h:300px;--fb-speed:600ms;--fb-ease:cubic-bezier(.2,.7,.2,1);--fb-radius:.625rem;">
<div class="fw-fb__inner">
<div class="fw-fb__face fw-fb__front">
<div class="fw-fb__content">
<span class="fw-fb__icon" aria-hidden="true"><i class="fa-solid fa-bolt"></i></span>
<h3 class="fw-fb__title">Fast</h3>
</div>
</div>
<div class="fw-fb__face fw-fb__back">
<div class="fw-fb__content">
<h3 class="fw-fb__title">Fast</h3>
<div class="fw-fb__text">
<p>Lean, cache-friendly markup keeps pages quick to load.</p>
</div>
<a class="btn fw-fb__btn" href="#">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Flip Box shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.