5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T2742,

# StatsHeroPro

A dashboard-grade stats hero block for Framer. Each metric is its own card with optional gradient backgrounds, multi-series charts, multi-segment donut rings, value-labeled axes, and animated count-ups — all in one component, all responsive out of the box.

---

## Why You'll Like It

- Cards that look like a real dashboard. Per-card gradient backgrounds, soft shadows, rounded corners, varied widths via Card Span (1–6). Mix a wide chart card with a narrow donut, just like the reference dashboards on Dribbble.

- Four polished visualizations per stat. Multi-series Sparkline (smooth gradient area fill), multi-series grouped Bar Chart, multi-segment Donut Ring (with center value, suffix, and sub-label), and Pictogram (icon repetition). Pick one per card and they all animate in sync with the count-up.

- Real chart axes. Y-axis grid lines with compact value labels (10K, 12만, 1.2M). X-axis category labels under the chart. Legend auto-renders for multi-series viz with colored dots and labels.

- Numbers that animate themselves. Each stat counts up from zero on scroll-in. Locale-aware formatting (US/UK/Korean/Japanese/Chinese/EU/BR) with optional compact mode so big numbers stay readable.

- Comparison badges that read themselves. Type `+34% YoY` and the badge picks the right color (green ▲) and arrow automatically. Toggle "Invert" for metrics where lower is better — like response time or churn — and the colors flip.

- Auto-fit responsive grid. Set a Min Column Width and the cards reflow automatically as the container shrinks. Or switch to fixed columns if you want strict control.

- Four design presets. Modern (cards on gray), Minimal (borderless on white), Bold (dark dashboard), Soft (pastel) — or go Custom for full control.

- Polished out of the box. Drop on the canvas and you immediately see a hero gradient card, a multi-series sparkline, a multi-segment donut, and a multi-series bar chart — all matching one of the dashboard inspirations on the marketplace.

---

## Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL.

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

Framer will detect the link and place the component on your page. Drag, resize, configure from the right-side property panel.

---

## Setup in 60 Seconds

1. Drop the component on your canvas.

2. Open the property panel on the right.

3. Stats — open the array, replace the four sample cards with your real metrics. Each card has a Label, a Value, and a Visualization dropdown.

4. Style Preset — pick Modern, Minimal, Bold (Dark), or Soft for an instant look.

5. (Optional) Enable Gradient BG on a hero card and pick two colors.

That's it. Scroll the section into view in the live preview and watch the cards animate.

---

## Four Visualization Modes

Each card has a Visualization dropdown. Pick one of:

### Sparkline (multi-line)

Trend lines with optional smooth bezier curves and gradient area fill (top opaque → bottom transparent). Add multiple Series to compare two or more lines on the same chart with an auto legend.

### Bar Chart (grouped)

Multi-series grouped bars. Each Series renders as its own colored bar at every X position, side by side. Perfect for "Sale 1 vs Sale 2 across 12 months."

### Donut Ring (multi-segment)

Multiple Series each contribute a segment around the ring. The center can show the first segment's percentage, the stat value, or the total of all segments — your call. Add a sub-label like "Conversion" beneath the big percentage.

### Pictogram

For "X out of Y" stories: "8 out of 10 customers recommend us." Pick any character or emoji as the icon, set Total Icons (e.g. 10), and the filled count is computed from the value.

### None

Pure number — no visualization. Use for the cleanest, most minimal cards (or hero cards with a gradient background).

---

## Card Spans for Varied Layouts

Each stat card has a Card Span (1–6). The grid lays cards left to right; a card with span 2 takes the next two columns. Mix a 1-column gradient hero next to a 2-column chart next to a 1-column donut and you get a real-feeling dashboard, not just a row of equal squares.

The default sample uses spans 1, 2, 1, 2 to demonstrate.

---

## Real Chart Axes

Turn on Y-Axis Grid for any chart-type stat and the chart automatically draws:

- Horizontal grid lines at "nice" intervals

- Value labels on the left (10K, 20K, 30K, 40K — or 1만, 2만, 3만 in Korean)

Turn on X-Axis Labels and provide a comma-separated list of labels (e.g. `Jan, Feb, Mar, Apr` or `1, 2, 3, 4`). Labels space evenly under the chart.

Both axes inherit colors and sizes from the Chart Axes group, so the look stays consistent across all your cards.

---

## Multi-Series Setup

Each stat has a Series array. Add one item per line / bar series:

- Label — used in the auto legend

- Data Points — comma-separated numbers (used by Sparkline + Bar)

- Value — single number (used by Donut as segment size)

- Color — drives the chart and the legend dot

For a single-line sparkline, just add one series. For a multi-line comparison chart, add 2–3 series with different colors. The legend appears automatically below the chart when there are 2+ series.

---

## What You Can Customize

Every group below is a collapsible panel in the Framer property pane.

- Style Preset — Modern, Minimal, Bold (Dark), Soft, or Custom.

- Stats — full array of cards. Each one has its own Card BG (with optional Gradient), text colors, icon, comparison delta, viz settings, and series.

- Header — eyebrow + title + subtitle with full typography control.

- Card Style — default card BG, radius, padding, alignment, border, shadow, shadow intensity.

- Number Style — font family, size, weight, color, letter-spacing, locale, prefix/suffix sizing.

- Label Style — typography under the icon row.

- Description — optional sentence under the stat.

- Comparison Delta — up/down/neutral colors, arrow toggle, optional pill background.

- Visualization — chart height, sparkline (stroke/smooth/area gradient/dots), bar (gap/group gap/radius), donut (size/ring width/track/center text + suffix + sub-label), pictogram (columns/size/gap/off opacity).

- Chart Axes — grid color/stroke/dashed, Y label color/size, X label color/size/gap.

- Legend — show, spacing, font, color, dot size, item gap, alignment.

- Icon Style — optional icon next to the label (off by default for cleaner cards).

- Animation — scroll trigger, count-up duration, easing curve, stagger, play-once, viz draw-in.

- Layout — auto-fit responsive (with min column width) or fixed columns, gaps, container framing.

- Footer / Source — optional small line under the cards.

Most designers only touch Stats, Style Preset, and a color or two. Pick a preset, edit your cards, ship.

---

## Locale & Compact Formatting

Set the Locale in Number Style. The component uses your browser's `Intl.NumberFormat`:

|---|---|---|---|

| 12500 | en-US | 12,500 | 12.5K |

| 12500 | ko-KR | 12,500 | 1.3만 |

| 4700000 | en-US | 4,700,000 | 4.7M |

| 4700000 | ja-JP | 4,700,000 | 470万 |

| 4700000 | de-DE | 4.700.000 | 4,7 Mio. |

Compact mode is recommended for any metric with 5+ digits. The Y-axis labels use the same compact helper so big chart values like 40,000 render as 40K — exactly like the references.

---

## Great For

- SaaS marketing pages ("Built for teams that ship")

- Investor decks rendered as web pages

- Annual report / year-in-review microsites

- Pricing pages (12K teams, 4.9★ rating, 99.98% uptime)

- Case studies showing client results

- Recruiting pages ("Why work here")

- Product launch pages with key metrics

- Anywhere a row of static numbers would work, but better

---

## A Few Tips

- For headline impact, set Number Font Size to 40–60 and Letter Spacing to a slight negative (-1 to -1.5).

- Use a Gradient BG on one or two hero cards to break up the grid and create visual hierarchy.

- For multi-series charts, keep your colors complementary (e.g. orange + purple) — it reads more clearly than two similar shades.

- Y-axis grid is the single fastest way to make a card feel "dashboard-grade" instead of "marketing-fluff."

- For Korean / Japanese sites, set Locale appropriately so big numbers use the local convention (만, 億, 万).

- Use Card Span 2 on the chart cards and Card Span 1 on the donuts and gradient hero cards for the cleanest layouts.

---

## Need Help?

If a chart doesn't appear:

- Check that the Visualization dropdown isn't on "None".

- For Sparkline / Bar: each Series needs a Data Points field with at least 2 numbers.

- For Donut: each Series needs a Value > 0.

- For Pictogram: confirm Pictogram Icon and Total Icons are filled in.

If the cards aren't reflowing on small screens:

- Make sure Auto-Fit Columns is on in the Layout group.

- Lower Min Column Width (default 260) if you want narrower cards.

If a stat looks crowded:

- Increase the card padding (Card Style → Padding).

- Enable Compact mode for big numbers.

- Reduce decimal places if you don't need them.

Everything else just works.

5a:[["$","$L5d",null,{"post":{"id":"019e2717-69db-775d-bf06-38348b57ecc0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"MpqSfI0OWfUlcB9Qpjs2","resolved":true,"title":"StatsHeroPro","body":"$5e","bodyJson":null,"introduction":"Data visualization stats component","slug":"statsheropro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/MpqSfI0OWfUlcB9Qpjs2/statsheropro-IGAMxwlEJjInacBnaL7l23TYVgRh1d","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-10T07:19:20.451Z","updatedAt":"2026-05-14T13:37:15.171Z","publishedAt":"2026-05-14T15:25:06.395Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://expensive-food-815963.framer.app/","price":"25","paymentUrl":"https://buy.polar.sh/polar_cl_O4XLW77rgXyqMjtXw5oA1q4x7zseYSPl6bkaz3ot5Sy","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"jyHgEaYNSALNJSLBhlDc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T15:25:06.395Z","updatedAt":"2026-05-14T15:25:06.395Z","reported":false}}],"$L5f"]

Suggested for you