Section Pricing

Side-by-side plan comparison with feature lists and action buttons, making the buying decision easier — a centred heading/subtext above three Card Pricing slots in a responsive grid.

Install

Examples

Three columns

Pricing

Pick a plan that works for you.

Figma $49 For designers. Figma file Lifetime updates USD Buy Now Framer $99 For creators. Framer remix link Lifetime updates USD Buy Now Everything $129 Best value. Framer + Figma Lifetime updates USD Buy Now

Guidelines

Usage

pricing pages, plan comparison, and subscription tiers. Slot a pricing card into each of card-1card-3.

Do

  • Keep the feature rows parallel across cards so plans compare line by line.
  • Highlight one recommended plan — e.g. an info badge like “Best value”.
  • State the price plainly in plan and what it’s for in description.

Don’t

  • Don’t exceed the three card slots — more tiers belong in a comparison Table.
  • Don’t make every card’s CTA shout — emphasise the recommended plan’s button.
  • Don’t hide caveats (currency, renewal terms) — a plain sc-row without an icon works for fine print.

Accessibility

Properties

Related