Media Object
Media Object is a layout utility that allows an image or figure to be positioned horizontally next to some form of content.
- Status
- production
- Version
- 4.0.3
- Import from
@twilio-paste/core/media-object— or —@twilio-paste/media-object
Guidelines#
About Media Object#
First created by Nicole Sullivan back in 2010, the Media Object in Paste aims to serve many of the same purposes as the original concept. It's a layout pattern that you will see all across the web, on almost all the websites you will come across. We're pretty sure you'll never unsee this going forward.
What is the internet made of? At least the UI layer is mainly composed of media blocks.
So what's a media object? An image or figure positioned horizontally next to some form of content. The figure can sit on either or both sides of the content. That's it. It sounds really simple, but it's literally everywhere on the Internet. For example, the top left of this website uses a Media Object.
Paste
Design System
If you were to draw the concept, it might look something like this:
The aim of the Media Object to make this common layout pattern easy and efficient to implement.
Accessibility#
Media Object has no specific accessibility concerns. While using this layout component, it is up to you to manage the resulting accessibility implications. You may want to consider how the Media Object affects readability due to ordering, and the visual or content hierarchy of your page.
Examples#
Basic Media Object#
MediaFigure Spacing#
To set some spacing between the MediaFigure and MediaBody, set the spacing property on the MediaFigure. This prop takes any spacing token.
Vertical alignment#
By default the MediaBody is top-aligned to the MediaFigure. By setting the verticalAlign prop on the MediaObject to "center", you can align the MediaBody to the middle of the MediaFigure.
MediaFigure at the end#
To place the MediaFigure after the MediaBody, at the end of the MediaObject, place the MediaFigure after the MediaBody in the DOM. Be sure to set the align prop on the MediaFigure to "end" to reverse the spacing.
Double figure#
To have a MediaFigure at either end of the MediaObject, add a MediaFigure before and after the MediaBody, setting the second MediaFigure to align="end".
Example use cases#
The Alert component#
The Alert is a classic Media Object layout. The status level icon is the Media Figure, and the alert description is the Media Body.
A social feed item header#
Here we're center aligning an avatar next to a timestamp and username.
Chat log bubble#
By placing the figure at the end of the Media Object and top aligning it to a chat bubble, we can start to compose a custom chat log UI.
Composing a Media Object#
The Media Object is a composition of three things;
- The
MediaObject - A
MediaFigure - A
MediaBody
The MediaObject acts as the outer wrapper of the pattern. The MediaFigure is the container for the content that is often graphical in nature and fixed in size. The MediaBody is a container typically for accompanying text content and fills the remaining space.
The content of a MediaFigure and MediaBody is entirely up to you.
The size of MediaFigure is determined by the content that is placed inside of it. MediaBody will fill the remaining space in the row.
Usage Guide#
Installation#
yarn add @twilio-paste/media-objectUsage#
import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';const Component = (props) => ( <MediaObject verticalAlign="center"> <MediaFigure spacing="space40">...</MediaFigure> <MediaBody>...</MediaBody> </MediaObject>);API#
MediaObject Props#
| Prop | Type | Description | Default |
|---|---|---|---|
| as | keyof JSX.IntrinsicElements | 'span' | |
| marginBottom | Spacing | null | |
| marginTop | Spacing | null | |
| verticalAlign | center, top | Aligns the figure and body | null |
MediaFigure Props#
| Prop | Type | Description | Default |
|---|---|---|---|
| align | start, end | 'start' | |
| as | keyof JSX.IntrinsicElements | 'span' | |
| spacing | Spacing | Space between the figure and body | null |
MediaBody Props#
| Prop | Type | Description | Default |
|---|---|---|---|
| as | keyof JSX.IntrinsicElements | 'span' |