Image Layout Helpers
Using nunjucks and the image utility classes
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.
Aligning images within the content areas
Copy permalink to “Aligning images within the content areas”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.
Extending images outside the content column
Copy permalink to “Extending images outside the content column”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
Add a shadow to make an image stand out from the background
Copy permalink to “Add a shadow to make an image stand out from the background”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:
Position an image next to the text on wide enough screens
Copy permalink to “Position an image next to the text on wide enough screens”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.