Skip to main content
Light Dark System
Get ready for more awesome! Web Awesome, the next iteration of Shoelace, is on Kickstarter. Read Our Story

Spacing Tokens

Spacing tokens are used to provide consistent spacing between content in your app.

Token Value Example
--sl-spacing-3x-small 0.125rem (2px)
--sl-spacing-2x-small 0.25rem (4px)
--sl-spacing-x-small 0.5rem (8px)
--sl-spacing-small 0.75rem (12px)
--sl-spacing-medium 1rem (16px)
--sl-spacing-large 1.25rem (20px)
--sl-spacing-x-large 1.75rem (28px)
--sl-spacing-2x-large 2.25rem (36px)
--sl-spacing-3x-large 3rem (48px)
--sl-spacing-4x-large 4.5rem (72px)