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.

Questions or custom requests?

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