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

spacing

Spacing Sizes

Name: : 2rem
Name: xxsmall: 0.25rem
Name: xsmall: 0.5rem
Name: small: 1rem
Name: medium: 2rem
Name: large: 4rem
Name: xlarge: 8rem
Name: xxlarge: 16rem
Name: xxxlarge: 32rem

How to use

.class {
  margin-bottom: bolt-spacing(NAME);
}

text

Typography is the voice of a brand. This set of typefaces best represent Pega’s brand attributes and personality. They should be used across all digital and print applications.

See more in "Styleguide > Typography"

Soluta commodi blanditiis autem pariatur eum enim voluptate. Et quidem iusto aut aut. Ut rerum unde eaque optio non et maxime. Et ipsum aut magnam eaque eius esse reiciendis. Possimus aut eum blanditiis est id ullam. Distinctio quis est quia sit cupiditate fugit nobis. Omnis soluta hic laudantium quo facilis.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ipsam non culpa explicabo ut animi eius. Sapiente dolor aspernatur debitis nihil animi. Incidunt et eaque non qui occaecati fugiat. Aut cum ipsa enim et. Saepe aut exercitationem maiores vel. Deleniti repudiandae et accusantium ut quia. Quia dolorem reiciendis quisquam voluptas velit enim. Fuga repellendus est accusamus dolorum quia aut vel. Omnis est quia et labore dolores ad. Rerum ratione quisquam cupiditate repellat est consequuntur sit enim. Itaque architecto et quas occaecati qui recusandae quibusdam tempora. Sint veniam sed eius officiis unde et placeat. Dolor molestiae eveniet numquam id. Incidunt ducimus recusandae ducimus in voluptate. Sunt neque deserunt et laudantium. Nulla quasi vel laborum laudantium magnam enim. Tempore magnam voluptatem voluptatem veritatis dignissimos qui. Ut ab vitae ex quidem odio porro dicta.

Header 2

Quasi nostrum impedit voluptate eum modi quaerat. Vel aperiam debitis vel omnis dicta modi. Commodi minima quisquam hic nisi sunt ut et dolore. Similique non omnis ab et dolor. Repellendus veritatis aut inventore eum saepe. Ullam veniam molestiae adipisci voluptas et rerum. Aspernatur et repellat facere dignissimos itaque eum veniam. Officia eum facilis et eveniet cumque. Distinctio tempora eligendi quo. Quo id voluptas voluptas. Rem optio laborum odio debitis at. Officiis occaecati hic ut unde ut reiciendis perferendis.

Header 3

Nihil non et eum optio. Sint non non et reprehenderit qui dolorem enim laboriosam. Quia at maiores eaque. Consectetur sit sit quisquam magnam ratione. Reprehenderit error dolores et facilis neque impedit. Harum maiores officiis quis ut sed omnis magni. Voluptates excepturi animi et dolor. Id quaerat eum aut alias ratione placeat incidunt totam. Minus accusamus delectus ut quasi iure hic cum. Est eius vel accusamus ratione ut aspernatur ab sunt.

I'm a blockquote: Consequatur veniam repellendus omnis quia minima molestiae. Sit velit omnis distinctio voluptas molestiae ipsam corrupti. Iure nihil vitae dolor et consequuntur velit. A repellat reprehenderit atque tempora perferendis. Dolores aliquid accusamus quisquam eligendi odit in. Voluptates explicabo doloremque consequatur magni nihil. Sit eligendi necessitatibus sed sint reiciendis aut delectus. Id voluptatem natus perspiciatis odio aut similique et quia. Animi maxime quia minus voluptatem dolorem quis voluptas. Natus nihil iusto odio doloremque non optio. Non esse aut cumque unde.

Vitae veniam voluptas dolorem quaerat mollitia. Esse modi eaque aut delectus est nisi. Eos cumque autem dignissimos. Tempore nostrum veniam nihil fugiat ratione. Aut voluptate sunt voluptatem est qui. Ipsam eum voluptates omnis molestias. Officia qui et ducimus maiores aut. Recusandae explicabo est ab vel inventore. Qui aut voluptatem animi blanditiis non iure soluta. Maxime officiis ea ut et ullam voluptatem architecto. Possimus quos id et ea. Sit velit amet possimus voluptas consequatur possimus. Consequatur laborum porro iusto quidem nulla error earum. Veniam doloremque cum non quam enim. Veritatis minima consequuntur molestiae voluptate maxime. Adipisci laboriosam fuga quis quidem et cum.

  • eos magni sunt
  • optio ipsum iure
  • exercitationem occaecati quos

Sequi dolor eos et praesentium sint. Quia voluptatem quidem odit non dolorem. Nam eius optio voluptatem quasi distinctio. Non debitis nisi commodi exercitationem optio eveniet ut. Sed quod distinctio porro omnis qui saepe et. Non omnis aut labore rerum in aut fugiat. Eligendi in in ut laborum aut. Nulla et unde odit soluta ea quasi et eligendi. Neque doloremque eius quidem. Nisi earum nobis pariatur doloremque. Fuga qui ut perspiciatis aut in sint. Ratione quas repudiandae quia officia illum dolorem aut.

Header 4

Ut quibusdam ipsam voluptas deserunt recusandae eaque. Libero voluptatem aut cum. Nesciunt sit illo adipisci repellendus. Est aut laboriosam illo voluptatem temporibus illum consequatur. Quia sunt voluptatem in odit molestiae quibusdam numquam. Debitis voluptatem at in est. Fugiat totam animi explicabo labore. Modi et deleniti aut suscipit numquam aut. Recusandae tempora quisquam deserunt consequatur et est neque corporis. Ut sint autem molestias nobis qui doloremque quia. Consequatur dolor optio eligendi omnis voluptatem eos aut.

Header 5

Est qui laborum voluptatibus quae consequuntur. Possimus deserunt necessitatibus delectus non dolore debitis laboriosam. Nisi nemo ex quia cum exercitationem consequatur. Dolorum quisquam aut quam quia maxime eum blanditiis amet. Natus excepturi sit ut soluta ea sit. Qui quo iure delectus sed nihil fugit harum. Repellat sed cum non voluptatem aut facilis iste. Libero dolorem et et. Autem optio fugit doloremque nesciunt beatae. Voluptatem iusto incidunt dolor provident cum sint. Non sed omnis aut eum deserunt deserunt. Et eius ut sit aspernatur mollitia nesciunt qui.

Header 6

Totam consequuntur aut et ab. Aut est qui earum commodi dolores perspiciatis est earum. Soluta quis aliquid accusamus. Labore sequi ea dicta sed ea nam voluptatem. Dicta qui esse incidunt qui amet. Recusandae incidunt ipsa sit ducimus necessitatibus quisquam asperiores. Sapiente fugit sequi quae laboriosam qui. Voluptas commodi non praesentium provident vitae. Fugiat blanditiis asperiores officia et.

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

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

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

Without Parent Clear Fix

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

With Parent Clear Fix

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

color

Bolt Colors

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

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.

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.

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.

displays

Bolt Display

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

Possible values include:

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

Display: block

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

Display: inline-block

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

Display: inline

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

Display: table

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

Display: table-row

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

Display: table-cell

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

Display: hidden

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

Display: flex

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

Display: inline-flex

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

flex

Bolt Flex

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

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

All demos below are resizable!

Flex items: Default

DEFAULT
DEFAULT
DEFAULT
DEFAULT
DEFAULT

Flex items: .u-bolt-flex-grow

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

Flex items: .u-bolt-flex-shrink

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

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

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

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

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

height

Bolt Height

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

Possible values include:

  • xxsmall: 0.25rem
  • xsmall: 0.5rem
  • small: 1rem
  • medium: 2rem
  • large: 4rem
  • xlarge: 8rem
  • xxlarge: 16rem
  • none: 0
  • auto: auto
  • full: 100%
  • screen: 100vh
.u-bolt-height-xxsmall (0.25rem)

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.5rem)

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 (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-medium (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-large (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-xlarge (8rem)

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 (16rem)

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

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

Possible values include:

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

Opacity class: .u-bolt-opacity-100

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

Opacity class: .u-bolt-opacity-80

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

Opacity class: .u-bolt-opacity-60

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

Opacity class: .u-bolt-opacity-40

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

Opacity class: .u-bolt-opacity-20

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

Opacity class: .u-bolt-opacity-0

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

shadow

Bolt Shadows

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

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

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

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

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

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

spacings

Bolt Spacing

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: 4rem
  • .u-bolt-margin-right = margin-right: 2rem

(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]: 2rem
  • xxsmall: 0.25rem
  • xsmall: 0.5rem
  • small: 1rem
  • medium: 2rem
  • large: 4rem
  • xlarge: 8rem
  • xxlarge: 16rem
  • xxxlarge: 32rem

.u-bolt-margin-left

margin-left: 2rem

.u-bolt-margin-left-large

margin-left: 4rem

.u-bolt-margin-left-xxlarge

margin-left: 16rem

.u-bolt-padding

padding: 2rem

.u-bolt-padding-large

padding: 4rem

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

padding-left: 8rem
padding-right: 8rem
padding-top: 4rem
padding-bottom: 4rem

text align

Bolt Text Align

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

Possible values include:

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

.u-bolt-text-align-right

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

.u-bolt-text-align-left

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

.u-bolt-text-align-center

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

.u-bolt-text-align-justify

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

text decoration

Bolt Text Decoration

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

Possible values include:

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

.u-bolt-text-decoration-none

Erat sit dolor enim placerat sodales cubilia

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

.u-bolt-text-decoration-underline

Erat sit dolor enim placerat sodales cubilia

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

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

Erat sit dolor enim placerat sodales cubilia

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

visually hidden

Bolt Visually Hidden

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

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

Visibility toggle

[ Item to hide ]
SassDoc references

z index

Bolt Z-index

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

For example: .fab

Z-Index: contentTop: 80
Utility Class: contentTop

Z-Index: content: 60
Utility Class: content

Z-Index: contentBottom: 40
Utility Class: contentBottom

Z-Index: backgroundTop: 20
Utility Class: backgroundTop

Z-Index: background: 0
Utility Class: background

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

SassDoc references
Debug Panel