Metrics Section: Premium Data Component by Spyridon Merkouris

An all-in-one metrics section with animated number counters, mini-charts, and trend indicators. Supports up to 4 metric cards in a responsive grid. Every value, label, color, prefix, suffix, and sparkline data point is editable from the property panel.

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.