Media Object

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

Version 10.1.0

Github

Storybook

<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

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.

<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

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

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

MediaFigure Spacing

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

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

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.

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

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.

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

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

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

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.

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

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

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

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.

<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

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.