--- title: "Stats section design: variants and examples | Kombai" description: "A stats section shows a few large numbers with short labels, so people see the scale or results of a product at a glance." canonical_url: https://kombai.com/glossary/stats-section/ author: "The Kombai Team" --- # Stats section A stats section shows a few large numbers with short labels, so people see the scale or results of a product at a glance. - Also called: metrics, numbers - Platforms: Web, Mobile - In the Kombai gallery: [136 web designs](https://kombai.com/gallery/web/stats/), [38 mobile designs](https://kombai.com/gallery/mobile/stats/) - [Keelwright](https://kombai.com/gallery/inspirations/stats-web-32/) (Web) - [Roamly](https://kombai.com/gallery/inspirations/stats-ios-3/) (Mobile) - [Traction](https://kombai.com/gallery/inspirations/stats-web-1/) (Web) ## What is a stats section? A stats section puts three or four big numbers on a page, each with a label that says what it counts: customers served, money moved, hours saved. It turns a claim like "teams love it" into something people can weigh. It often sits under the hero or next to customer quotes, and on about and careers pages. - Each stat is a large figure with its unit, and a short label under or beside it. - A heading or a source line tells people what the numbers prove and where they come from. ## When to use stats section - **Proof of scale.** Customers, countries or volume that show the product is real and used. - **Measured results.** Time saved, conversion lifted or costs cut, backed by a source. - **Company facts.** Founded, team size and offices on about and careers pages. ## When not to use one - **Small or vague numbers.** "100+ happy customers" weakens the page. Leave it out until the numbers are strong. - **Numbers people must compare.** Trends and breakdowns need a chart or a table, not a row of figures. - **Claims you cannot source.** If you can't say where a figure comes from, don't print it. ## Anatomy 1. **Heading**: Says what the numbers prove 2. **Figure**: The number, with its unit 3. **Label**: Says what it counts 4. **Period switch**: Optional, picks the range 5. **Source**: Where and when it was counted 6. **States**: Loading, counting, settled, focus ## Variants We sorted every stats design in the Kombai gallery and found six patterns. ### 1. Number row The default. Three or four figures side by side, each with a small label, often split by thin rules. - [Maltbrook](https://kombai.com/gallery/inspirations/stats-web-24/) (Web) - [Windfell](https://kombai.com/gallery/inspirations/stats-web-20/) (Web) - [Lantern Pass](https://kombai.com/gallery/inspirations/stats-ios-23/) (Mobile) ### 2. Stat cards Each figure gets its own card or colored tile, laid out in a row or a two-by-two grid. - [Verglade](https://kombai.com/gallery/inspirations/stats-web-29/) (Web) - [Perambel](https://kombai.com/gallery/inspirations/stats-web-36/) (Web) - [Glyphset](https://kombai.com/gallery/inspirations/stats-ios-7/) (Mobile) ### 3. Stats beside a quote A customer quote and the numbers behind it, so the figures have a face and the quote has proof. - [Solace Stats](https://kombai.com/gallery/inspirations/stats-web-4/) (Web) - [Weftgrain](https://kombai.com/gallery/inspirations/stats-web-13/) (Web) - [Tally Stats](https://kombai.com/gallery/inspirations/stats-ios-1/) (Mobile) ### 4. Results by customer Each figure sits with a customer logo or a short case story, as a wall of named results. - [Ledger](https://kombai.com/gallery/inspirations/stats-web-3/) (Web) - [Espalia](https://kombai.com/gallery/inspirations/stats-web-19/) (Web) - [Halyard](https://kombai.com/gallery/inspirations/stats-web-81/) (Web) ### 5. Oversized figures Figures set as large as a headline, with small labels beside them, so the numbers carry the section on their own. - [Rootward](https://kombai.com/gallery/inspirations/stats-web-18/) (Web) - [Makelab](https://kombai.com/gallery/inspirations/stats-web-6/) (Web) - [Sablewood](https://kombai.com/gallery/inspirations/stats-web-49/) (Web) ### 6. Stats with a chart Headline figures paired with a small line or bar chart that shows the trend behind them. - [Vitalis](https://kombai.com/gallery/inspirations/stats-web-7/) (Web) - [Sedgemere](https://kombai.com/gallery/inspirations/stats-web-17/) (Web) - [Juniper Money](https://kombai.com/gallery/inspirations/stats-ios-19/) (Mobile) ## Where stats sections show up ### Landing page proof A row of figures right under the hero, before people scroll on to the features. - [Barycen](https://kombai.com/gallery/inspirations/stats-web-37/) (Web) - [Heddlemark](https://kombai.com/gallery/inspirations/stats-web-12/) (Web) - [Basalt](https://kombai.com/gallery/inspirations/stats-web-107/) (Web) ### About pages Founded, team size, funding and offices, as quick facts next to the company story. - [Gyleworks](https://kombai.com/gallery/inspirations/stats-web-25/) (Web) - [Corvo](https://kombai.com/gallery/inspirations/stats-web-74/) (Web) - [Northstar Pay](https://kombai.com/gallery/inspirations/stats-ios-14/) (Mobile) ### Careers pages Team size, countries and languages, so candidates get a feel for the team. - [Sonnerain](https://kombai.com/gallery/inspirations/stats-web-34/) (Web) - [Reedbase](https://kombai.com/gallery/inspirations/stats-web-111/) (Web) - [Clearpond](https://kombai.com/gallery/inspirations/stats-ios-18/) (Mobile) ### Reports and outcomes Impact reports and studies that lead with their headline results. - [Parcelwise](https://kombai.com/gallery/inspirations/stats-ios-10/) (Mobile) - [Gatherly](https://kombai.com/gallery/inspirations/stats-ios-21/) (Mobile) - [Rimeholt](https://kombai.com/gallery/inspirations/stats-web-26/) (Web) ## Stats section vs similar components | | [Stats section](https://kombai.com/glossary/stats-section/) | [Testimonials](https://kombai.com/glossary/testimonials/) | [Logo cloud](https://kombai.com/glossary/logo-cloud/) | [Charts](https://kombai.com/glossary/charts/) | |---|---|---|---|---| | Proof it offers | Numbers that show scale or results | Words from real customers | Names of known customers | Trends and comparisons in data | | Read in | A glance | A few seconds per quote | A glance | Longer, with axes and labels | | Best for | Landing, about and careers pages | Building trust before a signup | Showing who already uses it | Dashboards and reports | ## Build notes - Mark stats up as a
: the label in
and the figure in
, with CSS putting the figure on top. - Write the unit into the figure, like "4.8M km", and spell out any abbreviation in the label. - Round big totals. 1.2M reads faster than 1,204,388. - Date the figures or footnote their source, so every claim can be checked. - Set figures in tabular numbers (font-variant-numeric: tabular-nums), so digits keep their width. - If figures count up, skip the animation under prefers-reduced-motion and give screen readers only the final value. ## FAQ ### How many stats should a stats section show? Three or four, which is the usual count in the Kombai gallery. Each extra figure makes the others harder to remember, so cut the weakest one before adding another. ### Should stat numbers animate? They can, but it is optional. A short count-up draws the eye once. Run it once, keep it short and show the final number straight away for people who turn on reduced motion. ### Exact or rounded numbers? Round big totals: 1.2M rides reads faster than 1,204,388. Keep exact figures for small, precise claims, like 99.95% uptime or a 14-minute average. ### What makes a stat believable? A clear label, a unit, a date and a source. "1.2M rides this year, from our ride logs" says more than "1M+ happy customers". ## Related terms - [Logo cloud](https://kombai.com/glossary/logo-cloud/) - [Testimonials](https://kombai.com/glossary/testimonials/) - [Charts](https://kombai.com/glossary/charts/) - [Hero section](https://kombai.com/glossary/hero-section/) ## References - [MDN: The description list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl) - [MDN: font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric) - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - [WAI-ARIA Authoring Practices: Radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)