---
title: "Aisol Size Guide — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Aisol Studio · Buttons. Aisol Size Guide lays out one garment's size chart — sizes down the rows, measurements across the columns — from your own content…"
canonical: "https://framer.elliotli.dev/component/aisol-size-guide"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Aisol Size Guide

# Aisol Size Guide

Size chart, cm or in, CMS-ready

[View on Framer](https://framer.com/marketplace/components/aisol-size-guide/?via=elliot-li)

![Aisol Size Guide preview image 1](https://framer.elliotli.dev/og/component/aisol-size-guide/ee833dbaa03ad356/1600x1200.jpg)

## Summary

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…

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6806

## Details

- **Author**: Aisol Studio
- **Price**: $8.00
- **Published**: 2026-09-06
- **Updated**: 2026-10-03
- **Added**: 2026-09-06
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow