Price Compare Cards

What is Price Compare Cards?

A production-ready pricing component that combines plan cards, a monthly/yearly billing toggle, and an expandable feature comparison table into one configurable block. Designed for SaaS landing pages, agency sites, and product launches where clear pricing drives conversions. Supports up to five plans with per-card features, tooltips, popular badges, and animated price transitions.

Core Features

• Monthly/yearly billing toggle with animated price count-up and customisable save badge

• Expandable comparison table with simple or grouped feature modes, check/cross/text values, and hover-highlighted rows

• Five theme presets (Dark, Light, Midnight, Warm, Custom) with full six-colour override when using Custom

• Glassmorphism backdrop blur, cursor-reactive glow, animated border glow, and hover lift effects

• Desktop and Mobile card layout variants for responsive design

• Per-plan popular badge with custom gradient and text colour

• Solid and outline CTA styles with independent text and outline colour overrides

Controls inside Framer

Plans

• Plan Name, Description, Monthly Price, Yearly Price

• Currency symbol and period label

• Card Features list with optional tooltips

• Comparison Values per plan (check, cross, text, or dash)

• CTA Label, CTA Link, Popular toggle, Badge Text

Essential Controls

• Billing Toggle visibility

• Theme preset selector

• Font family

• CTA Style (Solid / Outline)

• Card Layout (Desktop / Mobile)

Custom Colors (visible when Theme is Custom)

• Background, Card BG, Text Primary, Text Secondary, Accent, Border

Card Style

• Corner Radius, Glassmorphism, Shadow intensity

• Hover Lift, Cursor Glow, Border Glow

• Toggle Active colour, Toggle Inactive colour, Toggle Knob colour

• CTA Text colour, CTA Outline colour

Comparison

• Show/Hide section toggle

• Feature Mode (Simple / Grouped)

• Feature list

• Start Expanded option

Feature Groups (visible in Grouped mode)

• Group Title

• Features per group

Animation

• Entrance animation toggle

• Price Count Up toggle

• Speed control

Badge Style

• Gradient Start, Gradient End, Text Color

Best use cases

• SaaS and subscription product pricing pages that need monthly/yearly toggling and feature breakdowns

• Agency and studio websites comparing service tiers with a detailed comparison grid

• Product launch pages where a polished, on-brand pricing section converts visitors into customers

Built to save hours of layout work while delivering a pricing section that looks and feels premium.

Questions or custom requests?

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