StatsHeroPro

Data visualization stats component

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. - 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. 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. 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. Each card has a Visualization dropdown. Pick one of: 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. 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." 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. 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. Pure number — no visualization. Use for the cleanest, most minimal cards (or hero cards with a gradient background). 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. 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. 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. 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. Set the Locale in Number Style. The component uses your browser's `Intl.NumberFormat`: | Value | Locale | Compact off | Compact on | |---|---|---|---| | 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. - 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 - 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. 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.

Data visualization stats component