Pricing Table Multi-Layout

Pricing pages are where careful design meets awkward content. Prices are not always numbers. "Custom", "Free", "From £49", and most plans have two of them, depending on whether someone pays monthly or annually.

Most pricing modules handle neither. The price is a number field, so an Enterprise tier has nowhere to put "Custom". Monthly-versus-annual means placing the module twice and keeping two copies of everything in step.

This one takes prices as text and holds both billing periods on a single plan. The toggle renders both sets into the page and swaps them with CSS, so there is no re-render and no layout shift. and the monthly price still shows if a visitor's JavaScript never loads.

Sizes and spacing are set three times over – large, medium and small screens – rather than once with a breakpoint you cannot reach. And all fifteen font fields inherit from your theme's heading and body fonts by default, so the section looks like the rest of your site before you touch anything.

Cards stretch to match each other, so three plans with different numbers of features still line their buttons up. Every feature row can be marked included or excluded per plan.