Catalog · Content
Stat
Shows one figure big, with a short label under it.
Fits best: landing — a row of figures on a landing page
Example
Three figures, each with a short label under it.
-
4,000+
teams on the platform
-
99.95%
uptime in the last year
-
12 min
to set up, on average
The first two stand on the page; the third sits in a luz-card. In a column narrower than 768 px the three stack.
Known issues
None known.
Code
Copy the markup
import "@luz-ds/catalog/components/stat.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stat.min.css" integrity="sha384-BWlLefgZb0IeWPuX51tf8D1yWKqyXVA8/5vQz+wACTjN+NRcfynLunkuHbLbeBf1" crossorigin="anonymous"><ul class="o-grid o-grid--3">
<li>
<div class="luz-stat">
<p class="luz-stat__value">4,000+</p>
<p class="luz-stat__label">teams on the platform</p>
</div>
</li>
<!-- one li for each stat; a card is a li.luz-card -->
</ul>Variants and options
No modifiers: two parts, alone or inside a card.
| Class | What it does |
|---|---|
.luz-stat | The block: the value over the label, a small gap ( --luz-space-2xs) apart, and no padding or surface |
.luz-stat | The figure: heading font, 3xl, light, with figures of equal width; it wraps anywhere in a narrow column |
.luz-stat | What the figure counts: sm size, in the secondary text colour |
How it works
CSS from components/stat.css of @luz-ds/catalog. No JavaScript.
- The stat lays out nothing: put several in a core grid list,
ul.o-grid.o-grid--3. In a card it uses the card's padding and surface.
Without JavaScript
Nothing changes: the stat is HTML and CSS, and does not count up.
Keyboard and ARIA
The stat has no interaction or role of its own.
- The value comes before the label in the source, so it is read in that order. Put stats in a
<ul>, under the section's heading.
Contrast and focus are in the Design tab.
Design
When to use
Use a stat for a figure that backs up a claim: how many use the product, how fast it is. Two to four together read at a glance.
When not to use
Do not use a stat for a figure that needs a sentence to be understood.
- For rows and columns to compare, use a table.
Do and don't
Writing the content
The value is a number with its unit, in five characters or fewer if you can. The label says what the number counts.
- Write the figure the way you would say it: "4,000+", "99.95%", "12 min".
- The label is lower case, without a full stop, and says over what period or for whom: "uptime in the last year".
- Say where a figure comes from, in a note under the section, if a reader could ask.
Contrast and focus
The value is primary text and the label secondary text, on the page or on a card.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Value | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Label | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Value in a card | --luz-text-primary on --luz-surface | 16.5:1 | 14.0:1 | 21.0:1 | 4.5:1 |
Label in a card | --luz-text-secondary on --luz-surface | 6.4:1 | 6.9:1 | 19.3:1 | 4.5:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text.
- Focus: the stat takes none; it is not interactive.
Tokens it uses
The 8 tokens that the .luz-stat rules of catalog’s components/stat.css read, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Spacing and sizing
--luz-space-2xs- Typography
--luz-font-heading,--luz-text-2xl,--luz-text-3xl,--luz-text-base,--luz-text-xl
Keyboard and ARIA are in the Code tab.