Stats - Examples

Landing Page Hero Stats

Perfect for showcasing impressive numbers at the top of your landing page.

Animated Hero Stats with Count-Up

Trusted by Industry Leaders

SaaS Pricing Page Stats

Showcase value propositions on your pricing page with compact stats.

Compact Value Props

Why Choose Us?

Join thousands of satisfied customers

E-commerce Product Stats

Display product metrics and social proof with inline stats.

Product Social Proof

Premium Wireless Headphones

Experience audio like never before

Featured Hero Metric

Highlight a single impressive metric with the featured variant.

Featured Stat

Card Style Stats

Elevated cards with shadows for more visual separation.

Infrastructure Stats

Size Variations

Stats come in 5 sizes: xs, sm, md (default), lg, and xl.

All Sizes Compared

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

Color Schemes

Five built-in color schemes to match your brand.

All Color Schemes

Clickable Stats

Make stats interactive with click handlers or navigation links.

Clickable with Hover Effects

Try clicking the stats above - they have hover effects and are keyboard accessible

FilterBus Integration

Stats can subscribe to RSL's FilterBus for dynamic visibility control.

Region-Filtered Stats

Dark Theme Stats

Stats automatically adapt to dark mode themes.

On Dark Background

Programmatic Creation

Create stats dynamically using the JavaScript API.

Dynamic Stats

// Create stats programmatically
const container = document.getElementById('my-stats');

// Clear any existing stats first
container.querySelectorAll('.rsl-stat').forEach(stat => RSL.Stats.destroy(stat));
container.innerHTML = '';

// Define stats data
const statsData = [
    { value: 10000, label: 'Customers', suffix: '+', icon: 'fa-users', colorScheme: 'primary', variant: 'card', animate: true },
    { value: 99.9, label: 'Uptime', suffix: '%', icon: 'fa-server', colorScheme: 'success', variant: 'card', animate: true }
];

// Create stat elements with data attributes
statsData.forEach(function(data) {
    const stat = document.createElement('div');
    stat.className = 'rsl-stat';
    stat.setAttribute('data-value', data.value);
    stat.setAttribute('data-label', data.label);
    if (data.suffix) stat.setAttribute('data-suffix', data.suffix);
    if (data.icon) stat.setAttribute('data-icon', data.icon);
    if (data.colorScheme) stat.setAttribute('data-color-scheme', data.colorScheme);
    if (data.variant) stat.setAttribute('data-variant', data.variant);
    if (data.animate) stat.setAttribute('data-animate', '');
    container.appendChild(stat);

    // Initialize each stat - this builds the internal HTML structure
    RSL.Stats.create(stat);
});

// Update a specific stat later
const firstStat = container.querySelector('.rsl-stat');
RSL.Stats.update(firstStat, 15000, { animate: true });

See FilterBus in Action

Watch how Stats can show/hide based on filter selections. This live demo shows Filter + Smart Table + KPI Cards + Stats + Charts all working together.

View Live Dashboard Demo

Stats Examples