Spacing
The Six Webcomponents library uses a consistent spacing scale to maintain visual harmony throughout the interface. These spacing tokens can be used for margins, paddings, gaps, and other spatial relationships.
| CSS Variable | Value | Preview |
|---|---|---|
--six-spacing-xxx-small | 0.125rem (2px) | |
--six-spacing-xx-small | 0.25rem (4px) | |
--six-spacing-x-small | 0.5rem (8px) | |
--six-spacing-small | 0.75rem (12px) | |
--six-spacing-medium | 1rem (16px) | |
--six-spacing-large | 1.25rem (20px) | |
--six-spacing-x-large | 1.75rem (28px) | |
--six-spacing-xx-large | 2.25rem (36px) | |
--six-spacing-xxx-large | 3rem (48px) | |
--six-spacing-xxxx-large | 4.5rem (72px) |
Example Usage
css
.my-element {
margin-bottom: var(--six-spacing-medium);
padding: var(--six-spacing-small);
}