Image

An image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-image

Image sizes

To specify image size (e.g u-bolt-width-1/1) pass the correct class like so:

{% set classes = create_attribute(imageAttributes | default({})).addClass([
    "c-bolt-image__img",
    "u-bolt-width-1/1",
  ])
%}

Then pass it into the component:

{% include '@bolt-components-image/image.twig' with {
  src: "/images/placeholders/tout-4x3-climber.jpg",
  alt: "A Rock Climber",
  imageAttributes: classes,
} only %}
  {% include '@bolt-components-image/image.twig' with {
  src: "/src/images/turtle.jpg",
  alt: "A Turtle"
} only %}
Name Type Value(s) Description Default
src string

Source url for image.

N/A
alt string

Alt tag for image.

N/A
lazyload boolean
  • TRUE OR FALSE

Lazyload can boost performance by loading images on demand, instead of on initial page load.

true
srcset string

A comma seperated string of image urls and image widths, used for optimizing image loading performance.

N/A
sizes string

A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value.

auto
useAspectRatio boolean
  • TRUE OR FALSE

Use the ratio wrapper around the image to maintain a specific image ratio. This ratio is either determined from the image, or by passing in height and width arguements.

true
width number OR string

Override the default width of the image. If no height is provided, aspect ratio will be maintained.

N/A
height number OR string

Override the default height of the image. If no width is provided, aspect ratio will be maintained.

N/A
A Rock Climber A Rock Climber

640x480 jpg

A Rock Climber A Rock Climber

500x500 jpg

Bill Murray Bill Murray ,

1151x638 jpg

Mountains Mountains

1151x638 jpeg

Mountains

2712x2300 png

decision hub chart

3000x5336 jpeg

device screenshot device screenshot

124x33 svg

logo paypal svg

Src: Root Relative

src: "/images/placeholders/image.jpg",
Bill Murray Bill Murray

Src: Source Set

srcset: "/images/placeholders/500x500-200.jpg 200w,/images/placeholders/500x500-480.jpg 480w",
Bill Murray Bill Murray

Src only that won't be found in bolt.data.images

Bill Murray Bill Murray

Src only that won't be found in bolt.data.images and not lazy loaded

Bill Murray Bill Murray

Src and srcset that won't be found in bolt.data.images

Bill Murray Bill Murray

Srcset only that won't be found in bolt.data.images and not lazy loaded

Bill Murray

Srcset only that won't be found in bolt.data.images and lazy loaded

Bill Murray

Absolute src - not lazy loaded

Wikipedia Example Wikipedia Example

Absolute src - lazy loaded

Wikipedia Example Wikipedia Example

Jpg: Lazyload true

Bill Murray Bill Murray

Jpg: Lazyload false

Bill Murray Bill Murray

Png: Lazyload true

decision hub chart

Png: Lazyload false

decision hub chart

Svg: Lazyload: true

logo paypal svg

Svg: Lazyload: false

logo paypal svg

Custom Height and Width, JPEG (2:1)

Bill Murray Bill Murray

Custom Height and Width, PNG (2:1)

decision hub chart

Custom Height and Width, SVG (10:1)

logo paypal svg

Image Zoom

When used with the device viewer component, the image component can used to create a "zoomed" state (`magnify` must be set to `true` on the device viewer).