---
title: "Metrics Section — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Spyridon Merkouris · Sections. What it does Metrics Section gives your landing page a professional stats block in one drop."
canonical: "https://framer.elliotli.dev/component/metrics-section"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Metrics Section

# Metrics Section

Stats cards with sparklines and counters

[View on Framer](https://framer.com/marketplace/components/metrics-section/?via=elliot-li)

![Metrics Section preview image 1](https://framer.elliotli.dev/og/component/metrics-section/06df9af7de6bc75d/1600x1200.jpg)

## Summary

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

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #9536

## Details

- **Author**: Spyridon Merkouris
- **Price**: $4.00
- **Published**: 2026-04-27
- **Updated**: 2026-05-07
- **Added**: 2026-04-08
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove