Enhance images by distinguishing them from their background or controlling their container's aspect ratio.
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.
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.
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.
| Class name | Large | Medium | Small |
|---|---|---|---|
.p-image-container--16-9 |
16:9 | 16:9 | 16:9 |
.p-image-container--16-9-on-large |
16:9 | - | - |
.p-image-container--16-9-on-medium |
- | 16:9 | - |
.p-image-container--16-9-on-small |
- | - | 16:9 |
.p-image-container--3-2 |
3:2 | 3:2 | 3:2 |
.p-image-container--3-2-on-large |
3:2 | - | - |
.p-image-container--3-2-on-medium |
- | 3:2 | - |
.p-image-container--3-2-on-small |
- | - | 3:2 |
.p-image-container--2-3 |
2:3 | 2:3 | 2:3 |
.p-image-container--2-3-on-large |
2:3 | - | - |
.p-image-container--2-3-on-medium |
- | 2:3 | - |
.p-image-container--2-3-on-small |
- | - | 2:3 |
.p-image-container--cinematic |
2.4:1 | 2.4:1 | 2.4:1 |
.p-image-container--cinematic-on-large |
2.4:1 | - | - |
.p-image-container--cinematic-on-medium |
- | 2.4:1 | - |
.p-image-container--cinematic-on-small |
- | - | 2.4:1 |
.p-image-container--square |
1:1 | 1:1 | 1:1 |
.p-image-container--square-on-large |
1:1 | - | - |
.p-image-container--square-on-medium |
- | 1:1 | - |
.p-image-container--square-on-small |
- | - | 1:1 |
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.
A simple key-line around your image.
Add depth using our drop shadow around your image.
When an image needs a caption, it can be wrapped in a <figure> element, along with a <figcaption>.
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.
.p-image-container
Main element of the image component.
&.is-cover
Cover variant, to be used to set the .p-image-container__image within to cover the container.
&.is-highlighted
Highlighted variant, to be used to highlight contents.
.p-image-container--16-9
Wraps contents in a container with an aspect ratio of 16:9.
.p-image-container--3-2
Wraps contents in a container with an aspect ratio of 3:2.
.p-image-container--2-3
Wraps contents in a container with an aspect ratio of 2:3.
.p-image-container--cinematic
Wraps contents in a container with an aspect ratio of 2.4:1.
.p-image-container--square
Wraps contents in a container with an aspect ratio of 1:1.
.p-image-container--(16-9|3-2|2-3|cinematic|square)-on-(small|medium|large)
Wraps contents in a container with the specified aspect ratio on the specified breakpoint.
.p-image-container__image
Image element within an image container.
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.