Media Objects

Media Objects

When you need text and a figure next to each other, use a media object.

Media Objects: Default

Preview

No content has been added for this component.

No content has been added for this component.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media">
    <div class="slds-media__figure">
      <span class="slds-avatar slds-avatar_large">
        <img alt="Person name" src="/assets/images/avatar3.jpg" title="User avatar" />
      </span>
    </div>
    <div class="slds-media__body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.</p>
    </div>
  </div>
</div>

About Media Objects

Placing text next to an image, icon, figure, or video is common for many applications. The figure can be either on the right, left, or both. The text can start at the top of the image or be centered next to it. The width of the media object is controlled either by the parent container or a secondary module class.

The .slds-media object can be used as a container on any element. Inside are the two required elements. The figure (typically an image or an icon) should be placed inside an element with the .slds-media__figure class. Next to it is typically some text that should be placed in an element with the .slds-media__body class.

By default, the text starts at the top of the figure. Center the body and the figure by applying the .slds-media--center class to .slds-media.

To position the figure on the other side of the body, apply the .slds-media__figure--reverse to the figure.

You may also position figures on both sides of the body at the same time using .slds-media__figure and .slds-media__figure--reverse.


Overview of CSS Classes

Selector.slds-media__figure
Summary

Defines the figure area

Restrict*
Selector.slds-media__body
Summary

Defines the body area

Restrict*
ModifierTrue
Selector.slds-media_small
Summary

Adjusts whitespace on smaller media objects

Restrict*
ModifierTrue
Selector.slds-media_large
Summary

Adjusts whitespace on larger media objects

Restrict*
ModifierTrue
Selector.slds-media_center
Summary

Aligns the content in the .slds-mediabody to the middle of the .slds-mediafigure

Restrict*
ModifierTrue
Selector.slds-media__figure_reverse
Summary

Defines the figure area on the other side

Restrict*
ModifierTrue
Selector.slds-media_responsive
Summary

.slds-mediafigure and .slds-mediabody stack on smaller screens

Restrict*