A large image that is wider than the text area, will be contained.

An image taking up its max-width.

An image taking up its max-width + caption.

This is a caption. Pellentesque facilisis ligula id purus luctus, vitae condimentum sem blandit.

A centered image. Use class center

An image forced to take the full width. Use class full Do note that the taller the image is, as it gets wider it will take more vertical space up due to being proportional. This is best utilized for small rectangle images that do not fully take the width of the text module container, but would look better if they did.


Image centered with a dark background. Use classes center bg

Image centered with a dark background + caption. Use classes center bg

This is a caption. Pellentesque facilisis ligula id purus luctus, vitae condimentum sem blandit.

Image with no top padding. Use class spacing-top-none. Do note since this is a paragraph before the image, the paragraph is adding the spacing. But if you do inspect the image, the <figure> element will have no top margin. This can be helpful on product pages where a two column is utilized, and a column starts with an image instead of copy. By default the <figure> has a top and bottom margin. However, by adding the helper class, we remove the spacing for these use cases.

Image with no bottom padding. Use class spacing-bottom-none