Price Plan Table

What is Price Plan Table?

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.

Core Features

• 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.

Controls inside Framer

Layout

• Desktop / Mobile toggle

Theme

• Lime, Dark, Ocean, Warm, Purple, or Custom

Plans (up to 5)

• 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

Feature Sections

• Section Title

• Features array (feature name, pipe-separated values, tooltip)

Toggles

• Bottom CTAs (show/hide)

• Info Icons (show/hide)

Custom Colors (visible when theme is Custom)

• Background, Card BG, Featured BG, Accent, Text, Muted Text, Borders, Featured Text, Featured Muted, Accent Text, Featured Border

Card Style

• Border Radius

• Card Padding

• Column Gap

Font

• Font family and weight (native Framer font picker)

Best use cases

• 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.

Questions or custom requests?

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