/
Spacer
*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Spacer
- Nick Harris
Owned by Nick Harris, created
The Spacer is a simple invisible utility component that allows you to space out content when creating your own components or blocks. Spacer’s sizes are tied to css variables which can be overridden, changing the spacing across the whole site.
Usage
Do’s
Use a spacer to create consistence spacing when building your own components or blocks.
Anatomy
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | Spacer | n/a | n/a |
|
Visual style
Spacer css variable | Default value |
--cds-space-0 | 0 |
--cds-space-1 | 0.25rem |
--cds-space-2 | 0.5rem |
--cds-space-3 | 1rem |
--cds-space-4 | 1.25rem |
--cds-space-5 | 1.5rem |
--cds-space-6 | 2rem |
--cds-space-7 | 3rem |
--cds-space-8 | 4rem |
--cds-space-9 | 6rem |
--cds-space-10 | 9rem |
Editorial
n/a
Behaviour
n/a
Accessibility
n/a