Spacing in Chameleon is designed on an 8px grid using 16px the base font size.
Name | Size | sp-1CSS var | Default size | Default size (px) | |
|---|---|---|---|---|---|
sp-0 | --cds-space-0 | 0 | 0px | ||
sp-1 | --cds-space-1 | 0.25rem | 4px | ||
sp-2 | --cds-space-2 | 0.5rem | 8px | ||
sp-3 | --cds-space-3 | 1rem | 16px | ||
sp-4 | --cds-space-4 | 1.25rem | 20px | ||
sp-5 | --cds-space-5 | 1.5rem | 24px | ||
sp-6 | --cds-space-6 | 2rem | 32px | ||
sp-7 | --cds-space-7 | 3rem | 48px | ||
sp-8 | --cds-space-8 | 4rem | 64px | ||
sp-9 | --cds-space-9 | 6rem | 96px | ||
sp-10 | --cds-space-10 | 9rem | 144px |
Several components make use of the Spacer component to ensure layout integrity is maintained.
See the theming guide to find out how to override css variables.