Media

The media component allows the composition of content which contains images, thumbnails or other media related to the content.

.media

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media">
  <img class="media__image" src="..." />
  <div class="media__body">
    ...
  </div>
</div>
<div class="media">
  ...
</div>

.media_reverse

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_reverse">
  ...
</div>

.media_stack_[bp]

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_stack_md">
  ...
</div>

Examples

Here are some examples of where you could use media in different content types.

<div class="media align-items_center">
  <img class="media__image" src="..." />
  <div class="media__body">
    <h2 class="h3"><a href="#">...</a></h2>
    <p class="text_subtle">...</p>
  </div>
</div>

3 Comments

Noam Chomsky 47 minutes ago

Suspendisse potenti. Nullam tincidunt venenatis urna, at pharetra justo imperdiet vehicula. Morbi rutrum dapibus placerat. Maecenas a neque ut dui tincidunt pharetra et fermentum diam.

Howard Zinn 18 hours ago

Suspendisse potenti. Nullam tincidunt venenatis urna, at pharetra justo imperdiet vehicula. Morbi rutrum dapibus placerat. Maecenas a neque ut dui tincidunt pharetra et fermentum diam.

Emma Goldman 4 days ago

Suspendisse potenti. Nullam tincidunt venenatis urna, at pharetra justo imperdiet vehicula. Morbi rutrum dapibus placerat. Maecenas a neque ut dui tincidunt pharetra et fermentum diam.

<div class="media">
  <img class="media__image radius_circle" src="..." />
  <div class="media__body">
    <textarea class="input input_textarea" placeholder="Add a public comment..."></textarea>
  </div>
</div><!-- .media -->
<div class="media">
  <img class="media__image radius_circle" src="" />
  <div class="media__body">
    <h2 class="level align-items_start">
      <a href="#">[name]</a>
      <a class="link link_subtle" href="#">[timestamp]</a>
    </h2>
    <p>[comment]</p>
    <ul class="menu">
      [menuitems]
    </ul>
  </div>
</div>

Tweet Quotes

For those who stubbornly seek freedom there can be no more urgent task than to come to understand the mechanisms & practices of indoctrination.These are easy to perceive in totalitarian societies, much less so in the system of brainwashing under freedom to which we are subjected.

Hitler, Mussolini, Japanese fascists - all of them - are all full of humanitarian rhetoric. States are not moral agents. They can be compelled to observe legal and other requirements, but that can only be either by countervailing force or by their own citizens.

The UN outlawed the use of threat of intervention unless authorized by the UN Security Council or in self-defence against armed attack.That system did not survive for a second. It was violated immediately by the great powers, any power that could get away with it.

<div class="media media_stack_md align-items_center">
  <img class="media__image radius_circle" src="..." />
  <blockquote class="media__body text_lead">
    <p>[quote]</p>
    <footer>
      <cite>[name] <a class="link link_subtle" href="#">@[handle]</a></cite>
    </footer>
  </blockquote>
</div>