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

<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

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