Spacing in Chameleon is designed on an 8px grid using 16px the base font size.
Name | Size | sp-1 | 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.
Internal notes
This section need expanding to go into more detail about the spacer is usedSee the theming guide to find out how to override css variables.