Media

Figures, captions, composite images.

Figure

Example image — A caption describing the image.

<figure>
  <img src="/path/to/image.jpg" alt="Example image">
  <figcaption>A caption describing the image.</figcaption>
</figure>

Polaroid

A title beneath the photo.

<div class="polaroid">
  <img src="/path/to/image.jpg" alt="Example image">
  <p class="photo--title">A title beneath the photo.</p>
</div>

Composite image

A framed container used by article-header patterns to hold an image plus overlaid content (app icons, badges, captions).

A burst of bright colours symbolising the Northern Lights

<div class="composite-image">
  <div class="overlay overlay-5">
    <img class="overlay overlay--header" src="/path/to/logo.svg" alt="Logo">
  </div>
  <picture>
    <source class="background cover" srcset="/path/to/bg.webp" type="image/webp">
    <img class="background cover" src="/path/to/bg.gif" alt="Background">
  </picture>
</div>

Gallery

A responsive grid of figures or polaroids. The gallery-2, gallery-3 and gallery-4 modifiers set the column count at desktop widths.

One
Two
Three

<ul class="gallery gallery-3">
  <li><div class="polaroid">…</div></li>
  <li><div class="polaroid">…</div></li>
  <li><div class="polaroid">…</div></li>
</ul>