--- title: Media Object description: 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. video: 'H74_A6eI-wY' sass: scss/components/_media-object.scss flex: true --- ## 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

edit on codepen button
```html_example

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.

```html

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.

``` --- ## 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

edit on codepen button
```html_example

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

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.

``` --- ### 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

edit on codepen button
```html_example

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.
edit on codepen button
```html_example

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.

```