Aisol Plan Diff

Aisol Plan Diff — a pricing section where every feature sits on the same row across all plans.

A Framer code component. Two to four plan cards share one grid: each feature row is matched by its name and lined up across the plans, so a visitor reads 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. One file, no plugins, no external libraries.

What you get

• Aisol Plan Diff component (one file, pasted into Framer as a Component URL)

• Monthly and yearly billing with a saving badge and rolling prices

• Only differences switch that folds shared rows (CSS transition, no animation frames)

• A highlighted plan with a badge, info tips on any feature, a button link per plan

• Light or dark: background, card, text, muted, lines, accent, on-accent and button colours

• Font and text size; max width, radius, padding

How it behaves

• Rows align by feature name with CSS subgrid; each plan keeps its own list in the panel.

• 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.

• Keyboard: arrow keys move the billing choice, the switch is a real switch, tips close with Escape.

• Reduced motion turns every transition off. Nothing runs while idle.

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; older browsers show an instant change.

Requirements

Any Framer project. No plugins, no external libraries. Free updates through this page.