Skip to content

component

Pricing Pulse

By Gazi Efe

Details

Summary

Pricing Pulse replaces cluttered multi-column pricing tables with one elegant, interactive card.

Description

Pricing Pulse replaces cluttered multi-column pricing tables with one elegant, interactive card. Customers drag a slider to move between tiers, and everything responds in real time: plan name, "up to" revenue cap, price, the feature checklist, the stats row and even the button's destination link. It's built to be 100% editable from Framer's property controls — there's nothing hardcoded. Add as many plans as you like; each plan can carry its own features, stats, icons and checkout link, or fall back to a shared global set when you want them identical across tiers. It's genuinely responsive on both axes. Across mobile, tablet and desktop the layout adapts (the revenue and price stack vertically on narrow widths). As the card's height shrinks, content scales down smoothly to a floor, then progressively collapses low-priority sections, and finally scrolls inside the card — so it stays clean and usable at any size. Long headlines like "Up to 100,000 users" auto-fit their font so they never wrap awkwardly. The stats row stays pinned directly above the button no matter how many features a plan lists. Pick icons from a built-in dropdown of ~75 clean line icons, or paste your own custom SVG with its own size. Choose any font, including Google Fonts, from Framer's font picker. Highlights Slider-driven tiers — plan, price, revenue, features, stats and CTA link all change live Unlimited plans, each fully customizable (or shared via global fallbacks) Optional "Up to $X" revenue block — toggle off for a pure pricing card Per-plan button links for tier-specific checkout / signup ~75 built-in line icons via dropdown + custom SVG support, with adjustable icon size and color Any font, including Google Fonts, via Framer's font picker Responsive on width and height: scale -> collapse -> scroll, never breaks Auto-fit headlines, pinned stats + button, adjustable breakpoints Every text, value, color, font, radius and threshold editable in Framer

Introduction

Interactive slider pricing card

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600174478/148/228/309/79/15
  • All · #6664