Aisol Compare Table

Aisol Compare Table sets two to four plans side by side — features down the rows, plans across the columns — from your own content or a CMS collection.

It is a real HTML table with a caption, column and row headers, and check or cross cells that carry the words "Included" and "Not included" for screen readers.

The sticky header, the highlighted column and the stack-to-cards breakpoint are CSS inside the component's own wrapper; nothing outside it is read, measured or animated, and the Framer canvas shows the finished table.

- Two to four columns: name, price, note, a CTA label and link, and one column you can mark as the plan you want chosen.

- Rows take any value — "yes", "no", or free text like "8 students" — and yes/no become icons with the words behind them, never a bare symbol or a colour alone.

- Sticky header on or off, stack to one card per column under a breakpoint you set, empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Columns as an array: name, price, note, CTA label, link, highlight — or bind a CMS collection through the column slots

• Rows as an array: a feature label plus one value per column; "yes"/"no" render as icons, anything else stays as text

• Sticky header on/off, stack breakpoint, heading level, caption text (visible or screen-reader only), empty-state text, and the words behind the yes/no icons

• Accent, text, muted, line, header, highlight and yes/no colours; card on/off; text size; max width (0 = fill); radius; cell padding; left or centred

Limits: four columns is the cap — past that the table stops being readable on a phone, so extra columns are ignored. Column slots pair by index with the columns array. There is no billing toggle and no pricing maths; prices are strings you write.