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

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

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

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

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

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>