About Pricing Card Tabs

What is Pricing Card Tabs?

Pricing Card Tabs is an interactive pricing section that pairs selectable plan tabs with a rich detail card. Visitors click a plan on the left to reveal pricing, features, a CTA button, and an optional hero image on the right — all with smooth crossfade transitions. Ideal for SaaS pricing pages, product tier comparisons, membership plans, and service packages where visual clarity drives conversions.

Core Features

Tabbed plan selection with animated detail card — smooth crossfade, blur transitions, and staggered feature reveals when switching between plans
Per-plan hero images with gradient overlay — assign a unique image to each plan or use built-in defaults, with an elegant bottom-fade into the card surface
Animated price counter — prices roll up and down with cubic easing when switching plans, drawing attention to the value difference between tiers
Four premium theme presets (Ivory, Slate, Midnight, Ember) plus full Custom color mode with seven independent color tokens
Independent typography controls — set separate fonts for the heading, tab titles, price display, and body text to match any brand system
Desktop and mobile layout modes — side-by-side two-column layout or vertically stacked single-column for responsive breakpoints
Per-plan icons from six built-in options (Zap, Rocket, Building, Star, Shield, Diamond) to visually differentiate each tier
Plan badges, disclaimer notes, and customisable CTA buttons with hover scale and shadow bloom interactions

Controls inside Framer

Plans

Plan name, subtitle, price, period, badge, CTA label, CTA link
Description tagline and features label
Icon selector (Zap, Rocket, Building, Star, Shield, Diamond)
Features list (up to 10 string items per plan)
Optional disclaimer note

Images

Plan Images array (one image per plan, falls back to defaults)

Section Header

Badge text
Heading (supports bold markers with double asterisks)
Subtitle (multi-line textarea)
Currency symbol
Show/hide images toggle

Layout and Theme

Layout mode (Desktop / Mobile)
Theme preset (Ivory, Slate, Midnight, Ember, Custom)
Custom Colors group — background, card background, text primary, text secondary, accent, tab hover, CTA text

Card Style

Border radius, card padding, tab roundness
Shadow intensity
Show/hide card border

Animation

Transition speed (Slow, Medium, Fast)
Price counter animation duration

Typography

Heading Font
Tab Font
Price Font
Body Font

Best use cases

SaaS and software pricing pages where plan comparison clarity drives sign-ups
Agency and freelancer service tiers with distinct deliverables per package
Membership and subscription platforms showcasing feature differences across plans
Product landing pages that need a visually rich, editorial pricing section that builds trust

Ship a pricing section that looks custom-built in a fraction of the time. Drag, configure your plans, and publish.