Spaces
Use the below defined tokens to create a predictable and harmonious spacing for our interface. These tokens should be used for all padding, margin and position coordinates.
tip
Multiplying and dividing these values is allowed using even numbers ( x2 x4 or /2 /4 etc ).
| Demo | Value | SCSS Variables |
|---|---|---|
| 0 | $gel-spacer-0 | |
| 0.25rem | $gel-spacer-1 | |
| 0.5rem | $gel-spacer-2 | |
| 1rem | $gel-spacer-3 | |
| 1.5rem | $gel-spacer-4 | |
| 2rem | $gel-spacer-5 | |
| 3rem | $gel-spacer-6 | |
| 4rem | $gel-spacer-7 |