Spacings
Spacing is an important — and often overlooked — part of product design. Nile provides tokens and other utilities to take the guesswork out of spacing and help deliver clear, functional layouts
| token |
value |
Example |
| $nile-spacing-one-half-x |
3px |
|
| $nile-spacing-1-x |
6px |
|
| $nile-spacing-2-x |
12px |
|
| $nile-spacing-3-x |
24px |
|
| $nile-spacing-5-x |
48px |
|
| $nile-spacing-7-x |
96px |
|
| $nile-spacing-gutter |
24px |
|
| $nile-spacing-spacing-none |
0px |
|
| $nile-spacing-spacing-xxs |
2px |
|
| $nile-spacing-spacing-xs |
4px |
|
| $nile-spacing-spacing-sm |
6px |
|
| $nile-spacing-spacing-md |
8px |
|
| $nile-spacing-spacing-lg |
12px |
|
| $nile-spacing-spacing-xl |
16px |
|
| $nile-spacing-spacing-2xl |
20px |
|
| $nile-spacing-spacing-3xl |
24px |
|
| $nile-spacing-spacing-4xl |
32px |
|
| $nile-spacing-spacing-5xl |
40px |
|
| $nile-spacing-spacing-6xl |
48px |
|
| $nile-spacing-spacing-7xl |
64px |
|
| $nile-spacing-spacing-8xl |
80px |
|
| $nile-spacing-spacing-9xl |
96px |
|
| $nile-spacing-spacing-10xl |
128px |
|
| $nile-spacing-spacing-11xl |
160px |
|
| $nile-spacing-none |
0px |
|
| $nile-spacing-xxs |
2px |
|
| $nile-spacing-xs |
4px |
|
| $nile-spacing-sm |
6px |
|
| $nile-spacing-md |
8px |
|
| $nile-spacing-lg |
12px |
|
| $nile-spacing-xl |
16px |
|
| $nile-spacing-2xl |
20px |
|
| $nile-spacing-3xl |
24px |
|
| $nile-spacing-4xl |
32px |
|
| $nile-spacing-5xl |
40px |
|
| $nile-spacing-6xl |
48px |
|
| $nile-spacing-7xl |
64px |
|
| $nile-spacing-8xl |
80px |
|
| $nile-spacing-9xl |
96px |
|
| $nile-spacing-10xl |
128px |
|
| $nile-spacing-11xl |
160px |
|