Pricing Radio Card is a two-panel pricing component that pairs a visual feature checklist with interactive radio-style plan cards. When visitors select a plan, the price animates with a smooth counter transition and the feature list updates to highlight what is included. Designed for SaaS landing pages, membership sites, and product pricing sections where clarity and conversion matter.
Animated price counter with configurable speed and easing on plan switch
Dynamic feature checklist that updates included vs excluded items per plan
Four built-in themes — Ivory, Slate, Midnight, and Ember — plus full custom colour control
Responsive desktop and mobile layouts with automatic content reordering
Glassmorphism badges, accent edge bars, radio dot glow rings, and CTA shine sweep micro-animations
Up to 6 pricing plans and 12 feature rows, each fully configurable
Plans — label, subtitle, price, billing period, badge text, CTA label, CTA link, and included feature count per plan
Features — reorderable list of feature names
Section titles and subtitles for both the features panel and the plans panel
Currency symbol
Default selected plan
Layout toggle — Desktop or Mobile
Theme selector — Ivory, Slate, Midnight, Ember, or Custom
Custom colours — background, card background, primary text, secondary text, accent, and CTA text
Border radius for the outer card and individual radio cards
Shadow intensity
Border visibility toggle
Transition speed — Slow, Medium, or Fast
Price counter animation duration
Heading font
Price font
Body font
Show or hide CTA button
Show or hide plan badges
SaaS and software pricing pages where visitors need to compare plan tiers at a glance
Membership and subscription sites that want an interactive, conversion-focused pricing section
Product landing pages that benefit from animated micro-interactions to hold attention
Service-based businesses presenting tiered packages with clear feature breakdowns
Every interaction — from the radio dot glow to the price counter animation — is designed to keep visitors engaged and guide them toward a decision.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
