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