# Stat

> A large checkable figure in Didot that anchors a navy band or a row of two to three figures.

- Block class: `.hs-stat`
- CSS: `components/stat.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: Single figure in a navy band, Row of figures
- HTML page: https://brand.honorsociety.org/components/stat/

## What it is

A checkable figure. Didot 700, 48–64px, white on navy and navy on light. The figure is never gold. Every figure needs a source in site facts before it ships.

## When to use

- One figure that opens a navy band, such as "$1M+" given to nonprofits and other honor societies.
- A row of two or three figures with short labels (`<dl class="hs-stats">`).

## When not to use

- One outside rating with its source and date in a card: use [Rating](/components/rating/). The stat figure is sized for a band, not a card.
- A price: use [Plan compare](/components/plan-compare/).
- Numbers in rows and columns: use [Table](/components/table/).
- A figure with no source in site facts: do not write it.

## Rules

- Single figure: eyebrow, `p.hs-stat__figure`, then the band's `h2` says what the figure means, then an optional `.hs-lead`.
- Put a single figure in a full navy band, not in a rounded panel inside a white page.
- Row: `<dl class="hs-stats">` with one `div.hs-stat` per figure. Put `dt.hs-stat__label` first, then `dd.hs-stat__figure`. Use two or three figures.
- The figure is never gold. On navy the eyebrow is already the gold element.
- Source every figure in site facts before it ships.
- A figure that is also a trust string keeps its fixed wording: "8M+ Members Have Joined Honor Society®", never "active" or "paid".

## Accessibility

- In a row, the `<dt>` comes first in the source, so a screen reader hears the label before the figure. CSS shows the figure on top.
- The figure is white on navy (12.4:1 on flat navy) and navy on light (12.4:1).
- The band's `h2` carries the meaning of a single figure, so the heading outline stays readable.
- The stat needs no JavaScript and has no motion.

## Variants

### Single figure in a navy band

Eyebrow, figure, then the band’s h2 says what the figure means.

```html
<section class="hs-band hs-band--navy" data-section="giving">
  <div class="hs-container">
    <p class="hs-eyebrow">A broader commitment to opportunity</p>
    <p class="hs-stat__figure">$1M+</p>
    <h2 class="hs-heading hs-heading--h2">Given to nonprofits and other honor societies.</h2>
    <p class="hs-lead">Honor Society&reg; has given more than $1 million to nonprofit organizations and other honor societies.</p>
  </div>
</section>
```

### Row of figures

`<dl class="hs-stats">` for two or three figures.

```html
<dl class="hs-stats">
  <div class="hs-stat"><dt class="hs-stat__label">given to nonprofits and other honor societies</dt><dd class="hs-stat__figure">$1M+</dd></div>
  <div class="hs-stat"><dt class="hs-stat__label">scholarship programs</dt><dd class="hs-stat__figure">20</dd></div>
</dl>
```