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.

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-media__body to the middle of the .slds-media__figure

Restrict*
ModifierTrue
Selector.slds-media__figure_reverse
Summary

Defines the figure area on the other side

Restrict*
ModifierTrue
Selector.slds-media_responsive
Summary

.slds-media__figure and .slds-media__body stack on smaller screens

Restrict*