# Figure

> An image at full column width with an optional caption, for templates and article bodies.

- Block class: `.hs-figure`
- CSS: `components/base.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: built, open to change
- Decision record: https://brand.honorsociety.org/decisions/components-round-3.html
- Variants: Figure, Figure inside prose
- HTML page: https://brand.honorsociety.org/components/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](/components/video/).
- An image at the top of a teaser card: use the media form of [Card](/components/card/).
- A member photo or initials: use [Avatar](/components/avatar/).
- A member testimonial: use [Quote](/components/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.

```html
<figure class="hs-figure">
  <img class="hs-figure__img" src="/placeholders/figure.svg" width="1200" height="800" alt="Two graduates in caps and gowns after a commencement ceremony" loading="lazy">
  <figcaption class="hs-figure__caption">Commencement marks one achievement; recognition carries it forward.</figcaption>
</figure>
```

### Figure inside prose

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

```html
<div class="hs-prose">
  <p>Grades have long been used to measure academic success. While they remain a meaningful indicator, they do not fully capture leadership, collaboration, or initiative.</p>
  <figure>
    <img src="/placeholders/figure.svg" width="1200" height="800" alt="Two graduates in caps and gowns after a commencement ceremony" loading="lazy">
    <figcaption>Commencement marks one achievement; recognition carries it forward.</figcaption>
  </figure>
  <p>Expanding the definition of achievement allows institutions to recognize a wider range of contributions that reflect real-world impact.</p>
</div>
```