Two-Up Image Feature Grid

A page section with its own header, and two columns with individual image, heading, text and link.

Categories

Image and Text

Keywords

columns group row

Preview

Copy Pattern

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Lorem ipsum

Lorem ipsum dolor sit amet

Note: Live previews like this may not be actual size. All previews are limited to the width of the content area and are displayed with additional padding around them.

Notes

This pattern is a group block that contains multiple Bootstrap rows, and needs to be placed in an existing container.
The group is not necessary, it is just a way to put some padding around the content. You can use Gutenberg’s ungroup option to get just the rows if you want.
You can alter the padding by using the available Gutenberg controls on the group block

Pattern Markup

<div class="wp-block-group">


<h2 class="wp-block-heading mt-0">Lorem ipsum</h2>

<figure class="wp-block-image size-full"><img src="https://placehold.co/588x305/00a3e0/FFFFFF/png" alt="" class="wp-image-5549"/></figure>

<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--uds-size-6)">
<h3 class="wp-block-heading mt-0">Lorem ipsum</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p><a href="#">Lorem ipsum dolor sit amet</a></p>
</div>

<figure class="wp-block-image size-full"><img src="https://placehold.co/588x305/00a3e0/FFFFFF/png" alt="" class="wp-image-5549"/></figure>

<p><a href="#">Lorem ipsum dolor sit amet</a></p>
</div>


</div>