Price Plan Table is a structured pricing comparison component that pairs plan cards with a detailed feature matrix. Display up to five plans side-by-side on desktop, or let visitors browse one plan at a time with a dropdown selector on mobile. Group features into labelled sections, highlight your recommended plan with a featured badge, and show strikethrough pricing to reinforce value. Ideal for SaaS platforms, membership sites, and product landing pages.
Desktop and mobile layouts — Switch between a multi-column comparison grid and a single-plan mobile view with a themed dropdown selector, directly from the property panel.
Grouped feature sections — Organise features under named categories (e.g. Platform, Security) with check marks, dashes, or custom text values per plan.
Featured plan with badge — Highlight your best-value plan with a contrasting card style and a customisable pill badge (e.g. POPULAR, BEST VALUE).
Strikethrough pricing — Show an original price alongside the current price to communicate discounts and savings at a glance.
Interactive info tooltips — Add hover-activated tooltips to any plan or feature to explain details without cluttering the layout.
Five built-in themes plus full custom — Choose from Lime, Dark, Ocean, Warm, or Purple, or define every color individually with the Custom theme option.
Desktop / Mobile toggle
Lime, Dark, Ocean, Warm, Purple, or Custom
Plan Name
Subtitle
Price
Original Price (strikethrough)
Period
Featured toggle
Badge Text
Card CTA label
CTA Link (native Framer link picker)
Current Plan toggle
Bottom CTA label
Tooltip text
Section Title
Features array (feature name, pipe-separated values, tooltip)
Bottom CTAs (show/hide)
Info Icons (show/hide)
Background, Card BG, Featured BG, Accent, Text, Muted Text, Borders, Featured Text, Featured Muted, Accent Text, Featured Border
Border Radius
Card Padding
Column Gap
Font family and weight (native Framer font picker)
SaaS pricing pages — Compare tiers with feature breakdowns that help visitors self-select the right plan.
Membership and subscription sites — Present access levels with clear feature differentiation and upgrade CTAs.
Product landing pages — Anchor a pricing section that communicates value through grouped features and visual contrast.
Enterprise sales pages — Use strikethrough pricing and featured badges to steer prospects toward your target plan.
Drop it onto your page, populate your plans and features, and let the comparison layout do the selling.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
