Four-up Image Feature Grid

A two-by-two navigational section with its own heading. Each column has a feature image, heading, body text, and link.

Categories

Image and Text

Keywords

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

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 consists of a group block that contains two Bootstrap rows. As such, it needs to be placed inside an existing container

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>

<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>

<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-top:0;padding-right:var(--wp--preset--spacing--uds-size-6);padding-bottom:0;padding-left:0">
<h3 class="wp-block-heading mt-0">Lorem ipsum</h3>

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


</div>