Skip to contentSkip to navigationSkip to topbar
Figma
Star

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

Installation

Installation page anchor
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>
);

MediaObject

MediaObject page anchor

as

Controls the HTML element that that will be rendered in the DOM.

Type
keyof IntrinsicElements

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'MEDIA_OBJECT'

marginBottom

Responsive prop of Space tokens for the CSS margin-bottom property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 28 more ... | "auto"

marginTop

Responsive prop of Space tokens for the CSS margin-top property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 28 more ... | "auto"

verticalAlign

Aligns the figure and body

Type
"center" | "top"

align

Type
"start" | "end"

as

Controls the HTML element that that will be rendered in the DOM.

Type
keyof IntrinsicElements

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'MEDIA_FIGURE'

spacing

Space between the figure and body

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

as

Controls the HTML element that that will be rendered in the DOM.

Type
keyof IntrinsicElements

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'MEDIA_BODY'