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

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.

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

MediaFigure

MediaFigure page anchor

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

MediaBody

MediaBody 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_BODY'