Media Objects
- HTML/CSS:Dev Ready
- Layout:Desktop Only
When you need text and a figure next to each other, use a media object.
Media Objects: Default
Preview
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
- 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 | * |