Media Object

Media objects are super useful components for displaying an item, usually an image, alongside some content, usually text. You could put lists, grids, or even other media objects inside.

Basics

Foundation's Media Object will help you create this common repeatable pattern and can be used several different ways. A media object is a container with the class .media-object, and two or three sections with the class .media-object-section.

Watch this part in video

<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src="assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>Dreams feel real while we're in them.</h4>
    <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
  </div>
</div>

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

In flexbox mode, the class `.main-section` must be added to your center section in order to properly size it.

<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section main-section">
    <h4>Dreams feel real while we're in them.</h4>
    <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
  </div>
</div>

Section Alignment

Each section aligns to the top by default, but individual sections can also be middle- or bottom-aligned with the .middle and .bottom classes.

Watch this part in video

<div class="media-object">
  <div class="media-object-section middle">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-2.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>Why is it so important to dream?</h4>
    <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
    <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.</p>
  </div>
  <div class="media-object-section bottom">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-3.jpg">
    </div>
  </div>
</div>

Why is it so important to dream?

So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.

What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.

In flexbox mode, you can use the flexbox helper classes instead to get the same result. The .align-* classes can be used on the container to align every child section at once, or individual child sections can be aligned with .align-self-* classes.

<div class="media-object">
  <div class="media-object-section align-self-middle">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-2.jpg">
    </div>
  </div>
  <div class="media-object-section main-section">
    <h4>Why is it so important to dream?</h4>
    <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
    <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.</p>
  </div>
  <div class="media-object-section align-self-bottom">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-3.jpg">
    </div>
  </div>
</div>

Stack on Small

By adding the .stack-for-small class, you can make your media object responsive. Images will get a width of 100%, but this can be changed.

Watch this part in video

<div class="media-object stack-for-small">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>I Can Stack.</h4>
    <p>Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.</p>
  </div>
</div>

I Can Stack.

Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.

Nesting Media Objects

By nesting a media object into the media-object-section section, you can easily indent it. This is great for comment strings.

<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>I'm First!</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.</p>
    <!-- Nested media object starts here -->
    <div class="media-object">
      <div class="media-object-section">
        <div class="thumbnail">
          <img src= "assets/img/media-object/avatar-2.jpg">
        </div>
      </div>
      <div class="media-object-section">
        <h4>I'm Second!</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.</p>
      </div>
    </div>
    <!-- And ends here -->
  </div>
</div>

I'm First!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.

I'm Second!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$mediaobject-margin-bottom`	Number	`$global-margin`	Bottom margin of a media object.
`$mediaobject-section-padding`	Number	`$global-padding`	Left and right padding on sections within a media object.
`$mediaobject-image-width-stacked`	Number	`100%`	Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

media-object-container

@include media-object-container;

Adds styles for a media object container.

media-object-section

@include media-object-section($padding);

Adds styles for sections within a media object.

Parameter	Type	Default Value	Description
`$padding`	Number	`$mediaobject-section-padding`	Padding between sections.

media-object-stack

@include media-object-stack;

Adds styles to stack sections of a media object. Apply this to the section elements, not the container.