...
Spacing in Chameleon is designed on an 8px grid using 16px the base font size.
Name | CSS 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.