Content 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'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.