Skip to main content

Pivotal UI

v18.1.1

Media

Basic example

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 defined
Image container

Wrap the image in a fixed-size .image-container to make sure the image isn't larger than the container

demo placeholder for media

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.

Nested media

You can also nest media objects inside of each other (useful for comment threads or articles lists).

demo placeholder for media

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.

demo placeholder for media

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.
demo placeholder for media

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.
demo placeholder for media

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.
Vertical alignment
ReferenceError: React is not defined
Stackable

You 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.

demo placeholder for media

Extra-small stackable

demo placeholder for media

Small stackable

demo placeholder for media

Medium stackable

demo placeholder for media

Large stackable

Spacing

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

ReferenceError: React is not defined

Props

Media/Flag props

PropertyRequiredTypeDefaultDescription
classNamenoStringThe classname of the element
imageyesNodeThe image displayed
innerClassNamenoStringThe classname of the inner element
mediaSpacingnooneOf('small', 'medium', 'large', 'xlarge')Amount of whitespace between media and body
placementnooneOf('left', 'right')'left'Horizontal placement of the media
stackSizenooneOf('xsmall', 'small', 'medium', 'large')At what breakpoint should the media object stack
vAlignnooneOf('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';