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') |