Design
Spacing
Spacing defines values that are used in margin, padding and gap properties.
CSS variables
Spacing values are defined as a 12-step scale from smallest to largest.
| Name | Value |
|---|---|
| --spacing-1 | 4px |
| --spacing-2 | 8px |
| --spacing-3 | 12px |
| --spacing-4 | 14px |
| --spacing-5 | 16px |
| --spacing-6 | 24px |
| --spacing-7 | 32px |
| --spacing-8 | 40px |
| --spacing-9 | 48px |
| --spacing-10 | 64px |
| --spacing-11 | 96px |
| --spacing-12 | 128px |
Component props
| Name | Value |
|---|---|
| margin, padding, gap | Responsive<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12"> |