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 class="fw-flexbox fw-flex fw-contained fw-collapse">
<div class="flip-box fb-e32a37e9 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>
</section>To learn more about the Flip Box shortcode, please check out the online manual here.