Media

An abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc).

Included is support for left and right aligned content, content alignment options, nesting, and more.

Usage

Default media

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, odio? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, odio? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, odio?

<div class="o-media">
  <div class="o-media__figure">
    <img src="..." alt="...">
  </div>
  <div class="o-media__body">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

Alignment

Center (.o-media--center)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Bottom (.o-media--bottom)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Direction

Reverse (.o-media--reverse)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Alternate (.o-media--alternate)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

No padding (.o-media--collapse)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maxime mollitia qui. Accusamus aliquam amet architecto assumenda at, consequuntur, debitis eius eligendi fuga hic nemo nihil non officiis sequi, voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque deleniti dolore ex ipsa iusto labore magni nam praesentium voluptate? Assumenda consequatur dolorem sit unde. Accusamus nobis sit suscipit vitae?

Nested

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda at blanditiis cumque cupiditate dolor, eaque fugit harum inventore ipsum laborum minus molestiae mollitia, necessitatibus quidem rerum saepe sit sunt velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid amet animi autem corporis et hic labore maiores minima natus nihil possimus qui recusandae, similique voluptates? Earum explicabo magni quae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, deserunt dolores, doloribus eveniet fugit ipsam iure maxime minima nemo numquam possimus quidem repellendus tempore temporibus tenetur ut veritatis. Minima, molestiae!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto atque debitis dolor dolorem dolores est fugiat inventore ipsum labore, minus molestias nobis non provident quam qui quia quisquam vitae.