Statistic

Usage

{{ include('greatlakes:statistic', {
  statistic: '$2,400',
  first_line: 'Students',
  second_line: 'Enrolled students from 45 countries',
  href: 'https://www.example.com'
}, with_context = false) }}

Props

Animation Features

CountUp.js Integration

• Library: Uses CountUp.js for smooth number animations
• Smart parsing: Automatically detects and preserves prefix/suffix text (e.g., $, %, +, €, ppm)
• Number formatting: Respects commas as thousand separators and decimal places
• Viewport activation: Animation triggers when the statistic enters the viewport using Intersection Observer

Accessibility Considerations

• Reduced motion: Respects prefers-reduced-motion user preference - animations disabled for users who prefer reduced motion
• Performance: Uses Intersection Observer instead of scroll events for better performance
• Semantic markup: Proper structure for screen readers

Supported Number Formats

• Currencies: $1,200, €500, ¥1000
• Percentages: 98%, 45.5%
• Suffixed values: 5000+, 200ppm
• Decimal values: 3.14, 98.6
• Large numbers: 1,200,000 (with comma separators)

CSS Custom Properties

Statistic Text Styling

• --stat-stat-text-color - Default color for the main statistic number (theme loud text)
• --stat-stat-text-color-hover - Hover state color for linked statistics (theme primary text)
• --stat-stat-font-size - Font size for the statistic number (5.5rem/88px, responsive to 3.75rem/60px on narrow containers)

First Line Styling

• --stat-first-line-font-size - Font size for the first descriptive line (h3 size)
• --stat-first-line-text-color - Color for the first line text (theme medium text)

Second Line Styling

• --stat-second-line-font-size - Font size for the second descriptive line (body large size)
• --stat-second-line-text-color - Color for the second line text (theme primary text)

Container Queries

@container (width < 300px) {
  --stat-stat-font-size: 3.75rem; /* 60px */
}

• Narrow containers (< 300px): Smaller statistic font size for better fit
• Default containers: Full-size display with larger statistic numbers

JavaScript Configuration

Customizable Settings

const groupingSeparator = ',';