Aisol Size Guide

Aisol Size Guide lays out one garment's size chart — sizes down the rows, measurements across the columns — from your own content or a CMS collection, with one switch that turns the whole chart from centimetres to inches.

It is a real table with a caption and row and column headers; on phones the same table becomes one card per size, in CSS, so screen readers get the same structure everywhere.

Nothing is observed, measured or animated: the unit switch is two buttons with a pressed state inside the component, no storage and no hash, and the Framer canvas shows the finished chart on the first paint.

- Sizes as rows: label, a note like "The size most people take", and a highlight for the one you want seen first.

- Measurements as columns: name plus a per-column switch so ages or ratings never get converted.

- Values you write: single numbers and ranges convert to inches with one decimal; anything else stays exactly as written.

- Optional "How to measure" notes as a numbered list; empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Sizes as an array: label, note, highlight — or bind a CMS collection through the size slots

• Measurements as an array: name, converts on/off, up to six columns

• Unit switch on/off and the starting unit, stack breakpoint, heading and caption text, the words behind the switch, empty-cell and empty-state text, measuring notes

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

Limits: one garment per chart by design; six measurement columns is the cap so the table stays readable. Conversion covers centimetres to inches only. Size slots pair by index with the sizes array.