color system

Color System The color foundation of Bolt, based on Pegasystem branding. Brand Colors
  • Navy, xdark
    #091734
  • var(--bolt-color-navy-xdark)
  • Text size
    Aa
    Aa
  • White (17.74)
    pass
    pass
  • Black (1.18)
    fail
    fail
  • Navy, dark
    #081c45
  • var(--bolt-color-navy-dark)
  • Text size
    Aa
    Aa
  • White (16.64)
    pass
    pass
  • Black (1.26)
    fail
    fail
  • Navy
    #001f5f
  • var(--bolt-color-navy)
  • Text size
    Aa
    Aa
  • White (15.43)
    pass
    pass
  • Black (1.36)
    fail
    fail
  • Navy, light
    #3e67bb
  • var(--bolt-color-navy-light)
  • Text size
    Aa
    Aa
  • White (5.44)
    pass
    pass
  • Black (3.86)
    pass
    fail
  • Navy, xlight
    #abc2f2
  • var(--bolt-color-navy-xlight)
  • Text size
    Aa
    Aa
  • White (1.79)
    fail
    fail
  • Black (11.73)
    pass
    pass
  • Teal, xdark
    #005154
  • var(--bolt-color-teal-xdark)
  • Text size
    Aa
    Aa
  • White (9.11)
    pass
    pass
  • Black (2.3)
    fail
    fail
  • Teal, dark
    #0a6266
  • var(--bolt-color-teal-dark)
  • Text size
    Aa
    Aa
  • White (7.11)
    pass
    pass
  • Black (2.95)
    fail
    fail
  • Teal
    #10a5ac
  • var(--bolt-color-teal)
  • Text size
    Aa
    Aa
  • White (3)
    pass
    fail
  • Black (7)
    pass
    pass
  • Teal, light
    #86cac6
  • var(--bolt-color-teal-light)
  • Text size
    Aa
    Aa
  • White (1.86)
    fail
    fail
  • Black (11.28)
    pass
    pass
  • Teal, xlight
    #b7e4e6
  • var(--bolt-color-teal-xlight)
  • Text size
    Aa
    Aa
  • White (1.38)
    fail
    fail
  • Black (15.25)
    pass
    pass
  • Orange, dark
    #c74200
  • var(--bolt-color-orange-dark)
  • Text size
    Aa
    Aa
  • White (4.99)
    pass
    pass
  • Black (4.21)
    pass
    fail
  • Orange
    #f76923
  • var(--bolt-color-orange)
  • Text size
    Aa
    Aa
  • White (3)
    pass
    fail
  • Black (7)
    pass
    pass
  • Orange, light
    #ff9866
  • var(--bolt-color-orange-light)
  • Text size
    Aa
    Aa
  • White (2.11)
    fail
    fail
  • Black (9.94)
    pass
    pass
  • Yellow, dark
    #e8af17
  • var(--bolt-color-yellow-dark)
  • Text size
    Aa
    Aa
  • White (1.99)
    fail
    fail
  • Black (10.58)
    pass
    pass
  • Yellow
    #ffc836
  • var(--bolt-color-yellow)
  • Text size
    Aa
    Aa
  • White (1.55)
    fail
    fail
  • Black (13.57)
    pass
    pass
  • Yellow, light
    #ffe399
  • var(--bolt-color-yellow-light)
  • Text size
    Aa
    Aa
  • White (1.26)
    fail
    fail
  • Black (16.7)
    pass
    pass
  • Wine
    #661d34
  • var(--bolt-color-wine)
  • Text size
    Aa
    Aa
  • White (11.73)
    pass
    pass
  • Black (1.79)
    fail
    fail
  • Pink
    #e63690
  • var(--bolt-color-pink)
  • Text size
    Aa
    Aa
  • White (3.97)
    pass
    fail
  • Black (5.29)
    pass
    pass
  • Berry
    #ac1361
  • var(--bolt-color-berry)
  • Text size
    Aa
    Aa
  • White (6.95)
    pass
    pass
  • Black (3.02)
    pass
    fail
  • Violet
    #5f67b9
  • var(--bolt-color-violet)
  • Text size
    Aa
    Aa
  • White (5.09)
    pass
    pass
  • Black (4.13)
    pass
    fail
  • Gray, xdark
    #2e2e33
  • var(--bolt-color-gray-xdark)
  • Text size
    Aa
    Aa
  • White (13.51)
    pass
    pass
  • Black (1.55)
    fail
    fail
  • Gray, dark
    #5c5d66
  • var(--bolt-color-gray-dark)
  • Text size
    Aa
    Aa
  • White (6.54)
    pass
    pass
  • Black (3.21)
    pass
    fail
  • Gray
    #8d8e99
  • var(--bolt-color-gray)
  • Text size
    Aa
    Aa
  • White (3.25)
    pass
    fail
  • Black (6.46)
    pass
    pass
  • Gray, light
    #e0e2eb
  • var(--bolt-color-gray-light)
  • Text size
    Aa
    Aa
  • White (1.29)
    fail
    fail
  • Black (16.25)
    pass
    pass
  • Gray, xlight
    #f6f6f9
  • var(--bolt-color-gray-xlight)
  • Text size
    Aa
    Aa
  • White (1.08)
    fail
    fail
  • Black (19.47)
    pass
    pass
  • Black
    #151619
  • var(--bolt-color-black)
  • Text size
    Aa
    Aa
  • White (18.09)
    pass
    pass
  • Black (1.16)
    fail
    fail
  • White
    #ffffff
  • var(--bolt-color-white)
  • Text size
    Aa
    Aa
  • White (1)
    fail
    fail
  • Black (21)
    pass
    pass
Status Colors
  • Blue, dark
    #004880
  • var(--bolt-color-blue-dark)
  • Text size
    Aa
    Aa
  • White (9.38)
    pass
    pass
  • Black (2.24)
    fail
    fail
  • Blue
    #0076d1
  • var(--bolt-color-blue)
  • Text size
    Aa
    Aa
  • White (4.65)
    pass
    pass
  • Black (4.51)
    pass
    pass
  • Blue, light
    #d6edff
  • var(--bolt-color-blue-light)
  • Text size
    Aa
    Aa
  • White (1.21)
    fail
    fail
  • Black (17.42)
    pass
    pass
  • Success, dark
    #256940
  • var(--bolt-color-success-dark)
  • Text size
    Aa
    Aa
  • White (6.62)
    pass
    pass
  • Black (3.17)
    pass
    fail
  • Success
    #357e38
  • var(--bolt-color-success)
  • Text size
    Aa
    Aa
  • White (5.01)
    pass
    pass
  • Black (4.19)
    pass
    fail
  • Success, light
    #dbf0dc
  • var(--bolt-color-success-light)
  • Text size
    Aa
    Aa
  • White (1.2)
    fail
    fail
  • Black (17.51)
    pass
    pass
  • Error, dark
    #9d2315
  • var(--bolt-color-error-dark)
  • Text size
    Aa
    Aa
  • White (7.82)
    pass
    pass
  • Black (2.68)
    fail
    fail
  • Error
    #b42818
  • var(--bolt-color-error)
  • Text size
    Aa
    Aa
  • White (6.45)
    pass
    pass
  • Black (3.26)
    pass
    fail
  • Error, light
    #fad5d1
  • var(--bolt-color-error-light)
  • Text size
    Aa
    Aa
  • White (1.35)
    fail
    fail
  • Black (15.5)
    pass
    pass
  • Warning, dark
    #cfb317
  • var(--bolt-color-warning-dark)
  • Text size
    Aa
    Aa
  • White (2.08)
    fail
    fail
  • Black (10.11)
    pass
    pass
  • Warning
    #e8cd30
  • var(--bolt-color-warning)
  • Text size
    Aa
    Aa
  • White (1.59)
    fail
    fail
  • Black (13.21)
    pass
    pass
  • Warning, light
    #faf4d1
  • var(--bolt-color-warning-light)
  • Text size
    Aa
    Aa
  • White (1.11)
    fail
    fail
  • Black (18.93)
    pass
    pass

color tokens

Color Tokens Design tokens for Bolt’s color system, available as CSS custom properties. Brand Colors Navy
CSS custom property Value
Navy, xdark var(--bolt-color-navy-xdark)   #091734
Navy, dark var(--bolt-color-navy-dark)   #081c45
Navy var(--bolt-color-navy)   #001f5f
Navy, light var(--bolt-color-navy-light)   #3e67bb
Navy, xlight var(--bolt-color-navy-xlight)   #abc2f2
Teal
CSS custom property Value
Teal, xdark var(--bolt-color-teal-xdark)   #005154
Teal, dark var(--bolt-color-teal-dark)   #0a6266
Teal var(--bolt-color-teal)   #10a5ac
Teal, light var(--bolt-color-teal-light)   #86cac6
Teal, xlight var(--bolt-color-teal-xlight)   #b7e4e6
Orange
CSS custom property Value
Orange, dark var(--bolt-color-orange-dark)   #c74200
Orange var(--bolt-color-orange)   #f76923
Orange, light var(--bolt-color-orange-light)   #ff9866
Yellow
CSS custom property Value
Yellow, dark var(--bolt-color-yellow-dark)   #e8af17
Yellow var(--bolt-color-yellow)   #ffc836
Yellow, light var(--bolt-color-yellow-light)   #ffe399
Wine
CSS custom property Value
Wine var(--bolt-color-wine)   #661d34
Pink
CSS custom property Value
Pink var(--bolt-color-pink)   #e63690
Berry
CSS custom property Value
Berry var(--bolt-color-berry)   #ac1361
Violet
CSS custom property Value
Violet var(--bolt-color-violet)   #5f67b9
Gray
CSS custom property Value
Gray, xdark var(--bolt-color-gray-xdark)   #2e2e33
Gray, dark var(--bolt-color-gray-dark)   #5c5d66
Gray var(--bolt-color-gray)   #8d8e99
Gray, light var(--bolt-color-gray-light)   #e0e2eb
Gray, xlight var(--bolt-color-gray-xlight)   #f6f6f9
Black
CSS custom property Value
Black var(--bolt-color-black)   #151619
White
CSS custom property Value
White var(--bolt-color-white)   #ffffff
Status Colors Blue
CSS custom property Value
Blue, dark var(--bolt-color-blue-dark)   #004880
Blue var(--bolt-color-blue)   #0076d1
Blue, light var(--bolt-color-blue-light)   #d6edff
Success
CSS custom property Value
Success, dark var(--bolt-color-success-dark)   #256940
Success var(--bolt-color-success)   #357e38
Success, light var(--bolt-color-success-light)   #dbf0dc
Error
CSS custom property Value
Error, dark var(--bolt-color-error-dark)   #9d2315
Error var(--bolt-color-error)   #b42818
Error, light var(--bolt-color-error-light)   #fad5d1
Warning
CSS custom property Value
Warning, dark var(--bolt-color-warning-dark)   #cfb317
Warning var(--bolt-color-warning)   #e8cd30
Warning, light var(--bolt-color-warning-light)   #faf4d1

theming system

Theming System The color theming foundation of Bolt. Xlight

Theme Color Tokens


Scss function Value
Text var(--m-bolt-text)   black
Background var(--m-bolt-bg)   white
Primary var(--m-bolt-primary)   navy, light
Text on Primary var(--m-bolt-text-on-primary)   white
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   gray, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   navy
Link Text var(--m-bolt-link)   navy, light
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   navy
Border var(--m-bolt-border)   gray, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Light

Theme Color Tokens


Scss function Value
Text var(--m-bolt-text)   black
Background var(--m-bolt-bg)   gray, xlight
Primary var(--m-bolt-primary)   navy, light
Text on Primary var(--m-bolt-text-on-primary)   white
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   gray, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   navy
Link Text var(--m-bolt-link)   navy, light
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   navy
Border var(--m-bolt-border)   gray, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Dark

Theme Color Tokens


Scss function Value
Text var(--m-bolt-text)   white
Background var(--m-bolt-bg)   navy
Primary var(--m-bolt-primary)   yellow
Text on Primary var(--m-bolt-text-on-primary)   black
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   white, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   white
Link Text var(--m-bolt-link)   white
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   white
Border var(--m-bolt-border)   white, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Xdark

Theme Color Tokens


Scss function Value
Text var(--m-bolt-text)   white
Background var(--m-bolt-bg)   navy, dark
Primary var(--m-bolt-primary)   yellow
Text on Primary var(--m-bolt-text-on-primary)   black
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   white, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   white
Link Text var(--m-bolt-link)   white
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   white
Border var(--m-bolt-border)   white, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

text color utilities

Text Color Utilities Utility classes based on Bolt’s color system. Brand Colors Navy
Class name CSS value
.u-bolt-color-navy-xdark   #091734
.u-bolt-color-navy-dark   #081c45
.u-bolt-color-navy   #001f5f
.u-bolt-color-navy-light   #3e67bb
.u-bolt-color-navy-xlight   #abc2f2
Teal
Class name CSS value
.u-bolt-color-teal-xdark   #005154
.u-bolt-color-teal-dark   #0a6266
.u-bolt-color-teal   #10a5ac
.u-bolt-color-teal-light   #86cac6
.u-bolt-color-teal-xlight   #b7e4e6
Orange
Class name CSS value
.u-bolt-color-orange-dark   #c74200
.u-bolt-color-orange   #f76923
.u-bolt-color-orange-light   #ff9866
Yellow
Class name CSS value
.u-bolt-color-yellow-dark   #e8af17
.u-bolt-color-yellow   #ffc836
.u-bolt-color-yellow-light   #ffe399
Wine
Class name CSS value
.u-bolt-color-wine   #661d34
Pink
Class name CSS value
.u-bolt-color-pink   #e63690
Berry
Class name CSS value
.u-bolt-color-berry   #ac1361
Violet
Class name CSS value
.u-bolt-color-violet   #5f67b9
Gray
Class name CSS value
.u-bolt-color-gray-xdark   #2e2e33
.u-bolt-color-gray-dark   #5c5d66
.u-bolt-color-gray   #8d8e99
.u-bolt-color-gray-light   #e0e2eb
.u-bolt-color-gray-xlight   #f6f6f9
Black
Class name CSS value
.u-bolt-color-black   #151619
White
Class name CSS value
.u-bolt-color-white   #ffffff
Status Colors Blue
Class name CSS value
.u-bolt-color-blue-dark   #004880
.u-bolt-color-blue   #0076d1
.u-bolt-color-blue-light   #d6edff
Success
Class name CSS value
.u-bolt-color-success-dark   #256940
.u-bolt-color-success   #357e38
.u-bolt-color-success-light   #dbf0dc
Error
Class name CSS value
.u-bolt-color-error-dark   #9d2315
.u-bolt-color-error   #b42818
.u-bolt-color-error-light   #fad5d1
Warning
Class name CSS value
.u-bolt-color-warning-dark   #cfb317
.u-bolt-color-warning   #e8cd30
.u-bolt-color-warning-light   #faf4d1

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

typography system

Typography System The typographic foundation of Bolt. Fonts Body: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Headline: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace* Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic *Bolt prefers the system default for code text’s font-family which maximizes the readability across all platforms and browsers.
Size Scales Body Scale Text
medium: Every second he kept glancing at the clock. small: Every second he kept glancing at the clock. xsmall: Every second he kept glancing at the clock. Heading Scale Headline
xxxlarge: Every second he kept glancing at the clock.* xxlarge: Every second he kept glancing at the clock. xlarge: Every second he kept glancing at the clock. large: Every second he kept glancing at the clock. medium: Every second he kept glancing at the clock. small: Every second he kept glancing at the clock. xsmall: Every second he kept glancing at the clock. Subheadline
xxlarge: Every second he kept glancing at the clock. xlarge: Every second he kept glancing at the clock. large: Every second he kept glancing at the clock. Eyebrow
xsmall (only option): Every second he kept glancing at the clock. *xxxlarge size should only be used for display text (hero headline).
Pairings Common Pairings Article Title
This is a xxxlarge headline This is a xlarge subheadline Page Title
This is a small headline This is a xxxlarge headline This is a xxlarge subheadline Teaser
This is an eyebrow This is a xxxlarge headline This is a xxlarge subheadline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. Etiam at risus et justo dignissim congue. Donec congue lacinia. Mini Teaser
This is an eyebrow This is a xlarge headline Inline Mix
Inline xxlarge subheadline & xxlarge headline

typography tokens

Typography Tokens Design tokens for Bolt’s typography system, available as CSS custom properties. Font-family
CSS custom property Value
body var(--bolt-type-font-family-body) Open Sans
headline var(--bolt-type-font-family-headline) Open Sans
code var(--bolt-type-font-family-code) 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fallback var(--bolt-type-font-family-fallback) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif
Font-size
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxxlarge var(--bolt-type-font-size-xxxlarge) 2.35rem 36px scales from 33px to 38px
xxlarge var(--bolt-type-font-size-xxlarge) 1.75rem 27px scales from 25px to 28px
xlarge var(--bolt-type-font-size-xlarge) 1.4rem 21px scales from 20px to 23px
large var(--bolt-type-font-size-large) 1.15rem 18px scales from 17px to 19px
medium var(--bolt-type-font-size-medium) 1rem 15px scales from 14px to 16px
small var(--bolt-type-font-size-small) 0.9rem 14px scales from 13px to 15px
xsmall var(--bolt-type-font-size-xsmall) 0.8rem 12px scales from 12px to 13px
xxsmall var(--bolt-type-font-size-xxsmall) 0.7rem 11px scales from 10px to 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System
Font-weight
CSS custom property Value
light var(--bolt-type-font-weight-light) 300
regular var(--bolt-type-font-weight-regular) 400
semibold var(--bolt-type-font-weight-semibold) 600
bold var(--bolt-type-font-weight-bold) 800
Line-height
CSS custom property Value
xxxlarge var(--bolt-type-font-weight-xxxlarge) 1.25
xxlarge var(--bolt-type-font-weight-xxlarge) 1.35
xlarge var(--bolt-type-font-weight-xlarge) 1.4
large var(--bolt-type-font-weight-large) 1.5
medium var(--bolt-type-font-weight-medium) 1.55
small var(--bolt-type-font-weight-small) 1.45
xsmall var(--bolt-type-font-weight-xsmall) 1.4
xxsmall var(--bolt-type-font-weight-xxsmall) 1.4
Letter-spacing
CSS custom property Value in rem Value in px
narrow var(--bolt-type-font-weight-narrow) -0.025rem -0.375px scales from -0.35px to -0.4px
regular var(--bolt-type-font-weight-regular) 0 0px scales from 0px to 0px
wide var(--bolt-type-font-weight-wide) 0.05rem 0.75px scales from 0.7001px to 0.8px

breakpoint system

Breakpoint System The responsive breakpoint foundation of Bolt. Overview
  • xxsmall:
    320px
  • xsmall:
    400px
  • small:
    600px
  • medium:
    800px
  • large:
    1000px
  • xlarge:
    1200px
  • xxlarge:
    1400px
  • xxxlarge:
    1600px
  • xxxxlarge:
    1920px
  • iPhone Portrait: 320px
  • Galaxy Nexus Portrait: 360px
  • iPhone 6 Portrait: 375px
  • iPhone 6 Plus Portrait: 414px
  • Galaxy Note 3 Portrait: 540px
  • iPhone Landscape: 568px
  • Google Nexus 7 Portrait: 604px
  • Galaxy Nexus Landscape: 640px
  • iPhone 6 Landscape: 667px
  • iPhone 6 Plus Landscape: 738px
  • iPad Portrait: 768px
  • Galaxy Note 3 Landscape: 960px
  • Google Nexus 7 Landscape: 966px
  • iPad Landscape: 1024px
  • 11" MacBook Air: 1366px
  • 13" MacBook Air: 1440px
  • 21.5" iMac: 1980px
SCSS mixin
  .c-component-name {
  // Setting a min (mobile first)
  @include bolt-mq(xsmall) {
    background-color: red;
  }

  // Setting a max (desktop first)
  @include bolt-mq($until: xsmall) {
    background-color: blue;
  }

  // Setting a range (adaptive)
  @include bolt-mq($from: medium, $until: xlarge) {
    background-color: yellow;
  }

  // Setting orientation or other media queries
  @include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
    background-color: green;
  }
}

information density system

Information Density System Various spacing and typography configurations based on information density.
Data attribute* Note Demo
Comfortable data-bolt-info-density="comfortable" The comfortable density increases font-size and spacing. View
Regular data-bolt-info-density="regular" The default density. View
Compact data-bolt-info-density="compact" The compact density decreases font-size and spacing. View
*The data attribute can only be used on the <html> element of a page.

comfortable density

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "comfortable".

Robotic Automation

Comfortable Information Density

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

Call to action
Image alt. Image alt.

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

Call to action
Image alt. Image alt.

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Call to action

regular density

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "regular". Data attribute is not needed.

Robotic Automation

Regular Information Density

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

Call to action
Image alt. Image alt.

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

Call to action
Image alt. Image alt.

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Call to action

compact density

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "compact".

Robotic Automation

Compact Information Density

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

Call to action
Image alt. Image alt.

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

Call to action
Image alt. Image alt.

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Call to action

clearfix

Bolt Clearfix

Add the utility class .u-bolt-clearfix to a parent wrapper containing floating elements.

NOTE: This is ONLY intended to work in the case where all elements within the parent wrapper are floating and are blowing out the wrapper. Seen below:

Without Parent Clear Fix

FLOAT LEFT
FLOAT RIGHT
Fermentum iaculis volutpat turpis aliquet nisi ultrices odio sit orci, blandit arcu pretium sed nunc fames dui semper, netus libero vulputate sapien ornare elit justo rhoncus. Aptent dis quam turpis accumsan sociosqu maecenas erat leo, proin himenaeos potenti ac blandit torquent curae diam ante, phasellus ultricies elit praesent pulvinar hendrerit parturient. Ornare class taciti praesent arcu magnis, potenti sagittis senectus ultricies posuere netus, euismod aliquam tincidunt ante. Inceptos nisi vehicula non venenatis mus sollicitudin fermentum luctus, curabitur primis nec tortor parturient quis suscipit. Taciti duis maecenas pellentesque tellus habitant fringilla sodales vestibulum placerat condimentum class nascetur risus pretium, mattis accumsan orci a eget quisque tempor posuere vel ipsum cras vivamus sagittis.

With Parent Clear Fix

FLOAT LEFT
FLOAT RIGHT
Fermentum iaculis volutpat turpis aliquet nisi ultrices odio sit orci, blandit arcu pretium sed nunc fames dui semper, netus libero vulputate sapien ornare elit justo rhoncus. Aptent dis quam turpis accumsan sociosqu maecenas erat leo, proin himenaeos potenti ac blandit torquent curae diam ante, phasellus ultricies elit praesent pulvinar hendrerit parturient. Ornare class taciti praesent arcu magnis, potenti sagittis senectus ultricies posuere netus, euismod aliquam tincidunt ante. Inceptos nisi vehicula non venenatis mus sollicitudin fermentum luctus, curabitur primis nec tortor parturient quis suscipit. Taciti duis maecenas pellentesque tellus habitant fringilla sodales vestibulum placerat condimentum class nascetur risus pretium, mattis accumsan orci a eget quisque tempor posuere vel ipsum cras vivamus sagittis.
SassDoc references

displays

Bolt Display

Add the utility class .u-bolt-xx where xx equals the display mode you wish to apply.

Possible values include:

  • block
  • inline-block
  • inline
  • table
  • table-row
  • table-cell
  • hidden
  • flex
  • inline-flex

Display: block

.u-bolt-block
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: BLOCK Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: inline-block

.u-bolt-inline-block
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: INLINE-BLOCK Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: inline

.u-bolt-inline
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: INLINE Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: table

.u-bolt-table
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: TABLE Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: table-row

.u-bolt-table-row
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: TABLE-ROW Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: table-cell

.u-bolt-table-cell
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: TABLE-CELL Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: hidden

.u-bolt-hidden
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: HIDDEN Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: flex

.u-bolt-flex
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: FLEX Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

Display: inline-flex

.u-bolt-inline-flex
Lacus nec eleifend nullam nisi parturient nunc placerat euismod, congue aliquet lacinia tempus cursus velit netus augue, neque auctor imperdiet per nisl mollis eros. <strong> TAG W/ DISPLAY: INLINE-FLEX Venenatis tortor etiam potenti arcu condimentum leo lacinia urna faucibus, platea habitant parturient rhoncus ultricies risus nascetur luctus eros mollis, dignissim integer gravida vitae vulputate litora mi consequat.

flex

Bolt Flex

Add the following utility classes to apply the desired flex properties (individual flex items):

  • .u-bolt-flex-grow - Sets each item with this class to take up equal space. Flex grow overrides any width set.
  • .u-bolt-flex-shrink - Provides the opposite effect of flex-grow. It specifies which items can shrink as the wrapper element shrinks. This is useful in Bolt only when the flex-shrink property has already been set (since the default value is already 1).
  • .u-bolt-flex-basis-auto - Distributes the extra space based on the flex-grow value.

All demos below are resizable!

Flex items: Default

DEFAULT
DEFAULT
DEFAULT
DEFAULT
DEFAULT

Flex items: .u-bolt-flex-grow

GROW (1)
GROW (1)
GROW (1)
GROW (1)
GROW (1)
DEFAULT
GROW (1)
DEFAULT
GROW (1)
DEFAULT

Flex items: .u-bolt-flex-shrink

Note: The below example uses a non-utility style (shrink and grow) for the sake of the demo. You can see that each element given then shrink utility class is able to shrink in size, while the items with flex-shrink set to 0 and flex-grow set - won't.

SHRINK (0)
GROW (1)
SHRINK (1)
SHRINK (0)
GROW (1)
SHRINK (1)
SHRINK (0)
GROW (1)

Flex items: .u-bolt-flex-basis-auto

Note: The below example uses a non-utility style (basis 100px) for the sake of the demo. You can see that items with flex-basis set to auto will only expand to the needed width, while items with flex-basis set to 100px are set to that specific maximum width (but can still get smaller).

BASIS (AUTO)
BASIS (100px)
BASIS (AUTO)
BASIS (100px)
BASIS (AUTO)

height

Bolt Height

Add the utility class .u-bolt-height-xx where xx equals the spacing size you wish to apply as height.

Possible values include:

  • none: 0
  • auto: auto
  • full: 100%
  • fullscreen: 100vh
.u-bolt-height-none (0)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-auto (auto)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-full (100%)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-fullscreen (100vh)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

opacity

Bolt Opacity

Add the utility class .u-bolt-opacity-xx where xx equals the opacity you wish to apply.

Possible values include:

  • 0
  • 20
  • 40
  • 60
  • 80
  • 100

Opacity class: .u-bolt-opacity-100

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opacity class: .u-bolt-opacity-80

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opacity class: .u-bolt-opacity-60

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opacity class: .u-bolt-opacity-40

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opacity class: .u-bolt-opacity-20

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Opacity class: .u-bolt-opacity-0

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

shadow

Bolt Shadows

Add the utility class u-bolt-shadow-xx where xx equals the level of shadow you wish to apply.

For example: .u-bolt-shadow-level-10

level-10
Utility Class
.u-bolt-shadow-level-10
Scss Mixin
@include bolt-shadow("level-10");
level-20
Utility Class
.u-bolt-shadow-level-20
Scss Mixin
@include bolt-shadow("level-20");
level-30
Utility Class
.u-bolt-shadow-level-30
Scss Mixin
@include bolt-shadow("level-30");
level-40
Utility Class
.u-bolt-shadow-level-40
Scss Mixin
@include bolt-shadow("level-40");
level-50
Utility Class
.u-bolt-shadow-level-50
Scss Mixin
@include bolt-shadow("level-50");
level-60
Utility Class
.u-bolt-shadow-level-60
Scss Mixin
@include bolt-shadow("level-60");
level-70
Utility Class
.u-bolt-shadow-level-70
Scss Mixin
@include bolt-shadow("level-70");
Hoverable

To add an animated shadow that "lifts" on hover, add the u-bolt-shadow-xx-hoverable where xx equals the level of shadow you wish to use.

For example: .u-bolt-shadow-level-10-hoverable

level-10
Utility Class
.u-bolt-shadow-level-10-hoverable
Scss Mixin
@include bolt-shadow("level-10", true);
level-20
Utility Class
.u-bolt-shadow-level-20-hoverable
Scss Mixin
@include bolt-shadow("level-20", true);
level-30
Utility Class
.u-bolt-shadow-level-30-hoverable
Scss Mixin
@include bolt-shadow("level-30", true);
level-40
Utility Class
.u-bolt-shadow-level-40-hoverable
Scss Mixin
@include bolt-shadow("level-40", true);
level-50
Utility Class
.u-bolt-shadow-level-50-hoverable
Scss Mixin
@include bolt-shadow("level-50", true);
level-60
Utility Class
.u-bolt-shadow-level-60-hoverable
Scss Mixin
@include bolt-shadow("level-60", true);
level-70
Utility Class
.u-bolt-shadow-level-70-hoverable
Scss Mixin
@include bolt-shadow("level-70", true);
SassDoc references

text align

Bolt Text Align

Add the utility class .u-bolt-text-align-xx where xx equals the alignment you wish to apply.

Possible values include:

  • .u-bolt-text-align-right
  • .u-bolt-text-align-left
  • .u-bolt-text-align-center
  • .u-bolt-text-align-justify

.u-bolt-text-align-right

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

Vitae turpis morbi tristique diam tincidunt conubia nostra quisque tortor massa, congue vivamus etiam lacinia cum adipiscing lectus nec eros, euismod neque felis faucibus aptent dolor malesuada iaculis penatibus. Lacus aptent integer consectetur sem ridiculus proin malesuada sociis.

.u-bolt-text-align-left

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

Vitae turpis morbi tristique diam tincidunt conubia nostra quisque tortor massa, congue vivamus etiam lacinia cum adipiscing lectus nec eros, euismod neque felis faucibus aptent dolor malesuada iaculis penatibus. Lacus aptent integer consectetur sem ridiculus proin malesuada sociis.

.u-bolt-text-align-center

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

Vitae turpis morbi tristique diam tincidunt conubia nostra quisque tortor massa, congue vivamus etiam lacinia cum adipiscing lectus nec eros, euismod neque felis faucibus aptent dolor malesuada iaculis penatibus. Lacus aptent integer consectetur sem ridiculus proin malesuada sociis.

.u-bolt-text-align-justify

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

Vitae turpis morbi tristique diam tincidunt conubia nostra quisque tortor massa, congue vivamus etiam lacinia cum adipiscing lectus nec eros, euismod neque felis faucibus aptent dolor malesuada iaculis penatibus. Lacus aptent integer consectetur sem ridiculus proin malesuada sociis.

text decoration

Bolt Text Decoration

Add the utility class .u-bolt-text-decoration-xx where xx equals the decoration style you wish to apply.

Possible values include:

  • .u-bolt-text-decoration-none
  • .u-bolt-text-decoration-underline
  • .u-bolt-text-decoration-line-through

.u-bolt-text-decoration-none

Erat sit dolor enim placerat sodales cubilia

Venenatis curae ante etiam iaculis habitasse ligula ridiculus, tempus nibh nostra justo praesent pulvinar augue habitant, ac mauris lacinia sociosqu auctor aliquam.

.u-bolt-text-decoration-underline

Erat sit dolor enim placerat sodales cubilia

Venenatis curae ante etiam iaculis habitasse ligula ridiculus, tempus nibh nostra justo praesent pulvinar augue habitant, ac mauris lacinia sociosqu auctor aliquam.

.u-bolt-text-decoration-line-through

Erat sit dolor enim placerat sodales cubilia

Venenatis curae ante etiam iaculis habitasse ligula ridiculus, tempus nibh nostra justo praesent pulvinar augue habitant, ac mauris lacinia sociosqu auctor aliquam.

visually hidden

Bolt Visually Hidden

Add the utility class .u-bolt-visuallyhidden to correctly hide an element visually (for accessibility).

Note: The below example does not use the utility class for the pure css toggle, but instead uses the exact same mixin from the utility class to achieve the exact same example behavior.

Visibility toggle

[ Item to hide ]
SassDoc references

z index

Bolt Z-index

Add the utility class xx where xx equals the z index level you wish to apply.

For example: .fab

Z-Index: contentTop: 80
Utility Class: contentTop

Z-Index: content: 60
Utility Class: content

Z-Index: contentBottom: 40
Utility Class: contentBottom

Z-Index: backgroundTop: 20
Utility Class: backgroundTop

Z-Index: background: 0
Utility Class: background

Z-Index: backgroundBottom: -20
Utility Class: backgroundBottom

SassDoc references