Image extras
The following styles are meant to help tweak images to fit your needs.
Inline images
By default, images will break onto their own line. If you want an image to be in line with the text, use the inline style.
Inline image styling
Inline images don’t look any different than non-inline images. No extra space or decorative elements are added around the images.
Inline image development info
- Stylesheet location:
/_source/styles/components/_images.scss - In WordPress, you can add classes to the image in the “Image details” editor. Look under “Advanced options” and add
inlinein the “Image CSS class” box. - In HTML:
<img class="inline">
Inline image examples
- I’m an image that isn’t inline.
I break the sentence onto multiple lines. - I’m an image that is inline. I don’t break the sentence onto multiple lines.
Screenshots
Use screenshots to show what the accompanying text or instructions are describing. They can be plain screenshots taken directly from the screen, or can include extra elements such as arrows or circles added to the screenshot to highlight specific parts of the image.
Screenshot styling
Screenshots have a subtle light gray border and background. This helps screenshots with white backgrounds stand out from the surrounding text and look more like an intentional image than just part of the page content.
Screenshot development info
- Stylesheet location:
/_source/styles/components/_images.scss - In WordPress, you can add classes to the image in the “Image details” editor. Look under “Advanced options” and add
screenshotin the “Image CSS class” box. - In HTML:
<img class="screenshot">
Screenshot example
This screenshot has a superimposed mouse pointer showing where to click.
