Media - CGU Brand

Responsive Media

Use the the responsive-media-{ratio} class to create responsive containers for images and embedded content where {ratio} equals the aspect ratio of your content. The syntax works as follows:

<div class="responsive-media-{ratio}">
  <iframe></iframe>
  <!-- OR -->
  <video></video>
  <!-- OR -->
  <object></object>
  <!-- OR -->
  <img />
  <!-- OR -->
  <div class="responsive-media-content"></div>
</div>

The following aspect ratios are available:

16×9

<div class="responsive-media-16x9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/AQFMaSSPRTc" frameborder="0" allowfullscreen></iframe>
</div>

4×3

<div class="responsive-media-4x3">
  <img src="//unsplash.it/800/600/" alt="placeholder"/>
</div>

3×2

<div class="responsive-media-3x2">
  <img src="//unsplash.it/800/600/" alt="placeholder"/>
</div>

1×2

<div class="responsive-media-1x2">
  <img src="//unsplash.it/800/600/" alt="placeholder"/>
</div>

1×1

<div class="responsive-media-1x1">
  <img src="//unsplash.it/800/800/" alt="placeholder"/>
</div>

Using the .responsive-media-content class

If your content is not an embeddable object or an image, you can use the responsive-media-content class.

<div class="responsive-media-16x9">
  <div class="responsive-media-content u-bg-pattern-2 u-bg-teal">
    <span class="u-position-center">16x9</span> 
  </div>
</div>
<div class="u-clear">
  <article class="u-span-6">
    <div class="responsive-media-4x3 u-push">
      <div class="responsive-media-content u-bg-pattern-2 u-bg-teal">
        <span class="u-position-center">4x3</span> 
      </div>
    </div>
  </article>
  <article class="u-span-6">
    <div class="responsive-media-3x2 u-push">
      <div class="responsive-media-content u-bg-pattern-2 u-bg-teal">
        <span class="u-position-center">3x2</span> 
      </div>
    </div>
  </article>
</div>
<div class="u-clear">
  <article class="u-span-6">
    <div class="responsive-media-1x2 u-push">
      <div class="responsive-media-content u-bg-pattern-2 u-bg-teal">
        <span class="u-position-center">1x2</span> 
      </div>
    </div>
  </article>
  <article class="u-span-6">
    <div class="responsive-media-1x1 u-push">
      <div class="responsive-media-content u-bg-pattern-2 u-bg-teal">
        <span class="u-position-center">1x1</span> 
      </div>
    </div>
  </article>
</div>