Pricing Card Stacks

What is Pricing Card Stacks?

Pricing Card Stacks is an interactive pricing component that displays your plans as a layered vertical stack. One plan expands to show full details while the others compress into compact summary rows. Click any plan to shift focus, toggle between monthly and yearly billing with animated price transitions, and let your visitors compare options in a format that feels editorial and intentional. Ideal for SaaS landing pages, product sites, and membership platforms.

Core Features

• Stacked deck layout where the active plan expands with a progressive feature reveal and inactive plans compress into clean summary rows

• Animated monthly/yearly toggle with smooth price count-up and auto-calculated savings badges

• Four built-in theme presets — Glass, Dark, Gradient, and Custom — with full colour override support

• Fully responsive across desktop, tablet, and mobile with automatic layout adaptation

• Per-plan icons with five built-in options or custom image upload, popular badge with shimmer animation, and configurable CTA buttons with link support

Controls inside Framer

Plans

• Plan name, subtitle, and description

• Monthly price and yearly total (auto-calculates monthly equivalent and savings percentage)

• Built-in icon selector (Cube, Bolt, Shield, Crown, Star) or custom icon image

• Popular badge toggle

• CTA button text and link

• Feature list with strikethrough support (prefix with ~)

• Feature tooltips matched by index

Toggle

• Show or hide the billing toggle

• Custom labels for monthly and yearly

• Savings badge visibility

Card Style

• Corner radius

• Glow intensity

• Card gap spacing

• Accent bar width

Typography

• Independent font controls for heading, price, body, and button text

Custom Colours (visible when theme is set to Custom)

• Accent, glow, glow alt, card background, primary text, secondary text, CTA background, CTA text, badge gradient start and end, toggle background, toggle thumb, border, and tooltip background

Best use cases

• SaaS and subscription pricing pages that need to stand out from standard three-column layouts

• Product and membership sites where progressive feature discovery improves conversion

• Agency portfolios and freelancer sites showcasing tiered service packages

• Landing pages where space is limited and a compact, interactive format outperforms wide grids

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.