Skip to content

Stats Sections

Highlight key numbers and metrics.

4 components

Stats Section with Background Image – Bootstrap 5 stats sections preview

Stats Section with Background Image

Bootstrap 5 stats section with four key numbers in glass cards over a darkened background photo, with a count-up animation on scroll.

Bootstrap 5 Stats Sections
Stats with Circular Progress Rings – Pure CSS stats sections preview

Stats with Circular Progress Rings

Dark stats section with four SVG circular progress rings that fill and count up to their percentage when scrolled into view.

Pure CSS Stats Sections
Animated Number Counters – Pure CSS stats sections preview

Animated Number Counters

Stats section with four number cards that count up when scrolled into view, using IntersectionObserver, locale formatting and reduced-motion support.

Pure CSS Stats Sections
Stats Section with Count-Up Numbers – Tailwind CSS stats sections preview

Stats Section with Count-Up Numbers

Tailwind CSS key-metrics section on an emerald brand background with large numbers, labels, trend notes and an accessible count-up on scroll.

Tailwind CSS Stats Sections

What is a stats section?

A stats section highlights a handful of key numbers, such as customers served, uptime, downloads, years in business or projects completed. Each item pairs a large figure with a short label and sometimes an icon or a one-line explanation. Stats sections appear on landing pages, about pages, annual summaries and product pages to give quick, concrete evidence.

When to use a stats section

Use it when you have numbers that are meaningful to the visitor and easy to understand at a glance. Three or four strong figures work better than eight weak ones. Make sure every number is accurate and explain what it measures.

Best practices

  • Pair each figure with a clear label; a description list (<dl>, <dt>, <dd>) is a good semantic fit.
  • Keep units and suffixes like "%", "k" or "+" in the visible text so the meaning is not lost.
  • If you animate numbers counting up, render the final value in the HTML, start the animation only when the section scrolls into view and respect prefers-reduced-motion.
  • Avoid relying on colour alone to signal positive or negative change; add text or an icon with a label.
  • Lay items out in a responsive grid that becomes two columns on tablets and one or two on phones.
  • Use tabular figures (font-variant-numeric: tabular-nums) so numbers align neatly.

Bootstrap, Tailwind CSS and pure CSS versions

The stats section examples are built in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions combine the grid with typography and border utilities, and Bootstrap 6 variants use the theme-* colour roles for highlighted figures. Tailwind CSS versions are utility-based, while the pure CSS versions use CSS Grid and custom properties; counter animations, where present, use a small script with an IntersectionObserver. Choose a framework with the filter, check the result in the live preview, then copy the code from the tabs or download it. Replace the numbers and labels with your own metrics and the section is ready.