Media

Images

Images never grow wider than their container and keep their aspect ratio. The alt text of an image that fails to load shows in italics.

Figure

A figcaption sits under the media in the subtle text color.

Iframe

An iframe without width or height fills the width at 16:9. Embedded videos need no wrapper.

Audio and video

audio fills the width. video scales like an image, and captions from a track use the page font.

<audio controls src="podcast.mp3"></audio>

<video controls width="640" height="360" src="intro.mp4">
  <track kind="captions" src="intro.vtt" srclang="en" label="English">
</video>

SVG

An inline SVG without a fill takes the text color.

Variables