Media

Image Content

An image beside text in a responsive two-column layout.

Live demo

See it in action

An image beside your text

Image Content pairs a responsive image with rich editor text in a two-column layout. Flip the side, change the split ratio, and it stacks cleanly on mobile.

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="image-content ic-2de16c7f image-content__grid" style="--ic-cols:5fr 7fr;--ic-cols-rev:7fr 5fr;--ic-gap:1.5rem;--ic-valign:center;" data-bp="md" data-layout="left" data-mobile="image-first">
		<div class="the-image image-content__media">
			<img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-4888983f0675.jpg" alt="" class="image-content__image" loading="lazy" decoding="async" style="border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);width:100%;aspect-ratio:4 / 3;object-fit:cover" />
		</div>
		<div class="the-content image-content__body">
			<h2>An image beside your text</h2>
			<p>Image Content pairs a responsive image with rich editor text in a two-column layout. Flip the side, change the split ratio, and it stacks cleanly on mobile.</p>
		</div>
	</div>
</section>

To learn more about the Image Content shortcode, please check out the online manual here.