Scale
When building components and layouts use the spacing scale. All spacings are calculated from base the size, which is 16px.
| Variable | Size | Example |
|---|---|---|
$eos-xs | 4px | |
$eos-s | 8px | |
$eos-m | 16px | |
$eos-l | 24px | |
$eos-xl | 32px | |
$eos-xxl | 48px | |
$eos-xxxl | 64px |
content_copy
$eos-space-base: 16px;
$eos-m: $eos-space-base; // = 16px
$eos-xs: $eos-m / 4; // = 4px
$eos-s: $eos-m / 2; // = 8px
$eos-l: $eos-m + ($eos-m / 2); // = 24px
$eos-xl: $eos-m * 2; // = 32px
$eos-xxl: $eos-m * 3; // = 48px
$eos-xxxl: $eos-m * 4; // = 64px