Stats 9 - Split stats with feature cards

Pro

A two-column section with a badge, heading, and three inline metrics beside a four-card feature grid.

Vue
Shadcn Stats 9 block

Component Data

  • ID:stats9
  • Access:pro
  • Created:Feb 20, 2025
  • Type:block

Stats 9 block design & features

Stats9 is a two-column section built with shadcn/ui. The left column has an outlined Features badge, a large heading, a muted paragraph, and three inline metrics (users served, uptime, user score) separated by vertical rules. The right column is a two-by-two grid of feature cards, each with an icon, title, and short description.

Cards sit on muted fills with light borders and rounded corners. Icons are simple square marks. The left copy is left-aligned on large screens and centered on smaller ones. Metrics are bold but not oversized. Surfaces stay flat, with no shadows. Static.

The mix of inline proof numbers and a feature bento is a common product-marketing layout. It feels corporate and feature-led rather than number-first. Complexity is moderate and mixed: four icons plus copy on the cards, and three real metrics on the left.

On smaller screens the columns stack, the feature cards go from a two-by-two grid to a single column, and the metric row stays horizontal with the separators between them.