Skip to main content
Light Dark System
Web Awesome is the new name for Shoelace! Come see the next iteration, now in beta. Show me what's new!

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)