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

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
EOS Design System logotype

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 the size, which is 16px.

VariableSizeExample
$eos-xs4px
$eos-s8px
$eos-m16px
$eos-l24px
$eos-xl32px
$eos-xxl48px
$eos-xxxl64px
content_copy