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.

Responsive aspect ratio

It can be useful to change the aspect ratio of an image container, depending on the screen size. Using a tall aspect ratio on a small screen, or a wide aspect ratio on a large screen, may waste page space or make the image's details less visible. For example, the cinematic aspect ratio (2.4:1) is great in cases where there are at least 9 columns available. However, using this aspect ratio on a small screen may make the image too small to see its details, so aspect ratios like 16:9 or 3:2 may be more appropriate.

You can apply different aspect ratios on different screen sizes by using the responsive aspect ratio classes. See the table below for a list of all aspect ratio class names and their corresponding aspect ratios on each breakpoint.

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.