Skip to main content

Media Overlays

Version: 0.9.0
Edit

We use the media overlay object to position text content over an image or other piece of media.

  • When to Use

    Setting some content over a piece of media

  • When not to Use

    • Without media

Media Overlay

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/media-overlays.scss#L9

Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.

<!-- media overlay -->
<div class="o-media-overlay">
 <div class="o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://placehold.it/2560x1024" alt="" />
    <div class="o-media-overlay__image-overlay u-image--5x2" aria-hidden="true" focusable="false">
      <!--overlay-->
    </div>
 </div>
 <div class="o-media-overlay__content">
    <p>Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.</p>
 </div>
</div>

Media Overlay with Caption

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/media-overlays.scss#L156

Heading

Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump.

Elit brisket strip steak shoulder consectetur pork chop. 

<!-- media overlay with caption -->
<div class="o-media-overlay o-media-overlay--with-caption">
 <div class="o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://placehold.it/2560x1920" alt="" />
    <div class="o-media-overlay__image-overlay u-image--4x3" aria-hidden="true" focusable="false">
      <!--overlay-->
    </div>
 </div>
 <div class="o-media-overlay__content">
    <h2>Heading</h2>
    <p>Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump.</p>
 </div>
  <div class="o-media-overlay__caption">
    <p>
      <span class="c-pseudo-icon icon-info-stroke u-space-inline-right--xxs u-vertical-align-middle" aria-hidden="true" focusable="false">
         <!-- icon -->
      </span>
      <span class="u-vertical-align-middle">Elit brisket strip steak shoulder consectetur pork chop.</span>
   </p>
  </div>
</div>

Stacked at Mobile

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/media-overlays.scss#L241

Heading

<!-- media overlay stacked at mobile -->
<div class="o-media-overlay o-media-overlay--stacked\@mobile">
 <div class="o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://placehold.it/2560x1280" alt="" />
    <div class="o-media-overlay__image-overlay u-image--2x1" aria-hidden="true" focusable="false">
      <!--overlay-->
    </div>
 </div>
 <div class="o-media-overlay__content">
    <h1 class="u-text-align-center">Heading</h1>
    <ul class="o-inline-list o-inline-list--block">
       <li class="o-inline-list__item">
          <a class="c-button c-button--large" href="#">Button Link</a>
       </li>
       <li class="o-inline-list__item">
          <a class="c-button c-button--large c-button--on-dark" href="#">Button Link</a>
       </li>
    </ul>
 </div>
</div>

Justified to Start

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/media-overlays.scss#L295

Heading

Copy

Button Link 
<!-- media overlay justified to start -->
<div class="o-media-overlay o-media-overlay--justify-start">
  <div class="o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://placehold.it/2560x853" alt="" />
    <div class="o-media-overlay__image-overlay u-image--3x1" aria-hidden="true" focusable="false">
      <!--overlay-->
    </div>
  </div>
  <div class="o-media-overlay__content">
    <h2>Heading</h2>
    <p class="u-font-weight-light">Copy</p>
    <a class="c-button" href="#">Button Link</a>
  </div>
</div>