Search blocks by description or jump to a page.
Monthly and annual cycle options side by side with per seat pricing, the yearly saving, and ruled rows stating when the switch takes effect.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Billing Cycle Switch puts monthly and annual side by side for the current 8 seats. Monthly reads $30 per seat, $240.00 every month. Annual reads $24 per seat billed yearly, $2,304.00 a year, with the outline badge that calls the real saving: $576.00 a year. The annual card is preselected. Three ruled rows state exactly when the switch takes effect, the first annual invoice on Jul 1, and that monthly billing continues until then.
Cycle options are one array with a selected flag driving the radio dot and the highlighted border. The footer carries the promise that switching never charges you today, so the choice stays reversible up to renewal.
Reach for this block on the billing page when a customer weighs paying yearly, wired to your plan cadence and the live seat count from your subscription model. The saving figure must be computed for the actual workspace, not a generic percentage.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the monthly to annual switch with the yearly saving named. Other cycle surfaces:
Tip: state the next invoice date and amount so the switch reads as a schedule change, not a charge.