Storage Plans Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has a capacity with its value and unit for the large figure, retrieval and freeRestores for the two metrics under it, a monthly price and an annual one (the monthly amount when billed yearly), the features as short strings, and the call to action's cta and href. Swap the unit for GB, seats or requests and rename the "Archive storage", "Restore starts" and "Free restores" labels in the markup to fit your product.

From the lg breakpoint each cell spans four rows of the grid and shares them through CSS subgrid: the heading block, the capacity figure with its metrics, the price with its button, and the feature list. A longer description in one cell pushes the same row down in all three, so the capacity figures, prices and buttons stay level. The badge sits beside the plan's name, so it never changes a row's height. Below lg only one cell shows, in the same place.

Below lg a second switch named Plan, with one option per plan, shows a single plan at a time, and the popular plan is selected first. On a phone all three cells share one grid cell and the ones not shown are invisible, so switching plans never changes the block's height, and a screen reader and the Tab key only meet the plan on show. From lg the switch disappears and all three cells show side by side. The billing switch is always visible, and it changes the price in every cell, shown or not.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your checkout route with the plan and the billing period, for example /checkout?plan=vault&billing=annually, and bill restores beyond the free allowance as metered usage on your payment provider's side.

The billing switch is a radio group named "Billing period": Tab reaches the selected option and the arrow keys change it. The phone plan switch works the same way and is named "Plan". Each plan is an h3, the restore pair is a description list, and the feature lists are real lists. Prices say "per month" in words to screen readers, only the billing line that applies is read, and each call to action adds its plan's name, as in "Start free trial, Vault plan".

Lead with the figure when one number, such as storage, seats or monthly requests, is what separates the tiers and what buyers compare first. When the plans differ mostly in features, the figure only adds height: a three-column plan layout or a comparison table shows those differences better.