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