Color System

The color foundation of Bolt, based on Pegasystem branding.

Brand Colors

Show shades

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

Show shades

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

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

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

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

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

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

Headline Text Link

Text

Body text

Body text link

Border

Button

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

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

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

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

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

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

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

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.

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.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

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.

Whitepaper

Anthem: Service Desktop

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

Get the report

Item 1 with a long line of text
Item 2 with a long line of text
Item 3 with a long line of text
Item 4 with a long line of text
Item 5 with a long line of text
Item 6 with a long line of text

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

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

Call to action

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

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

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.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

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.

Whitepaper

Anthem: Service Desktop

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

Get the report

Item 1 with a long line of text
Item 2 with a long line of text
Item 3 with a long line of text
Item 4 with a long line of text
Item 5 with a long line of text
Item 6 with a long line of text

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

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

Call to action

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

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

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.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

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.

Whitepaper

Anthem: Service Desktop

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

Get the report

Item 1 with a long line of text
Item 2 with a long line of text
Item 3 with a long line of text
Item 4 with a long line of text
Item 5 with a long line of text
Item 6 with a long line of text

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

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

Call to action

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

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

Bolt Clearfix

Utility Description

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:

Demo

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

@mixin bolt-clearfix

Bolt Display

Utility Description

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

Demo

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.  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.  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.  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.  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.  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.  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.  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.  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.  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.

Bolt Flex

Utility Description

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!

Demo

Flex items: Default

DEFAULT

Flex items: `.u-bolt-flex-grow`

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)

Bolt Height

Utility Description

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

Demo

.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.

Bolt Opacity

Utility Description

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