Aisol Plan Table

Aisol Plan Table puts your pricing in one component: plan cards, a monthly/yearly switch and a feature matrix that share the same state. It only ever renders inside its own frame and never reads or changes the rest of your page.

WHY IT IS DIFFERENT: The switch and the highlighted plan live in the URL (?billing=yearly&plan=pro), so sales can send a link that opens exactly what they promised. Drop your own card into any plan slot (a section you designed, or a CMS-bound card) and the component keeps the switch and the matrix in sync around it. The matrix compares up to 4 plans, takes yes / no / any text per cell, and carries an optional hint on each row.

HOW TO USE: Fill the Plans array (name, monthly and yearly price, period, blurb, CTA + link, badge, highlight) or connect a component instance to a plan slot. Fill the Features array (label, optional hint, a value per plan). Set the switch labels and save badge, pick the deep-link params, and choose the highlighted plan. Canvas billing and Canvas highlight control the thumbnail state on the Framer canvas.

KEY FEATURES: Monthly / yearly switch with a save badge and instant price swap. Feature matrix with sticky feature column and active plan highlight. Deep links with replaceState (back button stays clean) and restore on load. Phones: cards stack with the highlighted plan first, the matrix scrolls sideways. Accessibility: role=switch with aria-checked and keyboard support, hint buttons with aria-expanded / aria-describedby, Esc closes a hint. Respects prefers-reduced-motion. Static-renderer safe.

Pairs with the free Duo Pricing Toggle. More components by Aisol Studio: search "Aisol" in the Marketplace.

• Part of the Aisol Course Site Kit -

• Get this plus the curriculum accordion, event list, hotspots and the free FAQ Fold for $19 instead of $31: https://payhip.com/b/W2hRH