• Patterns
  • Media

Content image

Title of equation (I'm optional)

a description of the image

Usage notes

Use the content image class to mark up an image with optional title on a content page (like a stat bulletin). Comes with vertical spacing.

 
<figure class="content-image content-image--separated">
  <figcaption>
    <h3 class="content-image__title">Title of equation (I&apos;m optional)</h3>
  </figcaption>
  <img class="content-image__image" src="/ui/img/equation.png" alt="a description of the image" width="497" height="60">
</figure>

Developer Notes

Adding the .content-image--separated class will add top/bottom borders and padding. This can be left out.

Always add an alt attribute to the image, and the width and height attributes so that browser doesn't make unnecessary repaints aren't made once the image has loaded.

Even if the image is purely decorational, add an empty alt attribute for accessibility purposes.