spacing overview

Spacing The spacing foundation of Bolt. Vertical Vertical Spacing The base value of vertical spacing is based on the leading of base body text.
xxsmall: 0.2145rem
xsmall: 0.4125rem
small: 0.825rem
medium: 1.65rem
large: 3.3rem
xlarge: 6.6rem
xxlarge: 13.2rem
xxxlarge: 26.4rem Horizontal Horizontal Spacing The base value of horizontal spacing is based on the gutter of the grid.
xxsmall: 0.25rem
xsmall: 0.5rem
small: 1rem
medium: 2rem
large: 4rem
xlarge: 8rem
xxlarge: 16rem
xxxlarge: 32rem Tokens Spacing Tokens Vertical
SCSS function Spacing scale Spacing size (at 1400px viewport)*
xxsmall bolt-v-spacing(xxsmall) 0.2145rem 4px scales from 4px to 4px
xsmall bolt-v-spacing(xsmall) 0.4125rem 7px scales from 6px to 8px
small bolt-v-spacing(small) 0.825rem 14px scales from 12px to 15px
medium bolt-v-spacing(medium) 1.65rem 27px scales from 24px to 30px
large bolt-v-spacing(large) 3.3rem 53px scales from 47px to 60px
xlarge bolt-v-spacing(xlarge) 6.6rem 106px scales from 93px to 119px
xxlarge bolt-v-spacing(xxlarge) 13.2rem 212px scales from 185px to 238px
xxxlarge bolt-v-spacing(xxxlarge) 26.4rem 423px scales from 370px to 476px
Horizontal
SCSS function Spacing scale Spacing size (at 1400px viewport)*
xxsmall bolt-spacing(xxsmall) 0.25rem 4px scales from 4px to 5px
xsmall bolt-spacing(xsmall) 0.5rem 8px scales from 7px to 9px
small bolt-spacing(small) 1rem 16px scales from 14px to 18px
medium bolt-spacing(medium) 2rem 32px scales from 28px to 36px
large bolt-spacing(large) 4rem 64px scales from 56px to 72px
xlarge bolt-spacing(xlarge) 8rem 128px scales from 112px to 144px
xxlarge bolt-spacing(xxlarge) 16rem 256px scales from 224px to 288px
xxxlarge bolt-spacing(xxxlarge) 32rem 512px scales from 448px to 576px
*Spacing sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System
Debug Panel