Media Objects

Default

Centered vertically

Reverse

Reverse centered vertically

Double figures

Small space between figure and body

Large space between figure and body

Responsive

.slds-media__figure

.slds-media__figure — Defines the figure area

.slds-media__body

.slds-media__body — Defines the body area

.slds-media_small

.slds-media_small — Adjusts whitespace on smaller media objects

.slds-media_large

.slds-media_large — Adjusts whitespace on larger media objects

.slds-media_inline

.slds-media_inline — Aligns the figure and body to be inline-block of each other

.slds-media_center

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

.slds-media__figure_reverse

.slds-media__figure_reverse — Defines the figure area on the other side

.slds-media_responsive

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