Figure

What it is

An image with an optional caption. Templates use the class form .hs-figure. Inside .hs-prose, a plain <figure> gets the same style, because filtered_html allows no classes.

When to use

• A photo or illustration inside an article body.
• An image with a caption in a template band.
• An image that needs a caption to say what it means or where it comes from.

When not to use

• A video: use Video.
• An image at the top of a teaser card: use the media form of Card.
• A member photo or initials: use Avatar.
• A member testimonial: use Quote.

Rules

• Class form: <figure class="hs-figure"> with img.hs-figure__img, then an optional figcaption.hs-figure__caption.
• Inside .hs-prose, write plain <figure>, <img> and <figcaption> with no classes.
• The image fills the column width with an 8px radius. The soft colour shows behind it until it loads.
• Every <img> states width and height. Below the hero it takes loading="lazy" decoding="async".
• The caption fills the column and sits 8px under the image. The caption says what the image means; the alt says what it shows.

Accessibility

• Give the image a descriptive alt that does not repeat the caption.
• The caption is 14px slate: 6.2:1 on white, 5.9:1 on soft.
• <figcaption> ties the caption to the image for assistive technology.
• The figure needs no JavaScript and has no motion.

Variants

Figure

Class form for templates. Image full width, 8px radius; caption 14px slate, 8px under the image.

Figure inside prose

A plain <figure> in .hs-prose (filtered_html has no classes) gets the same style.