Aisol Plan Diff

Aisol Plan Diff is a pricing section where every feature sits on the same row across all plans, so visitors read down one line to compare.

Flip the Only differences switch and every row that all plans share folds away, leaving the lines that actually separate the plans, with a one-line note of how many were hidden.

Monthly and yearly billing with a saving badge, rolling prices, a highlighted plan, info tips on any feature, and a button link per plan; everything is CSS on one state, with no animation frames.

- Rows align by feature name with CSS subgrid, so each plan keeps its own list in the panel and the section lines them up.

- Folding is a grid-row transition from 1fr to 0fr: no height measuring, no observers, nothing runs while idle.

- Screen readers get the price as one sentence, Not included before a missing feature, and one polite announcement when the billing period or the differences switch changes.

What you control

• Plans (2 to 4): name, description, monthly price or custom text, per unit, note, badge, button text and link, feature list (text, value, included, info tip)

• Billing: monthly and yearly labels, saving percent and badge, currency symbol

• Differences: switch label, start folded or not, show the hidden-rows note and its wording

• Look: background, card, text, muted, lines, accent and on-accent, button colours; lift the badge card; font and text size; max width, radius, padding

Limits: features match across plans by their text (case and spaces ignored); up to 4 plans and 16 features each; prices are numbers plus a custom text option, not a CMS collection; the fold uses grid-template-rows animation, which older browsers show as an instant change.