Media object

So here we're specifically talking about how we position images on the left of text


How we design them

  • To keep things consistent our image sizes are fixed and the content expands to fill the remaining space
  • The image width determines the size of the left hand column

How they look

These examples all use SVG & gg-u-icon utility classes, but images can be used instead.

1. Media object with no gutter

View demo Open in new window
320 x 568
View code
<div class="gg-o-media">
  <div class="gg-o-media__img">
    <svg class="gg-u-icon gg-u-icon--medium" viewBox="0 0 100 100">
      <rect width="100" height="100"></rect>
    </svg>
  </div>
  <div class="gg-o-media__content">
    <p>No contract means you're free to go, free to stay. That's why we work our socks off to keep you.</p>
  </div>
</div>

2. Media object with tiny gutter

View demo Open in new window
320 x 568
View code
<div class="gg-o-media gg-o-media--tiny-gutter">
  <div class="gg-o-media__img">
    <svg class="gg-u-icon gg-u-icon--medium" viewBox="0 0 100 100">
      <rect width="100" height="100"></rect>
    </svg>
  </div>
  <div class="gg-o-media__content">
    <p>No contract means you're free to go, free to stay. That's why we work our socks off to keep you.</p>
  </div>
</div>

3. Media object with small gutter

View demo Open in new window
320 x 568
View code
<div class="gg-o-media gg-o-media--small-gutter">
  <div class="gg-o-media__img">
    <svg class="gg-u-icon gg-u-icon--large" viewBox="0 0 100 100">
      <rect width="100" height="100"></rect>
    </svg>
  </div>
  <div class="gg-o-media__content">
    <p>No contract means you're free to go, free to stay. That's why we work our socks off to keep you.</p>
  </div>
</div>

4. Media object with medium gutter

View demo Open in new window
320 x 568
View code
<div class="gg-o-media gg-o-media--medium-gutter">
  <div class="gg-o-media__img">
    <svg class="gg-u-icon gg-u-icon--huge" viewBox="0 0 100 100">
      <rect width="100" height="100"></rect>
    </svg>
  </div>
  <div class="gg-o-media__content">
    <p>No contract means you're free to go, free to stay. That's why we work our socks off to keep you.</p>
  </div>
</div>

5. Media object aligned vertically

View demo Open in new window
320 x 568
View code
<div class="gg-o-media gg-o-media--medium-gutter gg-o-media--center-vertical">
  <div class="gg-o-media__img">
    <svg class="gg-u-icon gg-u-icon--medium" viewBox="0 0 100 100">
      <rect width="100" height="100"></rect>
    </svg>
  </div>
  <div class="gg-o-media__content">
    <p>No contract means you're free to go, free to stay. That's why we work our socks off to keep you.</p>
  </div>
</div>