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. The stat figure is sized for a band, not a card.
• A price: use Plan compare.
• Numbers in rows and columns: use 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.

<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.

<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>