Figure
An image or a video with its caption, finished at the edge.
On this page
A figure is an image, a video or a drawing with its caption. The media takes a surface's corner and a hairline ring just inside its own edge, so a pale image does not dissolve into the page and a dark one does not end in a hard cut. The caption sits close under it, quiet. A picture a reader may want to see large opens in a lightbox.
Figure
<figure class="figure max-w(360) mx-auto"> <img class="figure-media" src="/demo/moonstone.svg" alt="A pale stone with a band of light across it" style="--figure-ratio: 3 / 2"> <figcaption class="figure-caption">Moonstone under a north light, the stone the light theme is named for.</figcaption></figure>Set --figure-ratio on the media to hold its shape before it loads; the media then covers that shape. Without it the media keeps its own proportions. Write width and height on the <img> either way, so the browser reserves the space.
#Framed
figure-framed rests the media in a tray, 4px in, like a print in a mat, and the caption moves inside the frame. The tray's corner is the media's corner plus that inset, so the gap keeps one width around the bend.
Framed
<figure class="figure figure-framed max-w(360) mx-auto"> <img class="figure-media" src="/demo/moonstone.svg" alt="A pale stone with a band of light across it" style="--figure-ratio: 16 / 9"> <figcaption class="figure-caption">Figure 2. The same stone, framed.</figcaption></figure>#Centered
figure-center centers and balances the caption, for a figure that stands alone in a column of text.
Centered
<figure class="figure figure-center max-w(240) mx-auto"> <img class="figure-media" src="/demo/portrait-2.svg" alt="Alan Turing" style="--figure-ratio: 1"> <figcaption class="figure-caption">Alan Turing, drawn for the avatar examples.</figcaption></figure>#Accessibility
- Use
<figure>with a<figcaption>: the caption is then the figure's accessible name. - The caption does not replace
alt. The alternative text says what the image shows; the caption says why it is here. When the caption already says everything, an emptyalt=""avoids reading it twice. - The ring inside the media's edge is decoration and follows the color scheme; in forced colors a framed figure takes a system outline.
#Classes
| Class | Description |
|---|---|
figure | The figure: media over a caption |
figure-framed | The media rests in a tray, 4px in, with the caption inside the frame. With figure |
figure-center | A centered, balanced caption, for a figure that stands alone in a column of text. With figure |
figure-media | The img, video, svg or any block, with a surface's corner and a hairline ring inside its edge |
figure-caption | The caption, small and muted under the media |
#Custom properties
| Property | Default | Description |
|---|---|---|
--figure-radius | var(--radius-surface) | The media's corner |
--figure-ratio | The media's aspect ratio, held before it loads; the media then covers that shape. Without it the media keeps its own proportions. On figure-media |