Media
Image Box
An image with heading, text and link, in many designs.
Live demo
See it in action
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="imgbox-wrap ibx-4d0bad87 imgbox imgbox--design-stacked imgbox--part-stacked imgbox--ratio-ratio-4-3 imgbox--fx-zoom-in imgbox--speed-normal imgbox--linked" style="--imgbox-media-w:50%;--imgbox-ov-opacity:0.6;">
<a class="imgbox__link" href="#" aria-label="Mountains">
<div class="imgbox__stack">
<figure class="imgbox__media">
<span class="imgbox__media-inner"><img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-3114d1c003fd.jpg" alt="Mountains" class="imgbox__img" loading="lazy" decoding="async" /></span>
</figure>
<div class="imgbox__head">
<span class="imgbox__eyebrow">Image Box</span>
<h3 class="imgbox__title">Mountains</h3>
</div>
<div class="imgbox__body">
<div class="imgbox__text">
<p>An image with a heading, supporting text and an optional button — in many designs.</p>
</div>
<span class="imgbox__btn imgbox__btn--arrow">Read more <span class="imgbox__btn-arrow" aria-hidden="true">→</span></span>
</div>
</div></a>
</div>
</div>
</div>
</div>
</section>To learn more about the Image 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.