Medias

Media objects are usually used for comment engines and other image and related text displays.

Title Subtitle

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.

<div class="c-card">
  <div class="c-card__item c-card__item--brand o-media">
    <div class="o-media__image">
      <img class="o-image" src="https://via.placeholder.com/80"/>
    </div>
    <div class="o-media__body">
      <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
      <p class="c-paragraph">
        Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.
      </p>
    </div>
  </div>
</div>

Title Subtitle

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.

<div class="c-card">
  <div class="c-card__item c-card__item--info o-media">
    <div class="o-media__body">
      <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
      <p class="c-paragraph">
        Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.
      </p>
    </div>
    <div class="o-media__image">
      <img class="o-image" src="https://via.placeholder.com/80"/>
    </div>
  </div>
</div>

To position the image or content append the --top, --center or --bottom modifiers.

Title Subtitle

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.

<div class="c-card">
  <div class="c-card__item o-media">
    <div class="o-media__image o-media__image--bottom">
      <img class="o-image" src="https://via.placeholder.com/80"/>
    </div>
    <div class="o-media__body">
      <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
      <p class="c-paragraph">
        Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.
      </p>
    </div>
  </div>
</div>

Title Subtitle

<div class="c-card">
  <div class="c-card__item o-media">
    <div class="o-media__image o-media__image--center">
      <img class="o-image" src="https://via.placeholder.com/80"/>
    </div>
    <div class="o-media__body">
      <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
      <p class="c-paragraph">
        Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.
      </p>
    </div>
  </div>
</div>

Title Subtitle

<div class="c-card">
  <div class="c-card__item o-media">
    <div class="o-media__image o-media__image--top">
      <img class="o-image" src="https://via.placeholder.com/80"/>
    </div>
    <div class="o-media__body">
      <h2 class="c-heading">Title <span class="c-heading__sub">Subtitle</span></h2>
      <p class="c-paragraph">
        Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam.
      </p>
    </div>
  </div>
</div>