React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CTA Center FormLayout Grid List Media
Basic Usage General Guidelines API MediaBody MediaObject Toolbar
CSS Helpers
Readme

# Media

The Media layout nicely aligns text content next to an object.

##
Basic Usage

To implement the Media component, you need to import it first:

    import { Media, MediaBody, MediaObject } from '@react-ui-org/react-ui';

And use it:

Media object
Media body
<Media> <MediaObject> <Placeholder bordered>Media object</Placeholder> </MediaObject> <MediaBody> <Placeholder bordered>Media body</Placeholder> </MediaBody> </Media>

    <Media>  <MediaObject>    <Placeholder bordered>Media object</Placeholder>  </MediaObject>  <MediaBody>    <Placeholder bordered>Media body</Placeholder>  </MediaBody></Media>

See
API for all available options.

## General Guidelines

Use the Media layout for
highly repetitive layouts like comments, article teasers, etc., ie. when you need a fixed-sized object (eg. an image) and an area that expands over the remaining horizontal space (eg. a paragraph).

## API

children
node
required

## MediaBody

A place for the text content.

children
node
required

## MediaObject

A place for the media object.

children
node
required

Next: Toolbar →