Metrics Section

What it does Metrics Section gives your landing page a professional stats block in one drop.

What it does Metrics Section gives your landing page a professional stats block in one drop. Numbers animate up on load, each card shows a sparkline trend chart, and color-coded badges show whether metrics are trending up or down. Features Up to 4 metric cards in a configurable grid (1–4 columns). Animated number counters that count up from zero on page load. SVG sparkline charts generated from comma-separated data points. Trend badges with percentage change and directional arrows. Full property panel controls for every label, value, prefix, suffix, change percentage, sparkline data, card color, text color, background, border, radius, gap, and font family. How to use Paste the component onto your canvas. In the right sidebar, set your metric labels and values. Add sparkline data as comma-separated numbers. Set prefix ($, €) and suffix (%, m, k) for each metric. Choose your column count and adjust card styling to match your design. Ideal for SaaS landing pages, startup pitch sites, dashboard showcases, analytics product pages, investor-facing pages, and any site that needs to display KPIs with visual impact.

Stats cards with sparklines and counters