Stats - JSON API V2 Examples

Build statistics displays programmatically with the V2 semantic content types

Back to Component API Examples
V2 Semantic Content Types
The Stats component supports two V2 content types: stat for single statistics and stats for grouped statistics. Both types use semantic configuration instead of HTML strings.

Example 1: Single Stat

Create a single statistic with the stat content type. Perfect for hero sections or featured metrics.

Single Stat • JavaScript
const config = {
    version: 2,
    layoutId: "featured-stat",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "stat",
            value: 50000,
            label: "Happy Customers",
            suffix: "+",
            icon: "fa-users",
            variant: "featured",
            colorScheme: "primary",
            animate: true
        }
    }]
};

RSL.JSONLayout.renderLayout('#container', config);

Example 2: Stats Group

Create a group of related statistics with the stats content type. Great for landing page metrics.

Stats Group • JavaScript
const config = {
    version: 2,
    layoutId: "landing-stats",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "stats",
            gap: "2rem",
            dividers: true,
            items: [
                {
                    value: 10000,
                    label: "Users",
                    suffix: "+",
                    icon: "fa-users",
                    colorScheme: "primary",
                    animate: true
                },
                {
                    value: 99.9,
                    label: "Uptime",
                    suffix: "%",
                    icon: "fa-server",
                    colorScheme: "success",
                    animate: true,
                    decimals: 1
                },
                {
                    value: 24,
                    label: "Support",
                    suffix: "/7",
                    icon: "fa-headset",
                    colorScheme: "info",
                    animate: true
                },
                {
                    value: 50,
                    label: "Countries",
                    suffix: "+",
                    icon: "fa-globe",
                    colorScheme: "warning",
                    animate: true
                }
            ]
        }
    }]
};

RSL.JSONLayout.renderLayout('#container', config);

Example 3: Compact Variant

Use the compact variant for smaller displays or sidebars.

Compact Stats • JavaScript
const config = {
    version: 2,
    layoutId: "compact-stats",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "stats",
            variant: "compact",
            gap: "1.5rem",
            items: [
                { value: 50, label: "Faster Setup", suffix: "%", colorScheme: "success" },
                { value: 100, label: "Zero Dependencies", suffix: "%", colorScheme: "primary" },
                { value: 24, label: "Response Time", suffix: "hr", colorScheme: "info" }
            ]
        }
    }]
};

RSL.JSONLayout.renderLayout('#container', config);

Example 4: Card Variant with Click Actions

Stats with card styling and clickable navigation.

Card Stats • JavaScript
const config = {
    version: 2,
    layoutId: "card-stats",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "stats",
            gap: "1.5rem",
            items: [
                {
                    value: 156,
                    label: "View Products",
                    suffix: "+",
                    icon: "fa-box",
                    variant: "card",
                    colorScheme: "primary",
                    clickable: true,
                    href: "#products",
                    animate: true
                },
                {
                    value: 25,
                    label: "Categories",
                    icon: "fa-tags",
                    variant: "card",
                    colorScheme: "success",
                    clickable: true,
                    href: "#categories",
                    animate: true
                },
                {
                    value: 4.9,
                    label: "Avg Rating",
                    icon: "fa-star",
                    variant: "card",
                    colorScheme: "warning",
                    clickable: true,
                    href: "#reviews",
                    animate: true,
                    decimals: 1
                }
            ]
        }
    }]
};

RSL.JSONLayout.renderLayout('#container', config);

Example 5: Inline Variant

Horizontal inline stats for product badges or social proof.

Inline Stats • JavaScript
const config = {
    version: 2,
    layoutId: "inline-stats",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "stats",
            variant: "inline",
            gap: "1rem",
            items: [
                { value: 4.8, label: "Rating", icon: "fa-star", colorScheme: "warning" },
                { value: 2500, label: "Reviews", suffix: "+", icon: "fa-comments", colorScheme: "primary" },
                { value: 98, label: "Recommend", suffix: "%", icon: "fa-thumbs-up", colorScheme: "success" }
            ]
        }
    }]
};

RSL.JSONLayout.renderLayout('#container', config);

Example 6: Stats Preset

Use the stats preset for quick setup with template-based rendering.

Stats Preset • JavaScript
// Using the stats preset for quick configuration
RSL.JSONLayout.renderPreset('#container', 'stats', {
    id: 'company-stats',
    breakpoints: { xs: 2, md: 4 },
    gap: '2rem',
    stats: [
        { value: '10M+', label: 'Downloads' },
        { value: '500K', label: 'Active Users' },
        { value: '99.9%', label: 'Uptime' },
        { value: '150+', label: 'Countries' }
    ]
});