None (0px):
XS (8px):
SM (12px):
MD (16px): Default value
LG (32px):
XL (64px):
XXL (96px):
Spacings are used throughout our whole framework. It makes each block, component and area spacing acting the same on every device.
// Spacings
:root {
–spacing-none: 0;
–spacing-xs: 8px;
–spacing-sm: 12px;
–spacing-md: 16px;
–spacing-lg: 32px;
–spacing-xl: 64px;
–spacing-xl: 96px;
}