Media

Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ut enim ad minim veniam
  • quis nostrud exercitation ullamco laboris
  • nisi ut aliquip ex ea commodo consequat

<div class="media media--vertical">
  <div class="media__item">
    <svg role="img" class="icon icon--blue icon--big">
      <use xlink:href="#ruxit"></use>
    </svg>
  </div>
  <div class="media__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
    <ul>
      <li>ut enim ad minim veniam</li>
      <li>quis nostrud exercitation ullamco laboris</li>
      <li>nisi ut aliquip ex ea commodo consequat</li>
    </ul>
  </div>
</div>

    
image placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ut enim ad minim veniam
  • quis nostrud exercitation ullamco laboris
  • nisi ut aliquip ex ea commodo consequat

<div class="media media--horizontal">
  <div class="media__item">
    <img src="http://placehold.it/350x350" alt="image placeholder">
  </div>
  <div class="media__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
    <ul>
      <li>ut enim ad minim veniam</li>
      <li>quis nostrud exercitation ullamco laboris</li>
      <li>nisi ut aliquip ex ea commodo consequat</li>
    </ul>
  </div>
</div>

    

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ut enim ad minim veniam
  • quis nostrud exercitation ullamco laboris
  • nisi ut aliquip ex ea commodo consequat
image placeholder

<div class="media media--horizontal">
  <div class="media__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
    <ul>
      <li>ut enim ad minim veniam</li>
      <li>quis nostrud exercitation ullamco laboris</li>
      <li>nisi ut aliquip ex ea commodo consequat</li>
    </ul>
  </div>
  <div class="media__item">
    <img src="http://placehold.it/350x250" alt="image placeholder">
  </div>
</div>

    
image placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ut enim ad minim veniam
  • quis nostrud exercitation ullamco laboris
  • nisi ut aliquip ex ea commodo consequat

<div class="media media--horizontal">
  <div class="media__item">
    <img src="http://placehold.it/350x450" alt="image placeholder">
  </div>
  <div class="media__content">
    <div class="media media--vertical">
      <div class="media__item">
        <svg role="img" class="icon icon--green icon--big">
          <use xlink:href="#ruxit"></use>
        </svg>
      </div>
      <div class="media__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
        <ul>
          <li>ut enim ad minim veniam</li>
          <li>quis nostrud exercitation ullamco laboris</li>
          <li>nisi ut aliquip ex ea commodo consequat</li>
        </ul>
      </div>
    </div>
  </div>
</div>

    

Introduction

The Groundhog media component is a combination of any type of media (img, video, audio, svg, ...) and some content. The content can be text or again a media component.

Including a media component

  1. To include a media component create a wrapping div with a .media class and the desired alignment-class (horizontal or vertical, see below).
    <div class="media media--vertical">
    ...
    </div>
    
  2. The media element itself is put into a div with a .media__item class, the content in a div with a .media__content class.
    <div class="media media--vertical">
    <div class="media__item">
     ...
    </div>
    <div class="media__content">
     ...
    </div>
    </div>
    
  3. The order of the inner div elements can be reversed, if the media item should be on the right or below the text.
    <div class="media media--vertical">
    <div class="media__content">
     ...
    </div>
    <div class="media__item">
     ...
    </div>
    </div>
    
  4. Media components can be nested.
    <div class="media media--horizontal">
    <div class="media__item">
     ...
    </div>
    <div class="media__content">
     <div class="media media--vertical">
       <div class="media__item">
         ...
       </div>
       <div class="media__content">
         ...
       </div>
     </div>
    </div>
    </div>
    

Available classes for media

class name effect
.media--vertical The media item and the media content are aligned vertically.
.media--horizontal The media item and the media content are aligned horizontally.