brand colors

indigo, xdark #060923
indigo, dark #161a3c
(base)
indigo #1f2656
indigo, light #545da6
indigo, xlight #abb3f2
yellow, xdark #664900
yellow, dark #e8ad17
(base)
yellow #ffcc4d
yellow, light #ffe299
yellow, xlight #fff1cc
teal, xdark #003333
teal, dark #0a6666
(base)
teal #009999
teal, light #7acdcd
teal, xlight #b7e6e6
orange, xdark #661a00
orange, dark #b53b12
(base)
orange #e84b17
orange, light #ff8c66
orange, xlight #ffc6b3
gray, xdark #2e2e33
gray, dark #5c5d66
(base)
gray #8d8e99
gray, light #e0e2eb
gray, xlight #f6f6f9
(base)
black #151619
(base)
white #ffffff

status colors

blue, dark #005380
(base)
blue #0074b3
blue, light #d6f1ff
success, dark #256940
(base)
success #357e38
success, light #dbf0dc
error, dark #9d2315
(base)
error #b42818
error, light #fad5d1
warning, dark #cfb317
(base)
warning #e8cd30
warning, light #faf4d1

accessibility check

  • indigo — xlight
    Aa
    Aa
  • White (2.01)
    fail
    fail
  • Black (10.46)
    pass
    pass
  • indigo — light
    Aa
    Aa
  • White (6.01)
    pass
    pass
  • Black (3.49)
    pass
    fail
  • indigo — base
    Aa
    Aa
  • White (14.29)
    pass
    pass
  • Black (1.47)
    fail
    fail
  • indigo — dark
    Aa
    Aa
  • White (16.84)
    pass
    pass
  • Black (1.25)
    fail
    fail
  • indigo — xdark
    Aa
    Aa
  • White (19.61)
    pass
    pass
  • Black (1.07)
    fail
    fail
  • yellow — xlight
    Aa
    Aa
  • White (1.12)
    fail
    fail
  • Black (18.71)
    pass
    pass
  • yellow — light
    Aa
    Aa
  • White (1.27)
    fail
    fail
  • Black (16.59)
    pass
    pass
  • yellow — base
    Aa
    Aa
  • White (1.5)
    fail
    fail
  • Black (14)
    pass
    pass
  • yellow — dark
    Aa
    Aa
  • White (2.02)
    fail
    fail
  • Black (10.42)
    pass
    pass
  • yellow — xdark
    Aa
    Aa
  • White (8.34)
    pass
    pass
  • Black (2.52)
    fail
    fail
  • teal — xlight
    Aa
    Aa
  • White (1.36)
    fail
    fail
  • Black (15.47)
    pass
    pass
  • teal — light
    Aa
    Aa
  • White (1.84)
    fail
    fail
  • Black (11.44)
    pass
    pass
  • teal — base
    Aa
    Aa
  • White (3.49)
    pass
    fail
  • Black (6.02)
    pass
    pass
  • teal — dark
    Aa
    Aa
  • White (6.76)
    pass
    pass
  • Black (3.11)
    pass
    fail
  • teal — xdark
    Aa
    Aa
  • White (13.8)
    pass
    pass
  • Black (1.52)
    fail
    fail
  • orange — xlight
    Aa
    Aa
  • White (1.5)
    fail
    fail
  • Black (13.98)
    pass
    pass
  • orange — light
    Aa
    Aa
  • White (2.28)
    fail
    fail
  • Black (9.2)
    pass
    pass
  • orange — base
    Aa
    Aa
  • White (3.85)
    pass
    fail
  • Black (5.45)
    pass
    pass
  • orange — dark
    Aa
    Aa
  • White (5.83)
    pass
    pass
  • Black (3.6)
    pass
    fail
  • orange — xdark
    Aa
    Aa
  • White (12.26)
    pass
    pass
  • Black (1.71)
    fail
    fail
  • gray — xlight
    Aa
    Aa
  • White (1.08)
    fail
    fail
  • Black (19.47)
    pass
    pass
  • gray — light
    Aa
    Aa
  • White (1.29)
    fail
    fail
  • Black (16.25)
    pass
    pass
  • gray — base
    Aa
    Aa
  • White (3.25)
    pass
    fail
  • Black (6.46)
    pass
    pass
  • gray — dark
    Aa
    Aa
  • White (6.54)
    pass
    pass
  • Black (3.21)
    pass
    fail
  • gray — xdark
    Aa
    Aa
  • White (13.51)
    pass
    pass
  • Black (1.55)
    fail
    fail
  • black — base
    Aa
    Aa
  • White (18.09)
    pass
    pass
  • Black (1.16)
    fail
    fail
  • white — base
    Aa
    Aa
  • White (1)
    fail
    fail
  • Black (21)
    pass
    pass
  • blue — light
    Aa
    Aa
  • White (1.17)
    fail
    fail
  • Black (17.89)
    pass
    pass
  • blue — base
    Aa
    Aa
  • White (5.06)
    pass
    pass
  • Black (4.15)
    pass
    fail
  • blue — dark
    Aa
    Aa
  • White (8.24)
    pass
    pass
  • Black (2.55)
    fail
    fail
  • success — light
    Aa
    Aa
  • White (1.2)
    fail
    fail
  • Black (17.51)
    pass
    pass
  • success — base
    Aa
    Aa
  • White (5.01)
    pass
    pass
  • Black (4.19)
    pass
    fail
  • success — dark
    Aa
    Aa
  • White (6.62)
    pass
    pass
  • Black (3.17)
    pass
    fail
  • error — light
    Aa
    Aa
  • White (1.35)
    fail
    fail
  • Black (15.5)
    pass
    pass
  • error — base
    Aa
    Aa
  • White (6.45)
    pass
    pass
  • Black (3.26)
    pass
    fail
  • error — dark
    Aa
    Aa
  • White (7.82)
    pass
    pass
  • Black (2.68)
    fail
    fail
  • warning — light
    Aa
    Aa
  • White (1.11)
    fail
    fail
  • Black (18.93)
    pass
    pass
  • warning — base
    Aa
    Aa
  • White (1.59)
    fail
    fail
  • Black (13.21)
    pass
    pass
  • warning — dark
    Aa
    Aa
  • White (2.08)
    fail
    fail
  • Black (10.11)
    pass
    pass
  • social — linkedin
    Aa
    Aa
  • White (4.93)
    pass
    pass
  • Black (4.26)
    pass
    fail
  • social — twitter
    Aa
    Aa
  • White (2.59)
    fail
    fail
  • Black (8.1)
    pass
    pass
  • social — facebook
    Aa
    Aa
  • White (6.95)
    pass
    pass
  • Black (3.02)
    pass
    fail

theming

Theme Color Tokens

scss function xlight / light dark / xdark
Text bolt-theme(text) black white
Background bolt-theme(background) white / gray, xlight indigo / indigo, dark
Primary bolt-theme(primary) indigo, light yellow
Secondary bolt-theme(secondary) white white
Link Text bolt-theme(link) indigo, light white
Disabled Text bolt-theme(text-disabled) gray gray
Disabled Background bolt-theme(disabled) gray, light gray, light
Headline Text bolt-theme(headline) indigo white
Headline Link bolt-theme(headline-link) indigo, light white
Border bolt-theme(border, 0.2) indigo, dark, 20% white, 20%
Neutral bolt-theme(neutral) gray gray

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary

Theme Color Tokens

scss function xlight / light dark / xdark
Text bolt-theme(text) black white
Background bolt-theme(background) white / gray, xlight indigo / indigo, dark
Primary bolt-theme(primary) indigo, light yellow
Secondary bolt-theme(secondary) white white
Link Text bolt-theme(link) indigo, light white
Disabled Text bolt-theme(text-disabled) gray gray
Disabled Background bolt-theme(disabled) gray, light gray, light
Headline Text bolt-theme(headline) indigo white
Headline Link bolt-theme(headline-link) indigo, light white
Border bolt-theme(border, 0.2) indigo, dark, 20% white, 20%
Neutral bolt-theme(neutral) gray gray

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary

spacing overview

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

typography overview

Typography 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 Heading: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Semi-Bold Semi-Bold Italic Bold Bold Italic Code: 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. Scales Body Text
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 Heading Headline
Every second he kept glancing at the clock.* 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 Subheadline
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 Eyebrow
Every second he kept glancing at the clock. xsmall (only size) *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 Tokens Font-family Tokens
SCSS mixin Font-family
body @include bolt-font-family(body) Open Sans
heading @include bolt-font-family(heading) Open Sans
code @include bolt-font-family(code) monospace
Font-size Tokens
SCSS mixin Font scale Font-size (at 1400px viewport)*
xxxlarge** @include bolt-font-size(xxxlarge) min: 2.35rem max: 2.5rem min: 38px 320px viewport: 33px 400px viewport: 36px 1400px viewport: 38px max: 40px 320px viewport: 35px 400px viewport: 38px 1400px viewport: 40px
xxlarge @include bolt-font-size(xxlarge) 1.75rem 28px 320px viewport: 25px 400px viewport: 27px 1400px viewport: 28px
xlarge @include bolt-font-size(xlarge) 1.4rem 23px 320px viewport: 20px 400px viewport: 21px 1400px viewport: 23px
large @include bolt-font-size(large) 1.15rem 19px 320px viewport: 17px 400px viewport: 18px 1400px viewport: 19px
medium @include bolt-font-size(medium) 1rem 16px 320px viewport: 14px 400px viewport: 15px 1400px viewport: 16px
small @include bolt-font-size(small) 0.9rem 15px 320px viewport: 13px 400px viewport: 14px 1400px viewport: 15px
xsmall @include bolt-font-size(xsmall) 0.8rem 13px 320px viewport: 12px 400px viewport: 12px 1400px viewport: 13px
xxsmall @include bolt-font-size(xxsmall) 0.7rem 12px 320px viewport: 10px 400px viewport: 11px 1400px viewport: 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System **xxxlarge size has an additional scaling effect because it's intended to be used as display text (hero headline). Font-weight Tokens
SCSS mixin Font-weight
regular @include bolt-font-weight(regular) 400
semibold @include bolt-font-weight(semibold) 600
bold @include bolt-font-weight(bold) 800

breakpoints

  • 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

How to use

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

clearfix

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

color

Bolt Colors

Utility Description

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

Demo

Social Colors
SOCIAL LINKEDIN

.u-bolt-color-social-linkedin

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
Status Colors
BLUE DARK

.u-bolt-color-blue-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

BLUE BASE

.u-bolt-color-blue

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

BLUE LIGHT

.u-bolt-color-blue-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
SUCCESS DARK

.u-bolt-color-success-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

SUCCESS BASE

.u-bolt-color-success

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

SUCCESS LIGHT

.u-bolt-color-success-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
ERROR DARK

.u-bolt-color-error-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

ERROR BASE

.u-bolt-color-error

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

ERROR LIGHT

.u-bolt-color-error-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
WARNING DARK

.u-bolt-color-warning-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

WARNING BASE

.u-bolt-color-warning

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

WARNING LIGHT

.u-bolt-color-warning-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
Brand Colors
INDIGO XDARK

.u-bolt-color-indigo-xdark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

INDIGO DARK

.u-bolt-color-indigo-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

INDIGO BASE

.u-bolt-color-indigo

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

INDIGO LIGHT

.u-bolt-color-indigo-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

INDIGO XLIGHT

.u-bolt-color-indigo-xlight

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
YELLOW XDARK

.u-bolt-color-yellow-xdark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

YELLOW DARK

.u-bolt-color-yellow-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

YELLOW BASE

.u-bolt-color-yellow

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

YELLOW LIGHT

.u-bolt-color-yellow-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

YELLOW XLIGHT

.u-bolt-color-yellow-xlight

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
TEAL XDARK

.u-bolt-color-teal-xdark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

TEAL DARK

.u-bolt-color-teal-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

TEAL BASE

.u-bolt-color-teal

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

TEAL LIGHT

.u-bolt-color-teal-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

TEAL XLIGHT

.u-bolt-color-teal-xlight

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
ORANGE XDARK

.u-bolt-color-orange-xdark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

ORANGE DARK

.u-bolt-color-orange-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

ORANGE BASE

.u-bolt-color-orange

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

ORANGE LIGHT

.u-bolt-color-orange-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

ORANGE XLIGHT

.u-bolt-color-orange-xlight

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
GRAY XDARK

.u-bolt-color-gray-xdark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

GRAY DARK

.u-bolt-color-gray-dark

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

GRAY BASE

.u-bolt-color-gray

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

GRAY LIGHT

.u-bolt-color-gray-light

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.

GRAY XLIGHT

.u-bolt-color-gray-xlight

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
BLACK BASE

.u-bolt-color-black

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
WHITE BASE

.u-bolt-color-white

Ante justo sagittis fames facilisi sollicitudin tempor nunc parturient faucibus est amet maecenas etiam fermentum eget, ullamcorper sociosqu suspendisse purus penatibus inceptos porta adipiscing pharetra odio dis platea augue lobortis. Dui vitae erat posuere tempor ante nam dictumst pretium felis accumsan mauris imperdiet eu, habitant taciti suspendisse vehicula quisque curabitur velit parturient risus molestie consequat.
SassDoc references

displays

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

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

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:

  • xxsmall: 0.19375rem
  • xsmall: 0.3875rem
  • small: 0.775rem
  • medium: 1.55rem
  • large: 3.1rem
  • xlarge: 6.2rem
  • xxlarge: 12.4rem
  • none: 0
  • auto: auto
  • full: 100%
  • screen: 100vh

Demo

.u-bolt-height-xxsmall (0.19375rem)

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-xsmall (0.3875rem)

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-small (0.775rem)

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-medium (1.55rem)

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-large (3.1rem)

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-xlarge (6.2rem)

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-xxlarge (12.4rem)

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-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-screen (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

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

Demo

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

Utility Description

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

Demo

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

spacings

Bolt Spacing

Utility Description

Add the utility class .u-bolt-xx-yy-zz where xx equals the spacing property, yy equals the direction, and zz (optional) equals the t-shirt size you wish to apply. For example:

  • .u-bolt-margin-left-large = margin-left: 3.1rem
  • .u-bolt-margin-right = margin-right: 1.55rem

(xx) Possible property values include:

  • padding
  • margin

(yy) Possible direction values include:

  • top
  • right
  • bottom
  • left

(zz) Possible size values include:

  • none: 0
  • auto: auto
  • [base]: 1.55rem
  • xxsmall: 0.19375rem
  • xsmall: 0.3875rem
  • small: 0.775rem
  • medium: 1.55rem
  • large: 3.1rem
  • xlarge: 6.2rem
  • xxlarge: 12.4rem
  • xxxlarge: 24.8rem

Demo

.u-bolt-margin-left

margin-left: 1.55rem

.u-bolt-margin-left-large

margin-left: 3.1rem

.u-bolt-margin-left-xxlarge

margin-left: 12.4rem

.u-bolt-padding

padding: 1.55rem

.u-bolt-padding-large

padding: 3.1rem

.u-bolt-padding-left-xlarge
.u-bolt-padding-right-xlarge
.u-bolt-padding-top
.u-bolt-padding-bottom

padding-left: 6.2rem
padding-right: 6.2rem
padding-top: 3.1rem
padding-bottom: 3.1rem
SassDoc references

text align

Bolt Text Align

Utility Description

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

Demo

.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

Utility Description

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

Demo

.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

Utility Description

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

Demo

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

Utility Description

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

For example: .fab

Demo

Z-Index: fab: 300
Utility Class: fab

Z-Index: modal: 200
Utility Class: modal

Z-Index: modalBG: 180
Utility Class: modalBG

Z-Index: navFixed: 160
Utility Class: navFixed

Z-Index: tooltip: 140
Utility Class: tooltip

Z-Index: popover: 120
Utility Class: popover

Z-Index: nav: 100
Utility Class: nav

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
Debug Panel