Images

Enhance images by adding a variant style with a border or drop shadow.

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>.

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.