sunweb

Media

object media

Definition


It's a very occurring pattern to have an image side-by-side with text or another content. The purpose of the media object is solve that situation.

o-media

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.




      <div class="o-media">
        <div class="o-media__img"></div>
        <div class="o-media__body"></div>
      </div>

Reverse modifier


Flips the object layout, putting the image at the right side and the content at the left.

o-media > o-media--reverse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.




      <div class="o-media o-media--reverse">
        <div class="o-media__img"></div>
        <div class="o-media__body"></div>
      </div>