The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Spacing

Spacing variables are used for margins and paddings. In order to achieve visual balance, consistent spacing needs to be applied across components and layouts.


Scale

When building components and layouts use the spacing scale. All spacings are calculated from base size. Base size is 16px.

VariableSizeExample
$eos-xs4px
$eos-s8px
$eos-m16px
$eos-l24px
$eos-xl32px
$eos-xxl48px
$eos-xxxl64px
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