Media

Images, figures, and embedded media. All media is responsive by default with proper aspect ratio handling.

Images

Use <figure> for images with optional captions via <figcaption>.

<!-- Basic figure -->
<figure>
  <img src="image.jpg" alt="Description">
</figure>

<!-- Linked image -->
<figure>
  <a href="#"><img src="image.jpg" alt=""></a>
</figure>

<!-- With caption -->
<figure>
  <img src="image.jpg" alt="">
  <figcaption><p>Caption text</p></figcaption>
</figure>

<!-- With source credit -->
<figure>
  <img src="image.jpg" alt="">
  <figcaption>
    <p>Caption text</p>
    <p class="source">Credit: <a href="#">Source</a></p>
  </figcaption>
</figure>

Placeholder image

Use a service like Placehold.co for image blocking in prototypes.

Linked image

Image with caption

Image with source credit

Use .source for attribution.

The Leader of the Luddites, 1812.

Credit: Working Class Movement Library catalogue

Embeddable media

Responsive embeds with .embed. Default 16:9 aspect ratio—use .aspect-* utilities to change.

Code

<!-- Responsive video embed (16:9) -->
<div class="embed">
  <iframe src="https://youtube.com/embed/..."></iframe>
</div>

<!-- Responsive map embed -->
<div class="embed">
  <iframe src="https://google.com/maps/embed?..."></iframe>
</div>

<!-- Custom aspect ratio -->
<div class="embed aspect-4-3">...</div>
<div class="embed aspect-1-1">...</div>