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
xsmall var(--bolt-spacing-x-xsmall) 0.3875rem 6px
small var(--bolt-spacing-x-small) 0.775rem 12px
medium var(--bolt-spacing-x-medium) 1.55rem 24px
large var(--bolt-spacing-x-large) 3.1rem 47px
xlarge var(--bolt-spacing-x-xlarge) 6.2rem 93px
xxlarge var(--bolt-spacing-x-xxlarge) 12.4rem 186px
xxxlarge var(--bolt-spacing-x-xxxlarge) 24.8rem 372px
Vertical
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-y-xxsmall) 0.1755rem 3px
xsmall var(--bolt-spacing-y-xsmall) 0.3375rem 6px
small var(--bolt-spacing-y-small) 0.675rem 11px
medium var(--bolt-spacing-y-medium) 1.35rem 21px
large var(--bolt-spacing-y-large) 2.7rem 41px
xlarge var(--bolt-spacing-y-xlarge) 5.4rem 81px
xxlarge var(--bolt-spacing-y-xxlarge) 10.8rem 162px
xxxlarge var(--bolt-spacing-y-xxxlarge) 21.6rem 324px
*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