Spacing
Spacing follows a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.
Base
Size 1
Size 2
Size 3
Size 4
Usage
| Vertical Padding Utility | Horizontal Padding Utility | Margin Top Utility | Flow Space Utility | Gutter Utility | Sass function |
|---|---|---|---|---|---|
.pad-block-base | .pad-inline-base | .gap-top-base | .flow-space-base | .gutter-base | get-space('base') |
.pad-block-size-1 | .pad-inline-size-1 | .gap-top-size-1 | .flow-space-size-1 | .gutter-size-1 | get-space('size-1') |
.pad-block-size-2 | .pad-inline-size-2 | .gap-top-size-2 | .flow-space-size-2 | .gutter-size-2 | get-space('size-2') |
.pad-block-size-3 | .pad-inline-size-3 | .gap-top-size-3 | .flow-space-size-3 | .gutter-size-3 | get-space('size-3') |
.pad-block-size-4 | .pad-inline-size-4 | .gap-top-size-4 | .flow-space-size-4 | .gutter-size-4 | get-space('size-4') |