Jump to Navigation

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

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.

Base#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<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">

Examples#

Center#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media slds-media_center">
    <div class="slds-media__figure">
      <span class="slds-avatar slds-avatar_large">

Reverse#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media">
    <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>

Reverse Center#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media slds-media_center">
    <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>

Double#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<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">

Small#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media slds-media_small">
    <div class="slds-media__figure">
      <span class="slds-avatar slds-avatar_large">

Large#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media slds-media_large">
    <div class="slds-media__figure">
      <span class="slds-avatar slds-avatar_large">

Responsive#

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.

<div class="demo-only slds-size_3-of-4">
  <div class="slds-media slds-media_responsive">
    <div class="slds-media__figure">
      <span class="slds-avatar slds-avatar_large">

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-media__figure`
Summary	Defines the figure area
Restrict	`*`

Selector	`.slds-media__body`
Summary	Defines the body area
Restrict	`*`
Modifier	True

Selector	`.slds-media_small`
Summary	Adjusts whitespace on smaller media objects
Restrict	`*`
Modifier	True

Selector	`.slds-media_large`
Summary	Adjusts whitespace on larger media objects
Restrict	`*`
Modifier	True

Selector	`.slds-media_inline`
Summary	Aligns the figure and body to be inline-block of each other
Restrict	`*`
Modifier	True

Selector	`.slds-media_center`
Summary	Aligns the content in the .slds-media__body to the middle of the .slds-media__figure
Restrict	`*`
Modifier	True

Selector	`.slds-media__figure_reverse`
Summary	Defines the figure area on the other side
Restrict	`*`
Modifier	True

Selector	`.slds-media_responsive`
Summary	.slds-media__figure and .slds-media__body stack on smaller screens
Restrict	`*`

Media Objects Utility Release Notes