Media Grid Items

Media grid items contain a media element – typically an image – on the left with a headline and text on the right (or, in the Delta Design System, vice-versa). When grouped together in a media grid block, this pattern is a perfect component to preview content such as blog posts, user information, and more.

Here are some of the features and options of media grid items:

On smaller screens, menu grid items stack vertically, and those media grid items stack one on top of the next in the block.
On screens wider than 48rem, each media grid item changes to a horizontal alignment.
Media grid items are left-aligned horizontally be default. Use the .reverse class to change to right-aligned. In this way, you can actually create a media grid block with items that flip in either direction.

Media Grid Item Example

Example of image used in media grid item layout — Photo: Bratislava by David Cohen

Media Grid Item Headline

Media grid items are the perfect component to use when you need to create an easy to read table of contents.

Learn more

html

<div class="media-grid-item">
  <figure>
    <img src="../../assets/images/bratislava-2x.jpg" srcset="../../assets/images/bratislava-1x.jpg 1x, ../../assets/images/bratislava-2x.jpg 2x" alt="Example of image used in media grid item layout">
  <figcaption><cite>Photo: <a href="https://www.stockio.com/free-photo/bratislava-2" target="_blank">Bratislava</a> by David Cohen</cite></figcaption>
  </figure>
  <div class="text">
    <h2>Media Grid Item Headline</h2>
    <p>Media grid items are the perfect component to use when you need to create an easy to read table of contents.</p>
    <p class="icon"><a href="#!">Learn more<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg></span></a></p>
  </div>
</div>