Skip to content
Change the site theme
(information)

Media Object

Media Object is a layout utility that allows an image or figure to be positioned horizontally next to some form of content.


Guidelines

Guidelines page anchor

About Media Object

About Media Object page anchor

First created by Nicole Sullivan(link takes you to an external page) 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.

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

Accessibility page anchor

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.

To set some spacing between the MediaFigure and MediaBody, set the spacing property on the MediaFigure. This prop takes any spacing token.

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.

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.

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

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

A social feed item header page anchor

Here we're center aligning an avatar next to a timestamp and username.

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

Composing a Media Object page anchor

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.


yarn add @twilio-paste/media-object
import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/core/media-object';
const Component = (props) => (
<MediaObject verticalAlign="center">
<MediaFigure spacing="space40">...</MediaFigure>
<MediaBody>...</MediaBody>
</MediaObject>
);
PropTypeDescriptionDefault
askeyof JSX.IntrinsicElements'span'
marginBottomSpacingnull
marginTopSpacingnull
verticalAligncenter, topAligns the figure and bodynull
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MEDIA_OBJECT'
PropTypeDescriptionDefault
alignstart, end'start'
askeyof JSX.IntrinsicElements'span'
spacingSpacingSpace between the figure and bodynull
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MEDIA_FIGURE'
PropTypeDescriptionDefault
askeyof JSX.IntrinsicElements'span'
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MEDIA_BODY'

Black lives matter.