Image Layout Helpers

media-pull will position an image next to the text on wide enough screens

The media-pull class can be used to pull an image to the left of the content at the xlarge screen size. Using a style attribute, you can define how many rows to span using the css custom property --rowspan. The first image example uses the embed.figure macro.

media-pull with the embed.img macro

When using the embed.img macro in a markdown file, the image is placed within a <p> tag. We have a CSS helper that targets this nested image with display: contents in order to add layout classes which will work in most modern browsers. When unsupported, the image will appear centered within the content column.

If you want an image to float to a side of the text, you need to first wrap the image and text in a div with a class of contain.

To align an image to the left of the text, add the class align-left. Images will only float if the screen is wide enough.

To align an image to the right of the text, add the class align-right. Images will only float if the screen is wide enough.

To center align an image add the class align-center. This is only applicable if your image is smaller than the column width.

To extend an image further outside of the content column’s width, add one of the following classes: extend-small, extend-large, or extend-full.

When using the embed.img macro in a markdown file, the image is placed within a <p> tag. We have a CSS helper that targets this nested image with display: contents in order to add these layout classes in most modern browsers.

embed.img using the extend-small class

The embed.figure macro uses the same grid-columns as the extend-small class.

embed.figure without an extend class for comparison

extend-large

extend-full

You can add the class img-shadow to the embed.figure and embed.img to display a shadow around the image. This doesn’t work on figure if you have a caption as the shadow will be around the entire container.

embed.figure with class='img-shadow'

embed.img with attrs={'class': 'img-shadow'}

An image with a light background:

An image with a dark background:

The embed.figure macro is the only one that has access to the outer element in order to add attributes or classes. The media-pull class can be added to pull the image to the left of the content at the xlarge screen size. Using a style attribute, you can define how many rows to span using the css custom property --rowspan.