Toggle
A pricing section with a monthly and yearly switch that updates every plan price. Use it to show annual savings and let buyers pick a billing cycle fast.
A pricing section with a monthly and yearly switch that updates every plan price. Use it to show annual savings and let buyers pick a billing cycle fast.
Search blocks by description or jump to a page.
Toggle Pricing opens with a centered heading and a short subline, then a billing switch row: "Monthly" and "Annual" labels flank a toggle, and a small "Save 20%" badge floats above the annual label so the discount is impossible to miss. Below that sits a three-column card grid. Each card carries a plan name, a large price figure that updates instantly when the toggle flips, a short description, a check-icon feature list, and a full-width call-to-action button. The middle card is highlighted with a primary border and a "Most Popular" badge pinned to its top edge.
The heading copy, subline, and the savings percentage are all independent of the card data. Each plan's name, monthly price, annual price, description, feature list, and popular flag can be edited or removed without affecting the other plans. You can add a fourth card or drop to two without changing the toggle logic.
Reach for this block when your product bills on two cycles and you want buyers to see the annual saving before they commit. It suits a dedicated pricing page for a listing platform, a property management tool, or any marketplace where agencies compare tiers side by side. The billing toggle gives it an edge over a static card layout because the price update happens in place and keeps the buyer focused on the plans rather than sending them to a separate annual pricing view.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The three plans cover the common free-to-enterprise ramp, but the structure bends to other shapes:
Tip: keep annual prices visibly lower than twelve times the monthly rate so the toggle gives buyers an immediate, concrete reason to choose annual billing.