Image & Text

Full-height media beside a contrasting content panel; columns stack at the mobile breakpoint.

Supporting images.

Give your story room to breathe with edge-to-edge media and a focused content area.

Replace the illustration with an image using object-fit: cover to fill the column.

ALTERNATE DIRECTION

Lead with the story.

Use text on the left and imagery on the right when the written message should be encountered first. On mobile, content returns to a natural reading order.

Explore the template

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.


<div class="cp-split-media">
<div aria-label="Abstract mountain landscape" class="cp-landscape" role="img">
<span>
</span>
</div>
<div>
<h3>
         Supporting images.
        </h3>
<p>
         Give your story room to breathe with edge-to-edge media and a focused content area.
        </p>
<p>
         Replace the illustration with an image using object-fit: cover to fill the column.
        </p>
<a class="btn btn-primary" href="/templates/about-us/">
         Explore the template
        </a>
</div>
</div>