Media Object
A container for creating repeatable media content
The media object is perfect for creating social media style content, among other things. The media object is made up of the media
block and the following elements:
-
media__left -
media__content -
media__right
Destry Alexandrine Yates
@iloveseed
27m ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
<div class="media">
<div class="media__left">
<div class="image is-small-square">
<img src="https://orbitcss.com/img/destry.jpg">
</div>
</div>
<div class="media__content">
<p>
<strong>Destry Alexandrine Yates</strong>
<small>@iloveseed</small>
<small>27m ago</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<div class="media__right">
<button class="button--close"></button>
</div>
</div>
</> Show code
The media__content
element will grow to take up all available space, while the media__left
and media__right
elements will only take up as much space as required.
Nesting
Media blocks can be easily nested by putting additional media
blocks within the media__content
element.
<div class="media">
<div class="media__left">
<div class="image is-small-square">
<img src="https://orbitcss.com/img/rhys_profile.jpg">
</div>
</div>
<div class="media__content">
<p>
<strong>Rhys Hall</strong>
<small>@rhysnhall</small>
<small class="is-float-right">27m ago</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
<small class="has-text-dark-grey">
<a href="#">Like</a> · <a href="#">Reply</a> | 4 likes
</small>
<div class="media">
<div class="media__left">
<div class="image is-tiny-square">
<img src="https://orbitcss.com/img/destry.jpg">
</div>
</div>
<div class="media__content">
<p>
<strong>Destry Alexandrine Yates</strong>
<small>@iloveseed</small>
<small class="is-float-right">27m ago</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
<small class="has-text-dark-grey">
<a href="#">Like</a> · <a href="#">Reply</a> | 4 likes
</small>
</div>
<div class="media__right">
<button class="button--close"></button>
</div>
</div>
</div>
<div class="media__right">
<button class="button--close"></button>
</div>
</div>
<div class="media">
<div class="media__left">
<div class="image is-small-square">
<img src="https://orbitcss.com/img/rhys_profile.jpg">
</div>
</div>
<div class="media__content">
<textarea rows="4"></textarea>
<button class="button is-primary">Post comment</button>
</div>
</div>
</> Show code Variables
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $media-border-width | units | 1px |
| $media-border-style | string | solid |
| $media-border-color | color | #e9ecef |
| $media-padding-top | units | 1rem |
| $media-margin-top | units | 1rem |