Skip to main content
Frontend Glossary

UI components · Marketing

Stats Band

Also called: Stats section, Key numbers, By the numbers, Numbers strip

A full-width strip on a marketing site with three or four big numbers side by side, each with a line of explanation (like "active stores"). It uses specific, sourced numbers to show the product's scale or results.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Add a stats band before the testimonials. Full-width dark background, 72px padding top and bottom, max content width 1080px. Inside, 4 equal-width number groups (2 × 2 on mobile). Each group is a 44px bold number (with the unit in 20px right after it) and one line of 14px light gray text below, with 1px vertical dividers between groups. No card borders and no trend arrows. Use the real data I provide: [number + unit + label + how it's counted] × 4. For anything I haven't provided, write "TBD" and don't make it up. At the bottom of the section, add one line of 12px small print: "Data as of [month year]. Source: …"

Send to

01Decide

Does your content look like this?

Check both columns to confirm Stats Band is what you need.

Use Stats Band when

  • Marketing sites and landing pages that use scale or results numbers (stores served, average time saved) to build trust
  • Year-in-review and milestone pages that show a few verifiable achievements in one place
  • Event pages that show attendee counts, cities covered, or other data you can back up

Pick something else when

  • Live business metrics shown to users inside an admin dashboard. Use a statistic (KPI card).

    Use insteadStatistic

  • Numbers people need to see trends or comparisons for

    Use insteadChart

  • When you don't have real, verifiable data. Don't add it just because it looks good.

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Made-up numbers with no source, like "100K+ users" or "99.9% satisfaction"

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Numbers with no unit or definition, so you can't tell whether it's sign-ups or active users, or as of when

  3. 03

    Seven or eight numbers in a row, plus card borders and trend arrows, so it turns into an admin dashboard

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A full-width background strip with 3–4 number groups side by side. Each group is a big number (with a unit) and one line of explanation. It can have a section heading and a note at the bottom about how the numbers were counted.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A stats band is a full-width strip in a landing page, often with a dark or light gray background that sets it apart from the content above and below. Inside, 3–4 numbers sit side by side. Each is a very large number (40px or more, with a unit, like "3 min" or "98%") with a line of explanation under it, and the groups are often separated by thin vertical lines. Sometimes there's a heading, and a line of small print at the bottom states how the numbers were counted and as of when.

It's easiest to confuse with a Statistic (a KPI card). KPI cards live in admin dashboards and show live business data to people using the product, usually one number per card, with trends and comparisons. A stats band lives on a marketing site and shows first-time visitors a few fixed marketing numbers, with no card borders and no up or down arrows, and the page around it has marketing sections like a hero and a feature grid. How it differs from a Feature Grid: a feature grid talks about features, while a stats band only shows numbers. It and a Logo Wall are both endorsements, one with numbers and one with customer logos.

Every number here is a product fact. It needs a real source, and you should say how it was counted and as of when ("Stores with orders in the last 30 days, as of June 2026"). If you can't get real numbers, don't build this section. Don't make up "100K+ users" or "99.9% satisfaction." Use 4 numbers at most, put the unit right after the number, and format thousands consistently. A count-up animation from 0 is fine, but respect reduced motion (prefers-reduced-motion) and make sure the final value is clearly readable.

Developer info
Term ID
component-stats-band
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • body:not(:has(aside, [class*="sidebar" i], [class*="dashboard" i])) section:is([class*="stats" i], [id*="stats" i], [class*="numbers" i], [class*="counters" i]):not([class*="card" i], [class*="item" i])
  • body:has([class*="hero" i]) :is(section, div)[class*="stats" i]:not([class*="stats" i] *, [class*="card" i], [class*="item" i])
  • dl:has(> div > dd:is([class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"])):not(:has(> :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .shadow, .shadow-sm, .shadow-md, .border, .ring-1)))
  • body:has([class*="hero" i], h1:is(.text-5xl, .text-6xl, .text-7xl)) :is(section, div, dl):has(> :nth-child(3) > :is(.text-4xl, .text-5xl, .text-6xl):is(.font-bold, .font-extrabold, .font-semibold)):not(:has(> :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .shadow, .shadow-sm, .shadow-md, .border, .ring-1)))
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • stats-band
  • stats-section
  • stats-bar
  • stats-strip
  • stats-banner
  • key-numbers
  • by-the-numbers
  • numbers-section
  • impact-numbers
  • counter-section
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • StatsBand
  • StatsSection
  • StatsBar
  • StatsStrip
  • KeyNumbers
  • ByTheNumbers
  • NumbersSection
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • big number
  • grid of items
  • starts with heading
Priority
3 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026