Media

The media component is used for displaying groups of content with a corresponding media asset, such as an image, avatar or icon.

npm version

npm install @vrembem/media
@import "vrembem/media/index";

media

Media Content Title

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

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

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

<div class="media">
  <div class="media__icon">
    ...
  </div>
  <div class="media__body">
    ...
  </div>
</div>

media_reverse

Media Content Title

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

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.

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>

Blog listing

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

Comments section

3 Comments

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.

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.

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 flex_justify_between">
      <a href="#">[name]</a>
      <a class="link link_subtle" href="#">[timestamp]</a>
    </h2>
    <p>[comment]</p>
    <ul class="menu">
      [menuitems]
    </ul>
  </div>
</div>

Quotes listing

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