spacing system

Spacing System The spacing foundation of Bolt. Horizontal
xxsmall: 0.2015rem
xsmall: 0.3875rem
small: 0.775rem
medium: 1.55rem
large: 3.1rem
xlarge: 6.2rem
xxlarge: 12.4rem
xxxlarge: 24.8rem Vertical
xxsmall: 0.1755rem
xsmall: 0.3375rem
small: 0.675rem
medium: 1.35rem
large: 2.7rem
xlarge: 5.4rem
xxlarge: 10.8rem
xxxlarge: 21.6rem

spacing tokens

Spacing Tokens Design tokens for Bolt’s spacing system, available as CSS custom properties. Horizontal
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-x-xxsmall) 0.2015rem 3px scales from 3px to 4px
xsmall var(--bolt-spacing-x-xsmall) 0.3875rem 6px scales from 6px to 7px
small var(--bolt-spacing-x-small) 0.775rem 12px scales from 11px to 13px
medium var(--bolt-spacing-x-medium) 1.55rem 24px scales from 22px to 25px
large var(--bolt-spacing-x-large) 3.1rem 47px scales from 44px to 50px
xlarge var(--bolt-spacing-x-xlarge) 6.2rem 93px scales from 87px to 100px
xxlarge var(--bolt-spacing-x-xxlarge) 12.4rem 186px scales from 174px to 199px
xxxlarge var(--bolt-spacing-x-xxxlarge) 24.8rem 372px scales from 348px to 397px
Vertical
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-y-xxsmall) 0.1755rem 3px scales from 3px to 3px
xsmall var(--bolt-spacing-y-xsmall) 0.3375rem 6px scales from 5px to 6px
small var(--bolt-spacing-y-small) 0.675rem 11px scales from 10px to 11px
medium var(--bolt-spacing-y-medium) 1.35rem 21px scales from 19px to 22px
large var(--bolt-spacing-y-large) 2.7rem 41px scales from 38px to 44px
xlarge var(--bolt-spacing-y-xlarge) 5.4rem 81px scales from 76px to 87px
xxlarge var(--bolt-spacing-y-xxlarge) 10.8rem 162px scales from 152px to 173px
xxxlarge var(--bolt-spacing-y-xxxlarge) 21.6rem 324px scales from 303px to 346px
*Spacing sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System

spacing utilities

Spacing Utilities Utility classes based on Bolt’s spacing system. Margin All directions
Class name CSS value
.u-bolt-margin-xxsmall margin: 0.2015rem 0.1755rem
.u-bolt-margin-xsmall margin: 0.3875rem 0.3375rem
.u-bolt-margin-small margin: 0.775rem 0.675rem
.u-bolt-margin-medium margin: 1.55rem 1.35rem
.u-bolt-margin-large margin: 3.1rem 2.7rem
.u-bolt-margin-xlarge margin: 6.2rem 5.4rem
.u-bolt-margin-xxlarge margin: 12.4rem 10.8rem
.u-bolt-margin-xxxlarge margin: 24.8rem 21.6rem
Top
Class name CSS value
.u-bolt-margin-top-xxsmall margin-top: 0.1755rem
.u-bolt-margin-top-xsmall margin-top: 0.3375rem
.u-bolt-margin-top-small margin-top: 0.675rem
.u-bolt-margin-top-medium margin-top: 1.35rem
.u-bolt-margin-top-large margin-top: 2.7rem
.u-bolt-margin-top-xlarge margin-top: 5.4rem
.u-bolt-margin-top-xxlarge margin-top: 10.8rem
.u-bolt-margin-top-xxxlarge margin-top: 21.6rem
Right
Class name CSS value
.u-bolt-margin-right-xxsmall margin-right: 0.2015rem
.u-bolt-margin-right-xsmall margin-right: 0.3875rem
.u-bolt-margin-right-small margin-right: 0.775rem
.u-bolt-margin-right-medium margin-right: 1.55rem
.u-bolt-margin-right-large margin-right: 3.1rem
.u-bolt-margin-right-xlarge margin-right: 6.2rem
.u-bolt-margin-right-xxlarge margin-right: 12.4rem
.u-bolt-margin-right-xxxlarge margin-right: 24.8rem
Bottom
Class name CSS value
.u-bolt-margin-bottom-xxsmall margin-bottom: 0.1755rem
.u-bolt-margin-bottom-xsmall margin-bottom: 0.3375rem
.u-bolt-margin-bottom-small margin-bottom: 0.675rem
.u-bolt-margin-bottom-medium margin-bottom: 1.35rem
.u-bolt-margin-bottom-large margin-bottom: 2.7rem
.u-bolt-margin-bottom-xlarge margin-bottom: 5.4rem
.u-bolt-margin-bottom-xxlarge margin-bottom: 10.8rem
.u-bolt-margin-bottom-xxxlarge margin-bottom: 21.6rem
Left
Class name CSS value
.u-bolt-margin-left-xxsmall margin-left: 0.2015rem
.u-bolt-margin-left-xsmall margin-left: 0.3875rem
.u-bolt-margin-left-small margin-left: 0.775rem
.u-bolt-margin-left-medium margin-left: 1.55rem
.u-bolt-margin-left-large margin-left: 3.1rem
.u-bolt-margin-left-xlarge margin-left: 6.2rem
.u-bolt-margin-left-xxlarge margin-left: 12.4rem
.u-bolt-margin-left-xxxlarge margin-left: 24.8rem
Padding All directions
Class name CSS value
.u-bolt-padding-xxsmall padding: 0.2015rem 0.1755rem
.u-bolt-padding-xsmall padding: 0.3875rem 0.3375rem
.u-bolt-padding-small padding: 0.775rem 0.675rem
.u-bolt-padding-medium padding: 1.55rem 1.35rem
.u-bolt-padding-large padding: 3.1rem 2.7rem
.u-bolt-padding-xlarge padding: 6.2rem 5.4rem
.u-bolt-padding-xxlarge padding: 12.4rem 10.8rem
.u-bolt-padding-xxxlarge padding: 24.8rem 21.6rem
Top
Class name CSS value
.u-bolt-padding-top-xxsmall padding-top: 0.1755rem
.u-bolt-padding-top-xsmall padding-top: 0.3375rem
.u-bolt-padding-top-small padding-top: 0.675rem
.u-bolt-padding-top-medium padding-top: 1.35rem
.u-bolt-padding-top-large padding-top: 2.7rem
.u-bolt-padding-top-xlarge padding-top: 5.4rem
.u-bolt-padding-top-xxlarge padding-top: 10.8rem
.u-bolt-padding-top-xxxlarge padding-top: 21.6rem
Right
Class name CSS value
.u-bolt-padding-right-xxsmall padding-right: 0.2015rem
.u-bolt-padding-right-xsmall padding-right: 0.3875rem
.u-bolt-padding-right-small padding-right: 0.775rem
.u-bolt-padding-right-medium padding-right: 1.55rem
.u-bolt-padding-right-large padding-right: 3.1rem
.u-bolt-padding-right-xlarge padding-right: 6.2rem
.u-bolt-padding-right-xxlarge padding-right: 12.4rem
.u-bolt-padding-right-xxxlarge padding-right: 24.8rem
Bottom
Class name CSS value
.u-bolt-padding-bottom-xxsmall padding-bottom: 0.1755rem
.u-bolt-padding-bottom-xsmall padding-bottom: 0.3375rem
.u-bolt-padding-bottom-small padding-bottom: 0.675rem
.u-bolt-padding-bottom-medium padding-bottom: 1.35rem
.u-bolt-padding-bottom-large padding-bottom: 2.7rem
.u-bolt-padding-bottom-xlarge padding-bottom: 5.4rem
.u-bolt-padding-bottom-xxlarge padding-bottom: 10.8rem
.u-bolt-padding-bottom-xxxlarge padding-bottom: 21.6rem
Left
Class name CSS value
.u-bolt-padding-left-xxsmall padding-left: 0.2015rem
.u-bolt-padding-left-xsmall padding-left: 0.3875rem
.u-bolt-padding-left-small padding-left: 0.775rem
.u-bolt-padding-left-medium padding-left: 1.55rem
.u-bolt-padding-left-large padding-left: 3.1rem
.u-bolt-padding-left-xlarge padding-left: 6.2rem
.u-bolt-padding-left-xxlarge padding-left: 12.4rem
.u-bolt-padding-left-xxxlarge padding-left: 24.8rem