Components › Utilities

Media Objects

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

BaseBase › DefaultBase › Centered verticallyBase › ReverseBase › Reverse centered verticallyBase › Double figuresBasedev ready

Preview

Code

<div class="slds-media">
  <div class="slds-media__figure">
    <img src="/assets/images/avatar3.jpg" class="slds-avatar--large" alt="Placeholder" />
  </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>

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.

ResponsiveResponsivedev ready

Preview

Code

<div class="slds-media slds-media--responsive">
  <div class="slds-media__figure">
    <img src="/assets/images/avatar2.jpg" class="slds-avatar--large" alt="Placeholder" />
  </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>

This responsive media object stacks on small screens using the media query mq-small-max and then switches to the regular side-by-side display for larger screens.

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create media objects.
Class NameUsage
.slds-media
Applied to:

Outcome:

Defines the overall media object

Required:

Required

Comments:

Can be applied to any outer element and will be as wide as its parent container

.slds-media__figure
Applied to:

Outcome:

Defines the figure area

Required:

No, optional element or modifier

Comments:

Apply this class to the first element inside the .slds-media and contains the image, icon, svg or video

.slds-media__figure--reverse
Applied to:

Outcome:

Defines the figure area on the other side

Required:

No, optional element or modifier

Comments:

Apply this class to the last element inside the .slds-media and contains the image, icon, svg or video

.slds-media__body
Applied to:

Outcome:

Defines the body area

Required:

Required

Comments:

Apply this class to the second element inside the .slds-media and contains the text or other content

.slds-media--center
Applied to:

.slds-media

Outcome:

Aligns the content in the .slds-media__body to the middle of the .slds-media__figure

Required:

No, optional element or modifier

Comments:

--

.slds-media--reverse
Deprecated
Applied to:

.slds-media

Outcome:

Reverses the media object so that the figure is on the right

Required:

No, optional element or modifier

Comments:

Use existing .slds-media__figure and .slds-media__figure--reverse instead.

.slds-media--double
Deprecated
Applied to:

.slds-media

Outcome:

Allows you to add a figure on both the right and left sides

Required:

No, optional element or modifier

Comments:

Use existing .slds-media__figure and .slds-media__figure--reverse instead.

.slds-media--responsive
Applied to:

.slds-media

Outcome:

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

Required:

No, optional element or modifier

Comments:

--