Domain

StatisticsSection

Marketing metrics section that wraps StatisticGroup/Statistic to present headline numbers with optional trend indicators.

import { StatisticsSection } from '@lostgradient/cinder/statistics-section';
marketingmetricsstats
01

Overview

Renders a key-metrics section by composing StatisticGroup and Statistic cards.

Usage

svelte 
<script lang="ts">
  import StatisticsSection from '@lostgradient/cinder/statistics-section';

  const stats = [
    { label: 'Active users', value: '12,400' },
    { label: 'Avg. response time', value: '180ms' },
    { label: 'Uptime', value: '99.99%' },
  ];
</script>

<StatisticsSection title="Performance at a glance" {stats} />
Live preview
02

When to use

Use when
  • Showing key outcomes such as uptime, customers, revenue, or latency in landing-page copy.
  • Presenting a short metrics band between hero/features and pricing sections.
Avoid when
03

Examples

StatisticsSection

StatisticsSection composing StatisticGroup + Statistic for a marketing KPI band with trends.

04

Props

Props for statistics-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text Optional section heading text.
description text Optional section description text.
stats StatisticsSectionItem[] req Statistics to render via StatisticGroup + Statistic.
columns StatisticGroupColumns 'auto' Columns forwarded to StatisticGroup.
variant 'default' | 'cards' | 'shared-borders' 'cards' Variant forwarded to StatisticGroup.
label text 'Key metrics' Accessible label forwarded to StatisticGroup.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.