Spacing
Utilities to control visual distance and rythym.
Spacers
Spacers are built on a 16px (1rem) scale. This matches the base typography and is easily divisible to create a vertical rythym of 4px. Change spacers with caution as their values make up the core components within the toolkit.
Spacers are used to generate margin and padding utilities. They're also available within specific breakpoints if you append the responsive class:
Padding
| Demo | Example Class | Size | Value |
|---|---|---|---|
| .ds-p-right-0 | 0 | 0 | |
| .ds-p-right-xs | xs | 0.25rem | |
| .ds-p-right-sm | sm | 0.5rem | |
| .ds-p-right-md | md | 1rem | |
| .ds-p-right-lg | lg | 1.5rem | |
| .ds-p-right-xl | xl | 3rem | |
| .ds-p-right-xxl | xxl | 4rem | |
| .ds-p-right-xxxl | xxxl | 8rem |
Margin
| Demo | Example Class | Size | Value |
|---|---|---|---|
|
|
.ds-m-left-0 | 0 | 0 |
|
|
.ds-m-left-xs | xs | 0.25rem |
|
|
.ds-m-left-sm | sm | 0.5rem |
|
|
.ds-m-left-md | md | 1rem |
|
|
.ds-m-left-lg | lg | 1.5rem |
|
|
.ds-m-left-xl | xl | 3rem |
|
|
.ds-m-left-xxl | xxl | 4rem |
|
|
.ds-m-left-xxxl | xxxl | 8rem |