Images

Enhance images by distinguishing them from their background or controlling their container's aspect ratio.

Highlighted image

Insulate an image from its surroundings. This can help to emphasize the image and/or prevent its white space from becoming indistinguishable from the surrounding white space.

Image container with aspect ratio

You can modify the aspect ratio of an image container to neatly wrap an image in a container of the desired aspect ratio. This is useful for aligning images or other content with mismatching aspect ratios.

All image containers center the .p-image-container__image element inside them by default. If you need to change image alignment within the image container, use the image position utility.

See the class references section for more information on the available aspect ratio classes.

Cover image

Cover images are used to fill the entire container, cropping the image if necessary. This can be combined with the aspect ratio modifier to crop the image to a specific aspect ratio.

Image with border

A simple key-line around your image.

Image with drop shadow

Add depth using our drop shadow around your image.

Image with caption

When an image needs a caption, it can be wrapped in a <figure> element, along with a <figcaption>.

Media element with spacing

Adds spacing to the top of a media element. This is usually needed when image or video is placed below the horizontal rule component to avoid media touching the line.

Class reference

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-p-image;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.