Tiered

A pricing section for Framer: up to four plans with a monthly / yearly toggle. When the billing changes, the prices roll to the new value and the note fades from "Billed monthly" to "Billed $288 yearly". Names, prices, buttons and feature lists line up across the cards, whatever the length of the text.

What you get

• Tiered Pricing Table: the full section, toggle and cards

• Tiered Toggle: the switch on its own

• Tiered Price: a price that follows the toggle, for your own card designs

• Tiered Text: one line for monthly and another for yearly

The purchase gives you a remix link to the Framer project with all four components and the demo page.

Features

• Up to 4 plans with name, description, monthly and yearly price, badge, highlight, button link and feature list

• Segmented or switch toggle, with an automatic "Save 17%" badge or your own text

• Outline or filled style for the highlighted plan

• Any currency, symbol before or after, and 1,234.50 / 1.234,50 / 1 234,50 number formats

• Yearly prices shown per month or per year

• Start a feature line with "-" to show it as not included

• Cards stack into one column on narrow widths by themselves

• Link to yearly prices with ?billing=yearly

• Monthly and Yearly events for Framer interactions

• Keyboard accessible, and motion is turned off for people who prefer reduced motion

Good to know

• Tiered shows prices and links your buttons. It does not take payments or connect to a payment provider.

• Toggles, prices and texts work together when they share the same Group name on a page.

• A table holds up to 4 plans.