Spacing
Defines the relationship between elements and makes the content more easily scannable.
Token
CSS Variable
Value
Preview
$space-0
--sl-space-0
0rem
$space-1
--sl-space-1
0.25rem
$space-2
--sl-space-2
0.5rem
$space-3
--sl-space-3
0.75rem
$space-4
--sl-space-4
1rem
$space-5
--sl-space-5
1.25rem
$space-6
--sl-space-6
1.5rem
$space-7
--sl-space-7
1.75rem
$space-8
--sl-space-8
2rem
$space-10
--sl-space-10
2.5rem
$space-12
--sl-space-12
3rem
$space-16
--sl-space-16
4rem
$space-20
--sl-space-20
5rem
$space-24
--sl-space-24
6rem
$space-28
--sl-space-28
7rem
$space-32
--sl-space-32
8rem
$space-05
--sl-space-05
0.125rem
$space-gap
--sl-space-gap
var(--sl-space-4)
Want to know more about design tokens? Read the documentation (opens in a new tab).