Skip to contentSkip to navigationSkip to topbar
Figma
Star

Media Object

Version 10.1.0GithubStorybook

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

Component preview theme
<MediaObject verticalAlign="center">
<MediaFigure spacing="space40">
<PasteIcon color={TWILIO_RED} display="block" size={42} />
</MediaFigure>
<MediaBody>
<Text as="h2" fontSize="fontSize60" lineHeight="lineHeight60">
<Text href="/" as="a" color="inherit" fontSize="inherit" lineHeight="inherit" textDecoration="none">Paste</Text>
</Text>
<Text as="h3" fontSize="fontSize20" lineHeight="lineHeight20" color="colorTextWeak">
Design System
</Text>
</MediaBody>
</MediaObject>

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.

Component preview theme
<MediaObject verticalAlign="center">
<MediaFigure spacing="space40">
<PasteIcon color={TWILIO_RED} display="block" size={42} />
</MediaFigure>
<MediaBody>
<Text as="h2" fontSize="fontSize60" lineHeight="lineHeight60">
<Text href="/" as="a" color="inherit" fontSize="inherit" lineHeight="inherit" textDecoration="none">Paste</Text>
</Text>
<Text as="h3" fontSize="fontSize20" lineHeight="lineHeight20" color="colorTextWeak">
Design System
</Text>
</MediaBody>
</MediaObject>

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.

Component preview theme
<MediaObject as="div">
<MediaFigure as="div">
<Box backgroundColor="colorBackgroundStrong" borderRadius="borderRadius20" height="sizeIcon100" width="sizeIcon100" />
</MediaFigure>
<MediaBody as="div">
Some Text
</MediaBody>
</MediaObject>

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

Component preview theme
<MediaObject as="div">
<MediaFigure
as="div"
spacing="space40"
>
<Box backgroundColor="colorBackgroundStrong" borderRadius="borderRadius20" height="sizeIcon100" width="sizeIcon100"></Box>
</MediaFigure>
<MediaBody as="div">
Some Text
</MediaBody>
</MediaObject>

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.

Component preview theme
<MediaObject as="div" verticalAlign="center">
<MediaFigure
as="div"
spacing="space40"
>
<Box backgroundColor="colorBackgroundStrong" borderRadius="borderRadius20" height="sizeIcon100" width="sizeIcon100"></Box>
</MediaFigure>
<MediaBody as="div">
Some Text
</MediaBody>
</MediaObject>

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.

Component preview theme
<MediaObject as="div" verticalAlign="center">
<MediaBody as="div">
Some Text
</MediaBody>
<MediaFigure
as="div"
align="end"
spacing="space40"
>
<Box backgroundColor="colorBackgroundStrong" borderRadius="borderRadius20" height="sizeIcon100" width="sizeIcon100"></Box>
</MediaFigure>
</MediaObject>

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

Component preview theme
<MediaObject as="div" verticalAlign="center">
<MediaFigure
as="div"
spacing="space40"
>
<Box backgroundColor="colorBackgroundStrong" borderRadius="borderRadius20" height="sizeIcon100" width="sizeIcon100"></Box>
</MediaFigure>
<MediaBody as="div">
Some Text
</MediaBody>
<MediaFigure
as="div"
align="end"
spacing="space40"
>
<Box backgroundColor="colorBackgroundStrong" borderRadius="borderRadius20" height="sizeIcon100" width="sizeIcon100"></Box>
</MediaFigure>
</MediaObject>

The Alert is a classic Media Object layout. The status level icon is the Media Figure, and the alert description is the Media Body.

Component preview theme
<Alert variant="warning">
<strong>Chimamanda Ngozi Adichie:</strong> Racism should never have happened and so you don't get a cookie for reducing it.
</Alert>

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.

Component preview theme
<MediaObject as="div" verticalAlign="center">
<MediaFigure as="div" spacing="space40">
<Avatar size="sizeIcon70" name="James Baldwin" />
</MediaFigure>
<MediaBody as="div">
<Text as="div" color="colorTextWeak" fontSize="fontSize20" lineHeight="lineHeight10">
3h
</Text>
<Text as="div" fontSize="fontSize30" fontWeight="fontWeightSemibold" lineHeight="lineHeight10">
James Baldwin
</Text>
</MediaBody>
</MediaObject>

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.

Component preview theme
<Box display="flex" justifyContent="flex-end">
<MediaObject as="div">
<MediaBody as="div">
<Box
as="div"
color="colorTextInverse"
backgroundColor="colorBackgroundPrimary"
borderRadius="borderRadius20"
borderTopRightRadius="borderRadius0"
fontSize="fontSize30"
lineHeight="lineHeight20"
padding="space30"
maxWidth="size30"
>
Racism should never have happened and so you don't get a cookie for reducing it.
</Box>
<Text as="div" color="colorTextWeak" fontSize="fontSize20" textAlign="right">
Chimamanda Ngozi Adichie
</Text>
</MediaBody>
<MediaFigure as="div" align="end" spacing="space40">
<Avatar size="sizeIcon50" name="Chimamanda Ngozi Adichie" />
</MediaFigure>
</MediaObject>
</Box>

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.