Skip to content

component

Aisol Plan Table

By ulz song

Details

Summary

Aisol Plan Table puts your pricing in one component: plan cards, a monthly/yearly switch and a feature matrix that share the same state.

Description

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

Introduction

Plans, a switch and a matrix

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600168908/309/39/79/119/15
  • All · #6890