React Media Block docs.md

##Usage

First, require the component.

var Media = require('pivotal-ui-react.media').Media;

Next, in your jsx, use the component. The default media displays a media object (images, video, audio) to the left or right of a content block.

<UI.Media leftImage={image}>left media</UI.Media>

You'll need to pass in an image, most likely a UI.image component.

General media object modifiers

Media Modifiers	Options	Description
`bodyAlignment`	top (default), "middle", "bottom"	Vertical alignment of the body (used for large images with small content next to it, usually centered)
`stackSize`	"xsmall", "small", "medium", "large"	At what breakpoint should the media object stack

var image = <UI.Image src='http://placehold.it/50x50' />;
var linkedImage = <UI.Image src='http://placehold.it/50x50' href="http://google.com" />;

If you want the image on the right:

<UI.Media rightImage={imageLinked}>
    right media
</UI.Media>

If you want both a right and left image:

<UI.Media leftImage={image} rightImage={mediaBasicImage}>
    left and right media
</UI.Media>

###Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Images are top aligned by default, so you don't need to make any modifications:

  <UI.Media leftImage={image}>
      top aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </UI.Media>

Verically center align images with the Flag Component

  <UI.Flag leftImage={image}>
      middle aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </UI.Flag>

  <UI.Flag leftImage={image}>
      middle aligned and middle body (for short text and big images)
  </UI.Flag>

Bottom align images

This is rarely, if ever, used.

  <UI.Media leftImage={image} vAlign='bottom'>
      bottom aligned - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </UI.Media>

###Spacing

Media spacing can be added to the left and right medias. If no spacing is defined, it defaults to large.

<UI.Media leftImage={image}>
    default image spacing media
</UI.Media>

<UI.Media
  leftImage={image}
  leftMediaSpacing='small'>
    small image spacing media
</UI.Media>

<UI.Media
  leftImage={image}
  leftMediaSpacing='medium'>
    medium image spacing media
</UI.Media>

<UI.Media
  leftImage={image}
  leftMediaSpacing='large'>
    large image spacing media
</UI.Media>

<UI.Media
  leftImage={image}
  leftMediaSpacing='xlarge'>
    xlarge image spacing media
</UI.Media>

This is a component of Pivotal UI React.

For more information:

Styleguide Github

All Pivotal UI Components require ReactJS (0.12.x)

A SearchInput component can be used on its own as an input. It accepts standard text input properties (such as placeholder). To use SearchInput with a filtered list, bind to the onChange event of the search input. Then update your list based on event.target.value.

stubbornella/React Media Block docs.md

General media object modifiers

Verically center align images with the Flag Component

Bottom align images