Media Object

Default

The Media Object pattern is one of the smallest foundational pieces of many web pages. At its core, the media object allows you to embed a graphic element to the side of some arbitrary content. Our media object has a few additional enhancements to work better within CPE sites:

Fixed Grid Sizing

Many media object patterns allow the graphic element to be any size. Ours defaults to responsively sizing the graphic along a grid. On smaller screens it takes up 1/3 of available space. On larger screens it only takes up 1/6.

Optional Title Block

In addition to including graphic and content blocks, you can optionally include a title block. On smaller screens the title is rendered above the graphic and content. On larger screens, the title is rendered to the right of the graphic, above the content.

Sometimes we want the entire media object to act as a clickable link.

However, this can lead to accessibility issues. If the entire object is wrapped in a link, then screen readers will read out the entire block content as link text. It would be better if the link text was more concise.

To support this, we can add a link with the MediaObject-link class. These links use a special technique to make the entire media object clickable without messing up the screen reader experience

Using the Media Object Pattern

The Media Object is composed of three blocks

  • Title (Optional): A container for your product title. Usually an h1–h6 tag.
  • Graphic: A container for your product thumbnail. Usually an img.
  • Content: A container for some content. Could be a paragraph or a list of specs.
Placeholder image

Content

<div class="MediaObject">

  <div class="MediaObject-graphic">
    <img src='https://via.placeholder.com/600' alt="Placeholder image">
  </div>

    <div class="MediaObject-content">
      <p>Content</p>
    </div>
  </div>

With Title

Here's an example showing the Media Object block with a title. Resize your browser window to see how it repositions itself responsively.

Title

Placeholder image

Content

<div class="MediaObject">
  <div class="MediaObject-title">
    <h1>Title</h1>
  </div>

  <div class="MediaObject-graphic">
    <img src='https://via.placeholder.com/600' alt="Placeholder image">
  </div>

    <div class="MediaObject-content">
      <p>Content</p>
    </div>
  </div>

Title With Link

Here's an example showing the Media Object block with a title wrapped in a MediaObject-link. You can see the entire media object is clickable.

Title

Placeholder image

Content

<div class="MediaObject">
  <div class="MediaObject-title">
    <h1>
      <a href="#" class="MediaObject-link">Title</a>
    </h1>
  </div>

  <div class="MediaObject-graphic">
    <img src='https://via.placeholder.com/600' alt="Placeholder image">
  </div>

    <div class="MediaObject-content">
      <p>Content</p>
    </div>
  </div>