node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

@npmcorp/pui-react-media

pui-react-media

React components for laying out images/audio/video next to text content

Pivotal UI React (GitHub, npm) is a collection of React components for rapidly building and prototyping UIs.

This component requires React v0.13

See the Pivotal UI Styleguide for fully rendered examples.

Components

Media

Displays a media object (images, video, or audio) to the left or right of a block of content

var Media = require('
 
#### Properties
 
- `leftImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown left of the content
 
- `rightImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown right of the content
 
- `vAlign`
  - `String`: One of `middle` or `bottom`--if given, re-positions the content vertically
 
- `stackSize`
  - `String`: One of `xsmall`, `small`, `medium`, or `large`--if given, sets the breakpoint at which the media object stacks
 
- `leftMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the left media and the content
 
- `rightMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the right media and the content
 
 
### Flag
 
Displays a media object (images, video, or audio) to the left or right of a block of content with vertical centering
 
 
 
#### Properties
 
- `leftImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown left of the content
 
- `rightImage`
  - `Element`: `<Image>`, `<Video>`, or `<Audio>` to be shown right of the content
 
- `stackSize`
  - `String`: One of `xsmall`, `small`, `medium`, or `large`--if given, sets the breakpoint at which the media object stacks
 
- `leftMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the left media and the content
 
- `rightMediaSpacing`
  - `String`: One of `small`, `medium`, `large` (default), or `xlarge`--sets the amount of space between the right media and the content
 
 
*****************************************
 
(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.