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.
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
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
Plan Images array (one image per plan, falls back to defaults)
Badge text
Heading (supports bold markers with double asterisks)
Subtitle (multi-line textarea)
Currency symbol
Show/hide images toggle
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
Border radius, card padding, tab roundness
Shadow intensity
Show/hide card border
Transition speed (Slow, Medium, Fast)
Price counter animation duration
Heading Font
Tab Font
Price Font
Body Font
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
