Skip to content

Stats pattern

Preview Available in release assets

Pair a small set of meaningful measures with explicit labels.

Stats pattern in context

Show code
<section aria-labelledby="impact-heading">
  <h2 id="impact-heading">Measured impact</h2>
  <dl class="thin-marketing-stats">
    <div class="thin-stat">
      <dt>Reader-supported editions</dt>
      <dd><strong>128</strong></dd>
    </div>
    <div class="thin-stat">
      <dt>Countries and territories reached</dt>
      <dd><strong>42</strong></dd>
    </div>
    <div class="thin-stat">
      <dt>Required client-side scripts</dt>
      <dd><strong>0</strong></dd>
    </div>
  </dl>
</section>

Anatomy

  • Section heading
  • Description list
  • Term and value pairs

Variants and sizes

  • Compact measures
  • Values with qualifiers
  • Linked evidence

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Difficult labels and values

Long localized labels, unusually large values, and missing data remain explicit and wrap in normal flow.

Show code
<section aria-labelledby="impact-difficult-heading">
  <h2 id="impact-difficult-heading">International impact</h2>
  <dl class="thin-marketing-stats">
    <div class="thin-stat">
      <dt>Leserfinanzierte Ausgaben mit unabhängiger redaktioneller Kontrolle</dt>
      <dd><strong>9,223,372,036,854</strong></dd>
    </div>
    <div class="thin-stat">
      <dt>Verified regional reporting partners</dt>
      <dd><strong>Not yet reported</strong></dd>
    </div>
  </dl>
</section>

Narrow container

The intrinsic grid collapses without clipping labels or separating terms from values.

Show code
<section aria-labelledby="impact-narrow-heading" style="max-inline-size: 18rem">
  <h2 id="impact-narrow-heading">Narrow measure</h2>
  <dl class="thin-marketing-stats">
    <div class="thin-stat">
      <dt>Reader-supported editions published this year</dt>
      <dd><strong>128</strong></dd>
    </div>
    <div class="thin-stat">
      <dt>Countries reached</dt>
      <dd><strong>42</strong></dd>
    </div>
  </dl>
</section>
  • Long localized labels — shown above
  • Large values — shown above
  • Missing value reported as text — shown above
  • Narrow container — shown above
  • Print — documented, example pending

Interaction and keyboard behavior

Stats are static content; evidence links remain ordinary links.

Accessibility

Use a description list or equally explicit text association, do not communicate change with color alone, and include units in accessible text.

Contract
COMPOSE
Basis
Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use dl.thin-marketing-stats, div.thin-stat, dt labels, and dd values.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/marketing.css
  • /icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts