Stats Premium

Quick Start

Stats is RSL's lightweight statistics component - perfect for landing pages, marketing sections, and anywhere you need clean, impactful metric displays without dashboard complexity.

Stats vs KPI Cards

RSL offers two components for displaying metrics. Choose based on your use case:

Data Attributes API

Stats are fully configurable via data attributes - no JavaScript required for basic usage.

Core Attributes

Appearance Attributes

Animation Attributes

Interaction Attributes

Group Container Attributes (on .rsl-stats)

Layout Variants

Stats offers 5 distinct layout variants for different contexts:

Default

Clean, centered layout - perfect for most use cases.

Compact

Condensed layout for space-constrained areas.

Inline

Badge-like display for inline placement.

Featured

Hero-style for highlighting key metrics.

Card

Elevated card style with shadows.

JavaScript API

For programmatic control, use the RSL.Stats namespace.

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

RSL.Stats.create(container, {
    value: 10000,
    label: 'Happy Customers',
    suffix: '+',
    icon: 'fa-users',
    colorScheme: 'primary',
    animate: true,
    duration: 2500
});

// Update a stat dynamically
RSL.Stats.update(container, {
    value: 15000,
    label: 'Even Happier Customers'
});

// Format a number
RSL.Stats.formatNumber(1234567, {
    separator: ',',
    decimals: 0
}); // Returns "1,234,567"

JSON Layout API V2

Stats integrates with RSL's JSON Layout API V2 for declarative page building.

Single Stat

{
    content: {
        type: "stat",
        value: 10000,
        label: "Happy Customers",
        suffix: "+",
        icon: "fa-users",
        colorScheme: "primary",
        animate: true
    }
}

Stats Group

{
    content: {
        type: "stats",
        variant: "default",
        gap: "2rem",
        items: [
            { value: 10000, label: "Customers", suffix: "+", icon: "fa-users" },
            { value: 99.9, label: "Uptime", suffix: "%", icon: "fa-server" },
            { value: 24, label: "Support", suffix: "/7", icon: "fa-headset" }
        ]
    }
}

See More: Browse all JSON API V2 Stats examples →

FilterBus Integration

Stats can subscribe to RSL's FilterBus for visibility filtering based on external filter controls. This is ideal for dashboard scenarios where filter buttons control which stats are displayed.

Example

<!-- Filter publishes to FilterBus -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All Regions</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
</div>

<!-- Stats subscribe to FilterBus -->
<div class="rsl-stats">
    <!-- Always visible (no filter-value) -->
    <div class="rsl-stat"
         data-value="2847"
         data-label="Total Customers"
         data-filter-subscribe="region">
    </div>

    <!-- Shows only when region="North" -->
    <div class="rsl-stat"
         data-value="847"
         data-label="North Customers"
         data-filter-subscribe="region"
         data-filter-value="North">
    </div>

    <!-- Shows only when region="South" -->
    <div class="rsl-stat"
         data-value="623"
         data-label="South Customers"
         data-filter-subscribe="region"
         data-filter-value="South">
    </div>
</div>

FilterBus Attributes

Accessibility

Stats is built with accessibility as a core feature:

• ARIA Labels: Each stat generates a comprehensive aria-label (e.g., "Happy Customers: 10,000+")
• Screen Reader Support: Icons have aria-hidden="true", values are announced properly
• Keyboard Navigation: Clickable stats are focusable and respond to Enter/Space
• Focus Indicators: High-contrast 3px focus outlines with 4px offset
• Reduced Motion: Animations respect prefers-reduced-motion
• Live Regions: Dynamic updates announced via aria-live="polite"
• Color Independence: Information is not conveyed by color alone

Events

Stats dispatches custom events for integration with your application:

Next Steps