Media

In groundhog since v0.1.1

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>

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


<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>

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

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>
```

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>

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>

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.