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


CSS Orbit @orbitcss 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">
      <svg width="100%" height="100%" viewBox="0 0 100 100" class="has-bg-light"></svg>
    </div>
  </div>
  <div class="media__content">
    <p>
      <strong>CSS Orbit</strong>
      <small>@orbitcss</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>
  </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

CSS Orbit @orbitcss27m 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">
      <svg width="100%" height="100%" viewBox="0 0 100 100" class="has-bg-light"></svg>
    </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">
          <svg width="100%" height="100%" viewBox="0 0 100 100" class="has-bg-light"></svg>
        </div>
      </div>
      <div class="media__content">
        <p>
          <strong>CSS Orbit</strong>
          <small>@orbitcss</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">
      <svg width="100%" height="100%" viewBox="0 0 100 100" class="has-bg-light"></svg>
    </div>
  </div>
  <div class="media__content">
    <textarea rows="4"></textarea>
    <button class="button is-primary">Post comment</button>
  </div>
</div>
</> Show code
Copy

CSS variables

You can customize the media element with the following CSS variables.

.media {
  --border-width: 1px;
  --border-color: hsl(210deg, 16%, 92%, 1);
  --padding-top: 1rem;
  --margin-top: 1rem;
}
Copy

Sass 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-colorcolorhsl(210deg, 16%, 92%, 1)
$media-padding-topunits1rem
$media-margin-topunits1rem