Skip to main content

Pivotal UI

v19.0.0

Images

Basic example

Images in React can be responsive and/or wrapped in a link.

ReferenceError: React is not defined
Responsive

Images can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

ReferenceError: React is not defined

Responsive SVG

SVG can be made responsive-friendly via the addition of the .svg-responsive class on a wrapper div and the .svg-content class on the svg itself. You'll also need to to define the height to width ratio as an inline padding bottom style on the .svg-responsive element like so:

<div class="svg-responsive" style="padding-bottom: 78.31%">
  <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
    ...
  </svg>
</div>
Custom SVG
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
altnoStringAlt text
hrefnoStringIf set, image becomes a link
responsivenoBooleanfalseWhether this image should resize responsively
srcyesStringImage src

Imports

Import React components (including CSS):

import {Image} from 'pivotal-ui/react/images';

Import CSS only:

import 'pivotal-ui/css/images';