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

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"

Enim amet in possimus quos. Et et et a. Quo velit voluptatem velit consequatur sed dolor. Itaque pariatur et quia et repellendus debitis. Dignissimos facilis repellat molestiae qui id enim. Consectetur et soluta et totam molestias ipsa. Ullam adipisci eos deserunt nihil sunt exercitationem necessitatibus.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Ipsa quos est accusantium. Velit ut cumque excepturi fuga numquam omnis. Incidunt numquam ut repellat minus. Facilis similique rerum qui vitae porro consequuntur. Rerum cumque odit dolorem sit. Voluptatem tempore deserunt consequatur inventore optio ut nam. Error vel non eum sit qui. Nostrum iste quas iure non qui laboriosam. Et qui officia aut fuga accusamus qui. Et quidem nam labore nihil. Amet mollitia veritatis sit voluptatem vitae perspiciatis corrupti. Adipisci voluptas ducimus consequuntur voluptates odit maiores dolores. Fugiat natus laborum accusantium voluptatem in dolores. Cum odit nihil nihil harum. Minus est nobis eum similique cum et. Id saepe iusto rem non. Exercitationem minima placeat voluptas et totam praesentium sint rerum. Ratione delectus illo commodi velit ea perspiciatis aut.

Header 2

Reprehenderit aut iure ut voluptas quis esse. Repellat quia accusantium in facere eius tempore harum. Perspiciatis eius fuga sunt expedita eos ab nemo. Autem ipsum recusandae consectetur velit consectetur temporibus rerum. Quia eveniet non sed rerum id dolores et. Qui ratione illum voluptatem esse nemo. Distinctio non sunt qui aut nobis adipisci ex. Qui provident dolorem ullam optio. Sapiente consectetur dolorem non corporis.

Header 3

Officiis rem a sapiente voluptatibus. Repudiandae saepe illum sed eius sapiente. Aut aspernatur ea esse et beatae sit reiciendis. Vel veniam alias eum incidunt sint deleniti temporibus. Aut iste laboriosam nostrum debitis et cumque cum. Nam quidem perferendis reprehenderit voluptas aspernatur. Officiis numquam enim id molestiae non magni. Error excepturi praesentium sint. Sint sed qui non error in similique sapiente. Qui nisi voluptas fugit adipisci. Reprehenderit maiores ut rem ad consectetur. Error sed recusandae qui voluptatum.

I'm a blockquote: Nostrum ipsa et eligendi totam sit quia eaque. Sit unde aut iste sint. Aut natus sequi voluptas sed perspiciatis. Aperiam optio quo quia iste et. Non aut et corrupti ut rerum possimus id. Sint ut officia aliquid ipsum.

Maiores quibusdam repudiandae autem dolor autem assumenda et. Eos sapiente fugiat et fuga iure. Cumque tempora quia delectus et impedit et. Assumenda architecto ut ex est repellendus saepe quasi. Ut sit est eos error. Et reiciendis quis quidem voluptates. Ut ipsa consectetur qui illum aut quis eum. Totam sunt dolores et laudantium et eveniet delectus doloremque. Sed mollitia fugiat explicabo in libero. Libero ipsam aut excepturi similique dolor. Vel facilis omnis quaerat occaecati nemo natus. Cupiditate molestiae nostrum architecto eum reprehenderit dolorem. Dolores dignissimos magnam rerum rerum sed deleniti. Sit cumque itaque nisi blanditiis. Nulla impedit tempora quos error dolores quia ab. Qui sit at quia minima veniam aut sit.

  • recusandae voluptatem reiciendis
  • voluptatem harum ab
  • et magnam saepe

Eligendi dignissimos rerum excepturi fugiat. Incidunt dolorum aut veritatis est nam dolorum. Eum commodi nisi vel magni et sapiente quaerat. Dolor magni nihil unde eaque. Ut id nulla consequatur eum dicta nulla et et. Et nam rerum animi voluptas dolores rerum ut et. Ut sed sit sit ut ut. At tempore eius libero voluptatem. Molestiae consequatur commodi fugiat perferendis sed velit. Temporibus vero in doloremque unde aliquam commodi iste occaecati. Doloremque voluptatibus quos dolorem tenetur tempore aperiam aut ut. Cumque animi quasi sunt explicabo. Consequatur earum quasi quasi quibusdam voluptatum. Laudantium laborum cumque omnis atque inventore laboriosam. Harum saepe et qui ipsa. Vitae itaque natus ad quam.

Header 4

Natus assumenda nulla suscipit eveniet ipsum voluptatem. Ut ex accusantium totam sint ut asperiores. Consequatur enim et consequatur sed esse id quis. Explicabo consequatur veniam cum possimus ratione quo aperiam. Quidem quo aut voluptatem delectus laudantium repellendus. Optio minima ullam nisi illo eum quis. Magnam in est dolorum impedit eveniet. Placeat omnis ab enim voluptatibus molestiae cumque veritatis. Fugiat quos quia maiores similique fugiat quia. Dolor nostrum illum autem aut dolor eos aut. Similique veniam asperiores aut quisquam.

Header 5

Qui quasi repellendus officiis ducimus qui sed. Placeat autem praesentium quia consequatur id incidunt ut. Molestiae aut totam nisi rerum. Est ex doloremque reprehenderit reiciendis quo quia. Est natus ducimus voluptatem aut vitae unde. Soluta vel veritatis quos qui beatae at velit minima. Non optio dolorum ut natus nostrum est. Quia maxime velit quae sunt dolores tempora sequi. Necessitatibus maiores ex enim optio porro possimus. Sapiente animi et tenetur rerum. Et perferendis deleniti omnis quis officia ipsum. Officia qui praesentium rerum in magni et aut. Pariatur qui ipsam voluptatem. Ratione tempore rerum architecto beatae eligendi quis. Repudiandae vel dolor non aperiam.

Header 6

Vero facilis ut ut ullam. Commodi nihil ducimus quos. Magnam nisi fuga dolore autem. Quod sit aspernatur aliquam voluptas. Quia corrupti recusandae corporis accusamus quia. Eos sunt quis illo delectus asperiores hic. Qui delectus non illo explicabo. Ut soluta itaque illo consequatur. Corporis animi quo dicta. Sint officiis delectus accusamus omnis esse.

Bolt - LitHTML Test

Enable LitHTML Throttling

Bolt - Preact

Enable Preact Throttling

Lazy-lit Element Test

Enable Lit Element Throttling
  • xxsmall:
    320px
  • xsmall:
    400px
  • small:
    600px
  • medium:
    800px
  • large:
    1000px
  • xlarge:
    1200px
  • xxlarge:
    1400px
  • xxxlarge:
    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;
  }
}

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

Bolt Colors

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

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.

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.

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)

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.

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.

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

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

.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

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.

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.

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

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