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

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.

Rhys Hall @rhysnhall27m 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.

Like · Reply | 4 likes

Destry Alexandrine Yates @iloveseed27m 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.

Like · Reply | 4 likes
<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_profile.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>
  </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
Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$media-border-widthunits1px
$media-border-stylestringsolid
$media-border-colorcolor#e9ecef
$media-padding-topunits1rem
$media-margin-topunits1rem