Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Media Object

Version 11.0.0GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/media-object

Usage

Usage page anchor
import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/core/media-object';

const Component = (props) => (
  <MediaObject verticalAlign="center">
    <MediaFigure spacing="space40">...</MediaFigure>
    <MediaBody>...</MediaBody>
  </MediaObject>
);

Props

Props page anchor

MediaObject

MediaObject page anchor

as

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

Type
string | number | symbol

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
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 39 more ... | { ...; }

marginTop

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

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

verticalAlign

Aligns the figure and body

Type
"center" | "top"

MediaFigure

MediaFigure page anchor

align

Type
"start" | "end"

as

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

Type
string | number | symbol

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" | ... 38 more ... | { ...; }

MediaBody

MediaBody page anchor

as

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

Type
string | number | symbol

element

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

Type
string
Default
'MEDIA_BODY'