Stats

The stats section displays impact numbers and key metrics in a visually striking layout. It supports three layout variants: grid (responsive auto-fit grid), row (centered flex row), and compact (tighter spacing for smaller displays). Optional class modifiers add card styling or highlighted backgrounds.

Configuration

Basic Structure

sectionType: stats
classes: ''           # Optional: 'has-cards' or 'is-highlighted'
text:
  title: 'Our Impact'
  subTitle: 'Numbers that matter'
stats:
  layout: 'grid'      # 'grid', 'row', or 'compact'
  items:
    - value: '10K+'
      label: 'Active Users'
      icon: 'users'        # Optional icon
      description: 'Text'  # Optional description

Configuration Options

Layout Options

Layout	Description
`grid`	Responsive auto-fit grid (default)
`row`	Centered flex row with even spacing
`compact`	Tighter spacing, smaller text for secondary stats

Style Modifiers (via classes)

Class	Description
`has-cards`	Adds border and background to each stat item
`is-highlighted`	Primary color background with white text

Item Properties

Property	Type	Required	Description
`value`	string	Yes	The metric value (e.g., '10K+', '99.9%')
`label`	string	No	Label beneath the value
`icon`	string	No	Icon name from the icon library
`description`	string	No	Additional context text

Icons

The stats section uses the site's icon library from lib/layouts/icons/. Common icons for stats include: users, activity, zap, star, download, heart, clock, package, globe, trending-up.