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…

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.

Size chart, cm or in, CMS-ready