Media
A Flag is a special type of media that is vAlign='middle'. The images or other media can be aligned top, middle, or bottom. The default is top aligned. The base button renderer. You won't really interact with this directly.
ReferenceError: React is not definedWrap the image in a fixed-size .image-container to make sure the image isn't larger than the container
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
You can also nest media objects inside of each other (useful for comment threads or articles lists).
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.ReferenceError: React is not definedYou can also make the media block stack with grid columns. Media objects switch from being stacked on top to being floated left of the media body as the screen size gets larger. For example, .media-stackable-xs is stacked on screen sizes from 0-480px and then left floated on larger screens.
Extra-small stackable
Small stackable
Medium stackable
Large stackable
Media spacing can be added to the left and right medias. If no spacing is defined, it defaults to large.
ReferenceError: React is not definedProps
Media/Flag props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
className | no | String | The classname of the element | |
image | yes | Node | The image displayed | |
innerClassName | no | String | The classname of the inner element | |
mediaSpacing | no | oneOf('small', 'medium', 'large', 'xlarge') | Amount of whitespace between media and body | |
placement | no | oneOf('left', 'right') | 'left' | Horizontal placement of the media |
stackSize | no | oneOf('xsmall', 'small', 'medium', 'large') | At what breakpoint should the media object stack | |
vAlign | no | oneOf('middle', 'bottom') | Vertical alignment of the body (used for large images with small content next to it, usually centered) |
Imports
Import React components (including CSS):
import {Media, Flag} from 'pivotal-ui/react/media';Import CSS only:
import 'pivotal-ui/css/media';