Media
An image to the left, with descriptive content to the right.
Where is it?
The Media object is located in 5-Objects/_objects.media.scss.
Elements
The Media Object has 2 elements:
o-media__imgo-media__body
Usage
<div class="o-media">
<div class="o-media__img">
<img src="http://unsplash.it/100" alt="Placeholder image" />
</div>
<div class="o-media__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam,
reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis
quasi praesentium ab vel at repellat amet atque?
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
Size modifiers
Use the size modifiers to adapt the gap between the elements.
| Class | Elements' gap |
|---|---|
| o-media--flush | 0 |
| o-media--tiny | $global-spacing-unit-tiny |
| o-media--small | $global-spacing-unit-small |
| o-media--large | $global-spacing-unit-large |
| o-media--huge | $global-spacing-unit-huge |
$global-spacing-unit map is located in 1-Settings/_settings.core.scss
Usage
.o-media--flush
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-media--tiny
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-media--small
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-media--large
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-media--huge
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
Alignment modifiers
Use the alignment modifiers to change the vertical alignment of the body.
| Class | Body's alignment |
|---|---|
| o-media--center | Center |
| o-media--bottom | Bottom |
| o-media--stretch | Fill the same height as the image |
Usage
.o-media--center
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-media--bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-media--stretch
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
Reverse modifiers
Use the reverse modifier to swap positions between elements.
Usage
.o-media--reverse
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?