mostlycss
Theme

Figure

figure.figure

Figure — an image, diagram or chart together with what the page says about it.

Examples

An image and its caption

View “An image and its caption” as
Placeholder standing in for the figure's image
A caption says what the page thinks about the image.
<figure class="figure">
  <img src="/demo/placeholder.svg" alt="Placeholder standing in for the figure's image"
       width="1200" height="800" />
  <figcaption class="figure-caption">A caption says what the page thinks about the image.</figcaption>
</figure>

alt is what the image says; the caption is what the page says about it.

A screen reader reads both, one after the other, so copying one into the other produces an immediate stutter — the single most common defect in figure markup. The picture here is a deliberate placeholder: a documentation site that ships a photograph teaches nothing about the component and invites somebody to copy the file along with the markup.

Tokens 5

Level 2, declared on .figure itself. Set any of them on that selector to restyle this component without touching the skin.

Level 2 tokens declared by figure
TokenDefault
--figure-caption-alignstart
--figure-caption-colorvar(--color-on-surface-muted)
--figure-caption-font-sizevar(--font-size-sm)
--figure-gapvar(--space-2)
--figure-radiusvar(--radius-box)

Variants and states

Variants

  • .figure-fit

Inside it

  • .figure-caption
  • .figure-details

State it reads

None.

Before you ship it

What you have to do 1 requirements

  1. Supply alt on every <img>, per the rule above. Nothing in CSS can write it and nothing can detect that it is wrong — a duplicated caption is a perfectly valid attribute.

src/css/components/figure.css · npx mostlycss add figure