Pricing
A pricing page with a monthly or yearly switch that changes every price, three plans with the popular one highlighted, a comparison table and a billing FAQ.
Built with
Behavior
- Monthly or yearly. The billing switch is a
ToggleGroupholding one value. Pressing the active option again keeps it, so the page never shows no price. Yearly prices show the per-month amount and the yearly total under it. - One highlighted plan. The popular plan gets an accent outline, a solid button and a badge; the other two use outline buttons, so there is one obvious next step.
- Comparison table. Rows are features and columns are plans. Under 560px a plan switcher shows one plan next to the features, so no column hides off-screen.
- Layout. The page measures its own width: three plans side by side from 700px, one per row below. Never two plus an orphan, which reads like a missing plan.
Accessibility
- A visually hidden live region says "Showing yearly prices" when the switch changes, because the prices change somewhere else on the page.
- Each plan button reads its plan ("Start a 14-day trial, Team"), so a list of buttons still makes sense.
- Check and dash icons in the table are hidden from screen readers and carry the text "Included" or "Not included"; the feature names are row headers.
- The FAQ triggers are
h3headings under the "Questions about billing"h2, set withAccordionTrigger level.