Sizes
Fixed sizes for controls and icons. Controls are 32 px high and keep a 40 px hit area. Class: h-, w- or size-<name>.Feste Größen für Steuerelemente und Icons. Steuerelemente sind 32 px hoch und behalten 40 px Trefferfläche. Klasse: h-, w- oder size-<Name>.
| VariableVariable | ClassKlasse | ValueWert | |
|---|
| --spacing-icon-2xs | icon-2xs | 14px | |
| --spacing-icon-xs | icon-xs | 16px | |
| --spacing-checkbox | checkbox | 18px | |
| --spacing-toggle | toggle | 18px | |
| --spacing-icon-s | icon-s | 20px | |
| --spacing-chip-off | chip-off | 22px | |
| --spacing-segment | segment | 24px | |
| --spacing-icon | icon | 24px | |
| --spacing-filter-segment | filter-segment | 30px | |
| --spacing-control | control | 32px | |
| --spacing-indent | indent | 34px | |
| --spacing-hit | hit | 40px | |
| --spacing-chat-input | chat-input | 72px | |
| --spacing-donut | donut | 160px | |
| --spacing-app-nav-item | app-nav-item | 216px | |
| --spacing-filter-list | filter-list | 240px | |
| --spacing-sidebar | sidebar | 240px | |
| --spacing-app-nav | app-nav | 240px | |
| --spacing-chart | chart | 240px | |
| --spacing-code-max | code-max | 320px | |
| --spacing-list-max | list-max | 368px | |
| --spacing-overlay-stage | overlay-stage | 440px | |
| --spacing-table-box | table-box | 480px | |
| --spacing-mobile-screen | mobile-screen | 667px | |
Maximum and minimum widths. Class: max-w- or min-w-<name>.Höchst- und Mindestbreiten. Klasse: max-w- oder min-w-<Name>.
| VariableVariable | ClassKlasse | ValueWert | |
|---|
| --container-icon-tile | icon-tile | 112px | |
| --container-field-short | field-short | 120px | |
| --container-token-class | token-class | 140px | |
| --container-occupancy | occupancy | 150px | |
| --container-group-note | group-note | 160px | |
| --container-crumb | crumb | 160px | |
| --container-option-example | option-example | 160px | |
| --container-menu | menu | 200px | |
| --container-menu-select | menu-select | 220px | |
| --container-field-compact | field-compact | 220px | |
| --container-filter-search | filter-search | 240px | |
| --container-button-label | button-label | 240px | |
| --container-token-name | token-name | 240px | |
| --container-token-value | token-value | 240px | |
| --container-table-filter | table-filter | 256px | |
| --container-tooltip | tooltip | 260px | |
| --container-popover | popover | 280px | |
| --container-icon-detail | icon-detail | 280px | |
| --container-offcanvas-s | offcanvas-s | 320px | |
| --container-state | state | 320px | |
| --container-box-demo | box-demo | 320px | |
| --container-tabs-stage | tabs-stage | 320px | |
| --container-mobile | mobile | 375px | |
| --container-panel-max | panel-max | 400px | |
| --container-modal-s | modal-s | 400px | |
| --container-field | field | 400px | |
| --container-ai-panel | ai-panel | 420px | |
| --container-offcanvas | offcanvas | 500px | |
| --container-modal-m | modal-m | 560px | |
| --container-toast | toast | 600px | |
| --container-chat-bubble | chat-bubble | 600px | |
| --container-share-rows | share-rows | 600px | |
| --container-log | log | 600px | |
| --container-search | search | 640px | |
| --container-chat | chat | 800px | |
| --container-day-strip | day-strip | 800px | |
| --container-replay | replay | 960px | |
| --container-wall | wall | 1024px | |
| --container-page | page | 1280px | |
From this width up, the prefixed classes apply, e.g. md:flex-row.Ab dieser Breite gelten die Klassen mit Präfix, z. B. md:flex-row.
| VariableVariable | ClassKlasse | ValueWert | |
|---|
| --breakpoint-md | md | 768px | |
| --breakpoint-lg | lg | 1024px | |
| --breakpoint-xl | xl | 1280px | |
| --breakpoint-3xl | 3xl | 1920px | |