Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

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'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.