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"

Qui dolores occaecati voluptas illum fugiat sunt eum. Quo accusamus repellat omnis sint. Quia occaecati assumenda voluptas. Beatae et qui numquam dolorum voluptates dolorum molestias nam. Necessitatibus consequuntur rerum similique et ea recusandae. Aut voluptas doloremque et.

Header 1

Here's a link, a big bold statement, some emphasized comment, and some weird words. Cumque voluptatum porro voluptatem possimus at. Facilis qui architecto sequi maiores. Eaque rerum quo earum iusto. Dolores aut est quae veritatis consequatur adipisci harum. Velit rem est adipisci repellat aperiam eaque officiis. Voluptas provident mollitia voluptatem quam architecto alias pariatur neque. Aut est soluta tempore aut impedit aut architecto. Laboriosam est sunt natus officiis. Quam distinctio a tempore similique minima voluptate suscipit. Quis qui dicta dicta praesentium explicabo inventore assumenda. Sunt ullam autem sint sapiente voluptatem. Sit doloribus quos fugit sunt. Et magni libero ducimus et consequuntur. Ducimus itaque nostrum aut facilis incidunt quae pariatur. Sint impedit provident rerum eum quam earum necessitatibus. Consequatur vel nihil libero suscipit repudiandae maiores nobis. Eum perferendis id odit iusto vel non perspiciatis. Placeat ipsam aspernatur suscipit nobis exercitationem.

Header 2

Reprehenderit corrupti odit dolorem quo occaecati aspernatur amet. Sunt ad adipisci illo eveniet. Natus eius qui quaerat quos sit ut sunt. Ut veritatis assumenda nihil sit consectetur. Porro eum recusandae nihil eligendi et quidem. Molestiae expedita neque excepturi perferendis error. At est minima et ipsum quis minus exercitationem. Ratione voluptatum eos itaque et. Temporibus beatae et ratione provident laborum quia est. Aut sequi ut enim sed. Modi voluptatem doloremque eos et consequatur iure corporis consequatur. Aut nam laudantium aut repellendus ea vel dignissimos. Distinctio quis saepe quasi libero totam veniam rerum. Qui ipsam illo aliquam eum ut eveniet. Culpa veniam ipsam omnis qui error eveniet beatae eos. Maiores porro deleniti et est.

Header 3

Sit mollitia neque voluptatibus ut veniam ut. Optio nihil sed et minima quasi illum cumque facilis. Rerum soluta suscipit omnis totam qui ex accusamus autem. Sed quia ea facere voluptatem perspiciatis non non. Voluptas animi ipsum ipsum voluptas autem ut perspiciatis. Sed et ut rerum ipsum ducimus sunt. Quam natus et officia at quis. Nihil excepturi cupiditate est dignissimos commodi deserunt odit. Excepturi voluptatum voluptate cumque et sit molestiae. Alias aut repellendus ex. Qui ut nostrum sapiente adipisci harum vitae qui voluptatem. Quas dolore eius asperiores nobis minus dolor. Excepturi nobis veniam ab culpa aliquid quia quo. Nihil nisi dolor et optio expedita. Ab ut omnis eos pariatur dolore voluptas saepe neque.

I'm a blockquote: Voluptas possimus quod facere dolores aut architecto quia qui. Modi aliquam alias incidunt sit sint doloribus. Dolore fugit dolore qui asperiores qui consequatur. Eaque qui a eos. Amet eligendi rem quos voluptatum. Voluptatem aut exercitationem porro libero et ad enim. Deserunt autem eligendi quae. Suscipit debitis sit doloribus sit perferendis aut. Rerum quisquam vel sunt adipisci qui blanditiis in.

Optio culpa est perspiciatis. Nihil nisi provident veritatis accusamus tenetur. Suscipit rerum rerum adipisci ut libero impedit sint. Architecto amet cupiditate esse. Ex consequatur rerum consequatur voluptas sint voluptatem est. Vel et est itaque incidunt. Alias ut soluta iusto facere beatae ex similique. Similique architecto quia et illo sit. Saepe vel et expedita omnis. Corrupti veritatis dolorem dignissimos voluptas itaque est.

  • repellendus natus voluptatibus
  • sint voluptate quas
  • ipsam aut aut

Eos eum dolores nesciunt quidem. Atque veniam est at ullam dignissimos laudantium. Et voluptatibus nisi consequuntur aut commodi possimus impedit. Eligendi odit minima assumenda nihil eveniet. Eos ipsum aut porro enim. Consequuntur illo voluptatem corporis autem et tempore. Ut qui est est incidunt et. Soluta neque deserunt quos consectetur impedit officia voluptatum. Ipsam repellendus velit impedit. Pariatur autem officiis quos. Recusandae facere ducimus voluptatem earum ex.

Header 4

Impedit nam numquam placeat asperiores error rerum ut. Quasi omnis natus molestiae debitis aut quia. Est pariatur error accusantium maiores et. Molestias porro aut consequatur quas enim sed. Sed reprehenderit ut et similique ea et. Ab dicta repellendus consequatur. Quibusdam aspernatur vel quia ab repellat rem. Ut corporis dolor nihil ad eveniet ad accusamus. Debitis quos blanditiis iure nesciunt maxime esse quos. Optio aut sint ab quasi rerum. Atque voluptates quia nobis dolor.

Header 5

Non quia sint ut harum repellendus sequi aut et. A eum dolore sed cum commodi molestiae hic iusto. Magnam deserunt velit accusantium explicabo aliquam. Sit cumque est qui quam. Animi tempore magni voluptas rerum inventore. Pariatur porro laborum et velit. Sed velit omnis dicta eius non eligendi omnis. Ipsam incidunt tempora odio ullam. Quaerat voluptatem est fugit laudantium. Omnis unde quis facilis sapiente cum. Architecto voluptas assumenda rerum incidunt quas distinctio ut nihil. Id quae et eligendi aut. Consequatur officiis ut et dolor. Aut nostrum saepe aut laudantium. Eligendi laudantium sunt corporis rerum tempora recusandae et. Labore incidunt sint deserunt officiis consectetur quia aliquid.

Header 6

Repellendus velit tempore sit et vero qui. Autem iure animi et ab perferendis nisi. Rerum fugit libero odio vero sed ea. Est perspiciatis aperiam fuga magnam. Dolor eos qui delectus fugit voluptas. Sunt id aut nihil beatae qui. Suscipit labore officiis dolores veritatis consequatur. Eos corrupti quia explicabo. Eveniet unde id dolore ab. Deleniti voluptates voluptatem tempore minus. Blanditiis est cupiditate non qui. Ipsum expedita et reiciendis libero sed accusamus. Et et praesentium incidunt id iure rerum et sapiente. Minus est ut accusantium. Vitae quis deserunt tenetur.

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

accordion docs

2.17.0

Accordion

Accordion Component in Bolt

The Accordion component is a vertical list of items, each of which can be expanded or collapsed to show more content.

Install via NPM
npm install @bolt/components-accordion
  {% include "@bolt-components-accordion/accordion.twig" with {
  items: [
    {
      trigger: "Accordion item 1",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 2",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 3",
      content: "This is the accordion content.",
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Items

All of the items in the accordion. Each item should contain a header and a content.

array
  • [items]:
    • Type: object
    • Properties:
      • trigger

        Trigger content of an item.

        • Type: string, object, array
      • content

        Expandable content of an item.

        • Type: string, object, array
      • open

        Automatically expand an item on page load.

        • Type: boolean
        • Enum: true or false
      • inactive

        Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden.

        • Type: boolean
      • uuid

        Unique ID for an item, randomly generated if not provided.

        • Type: string
      • open_label

        Accessible label for the open trigger to expand an item.

        • Type: string
      • close_label

        Accessible label for the close trigger to collapse an item.

        • Type: string
      • trigger_spacing

        Overrides the default trigger spacing (by default, inherited from the parent bolt-accordion)

        • Type: string
        • Enum: none, xsmall, small, medium, large
      • content_spacing

        Overrides the default content spacing (by default, inherited from the parent bolt-accordion)

        • Type: string
        • Enum: none, xsmall, small, medium, large
Single

Allow only one section to open at a time.

boolean false
  • true or false
No_separator

Hides the separator in between items.

boolean false
  • true or false
Box_shadow

Creates a box shadow around the accordion.

boolean false
  • true or false
Spacing

Controls the inset spacing of each item.

string medium
  • none, xsmall, small, medium, large
Icon_valign

Vertically align the accordion trigger content and trigger icon.

string center
  • top or center

accordion

This is the accordion content.
This is the accordion content.
This is the accordion content.

By setting the single prop to true, it allows only one item to be opened at a time.

Single open item

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Multiple open items (default)

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Open Accordion Close Accordion
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

By setting the no_separator prop to true, it will remove the separator in between items.

Accordion with separators

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Accordion without separators

Open Accordion Close Accordion
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

By setting the box_shadow prop to true, it will create a box shadow around the accordion.

Box shadow

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Box shadow, no separator

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

No box shadow

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

By setting the spacing prop to none, xsmall, small, medium, or large, it applies the appropriate inset spacing for each accordion item. The default is medium.

Spacing: none

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Spacing: xsmall

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Spacing: small

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Spacing: medium

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Spacing: large

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

By setting the icon_valign prop to top or center, it will vertically align the trigger and the icon accordingly.

Icon Valign: top

Open Accordion Close Accordion
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Icon Valign: center

Open Accordion Close Accordion
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Set the inactive prop to true on any accordion item to display the trigger as an inactive element. It will have the same font-styles as the other triggers but none of the interactive styles. It will not be clickable, and that item's content and toggle icon will always be hidden.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Inactive Accordion item
Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Accordion inside various themes

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Accordion with shadow inside various themes

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Using the grid inside trigger and content

Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

12:00 PM

Lunch & Networking

Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Open Accordion Close Accordion

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Pass various components into the content

Open Accordion Close Accordion
A Rock Climber A Rock Climber
Open Accordion Close Accordion
Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
Open Accordion Close Accordion

This is a headline

This is regular text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et.

Open Accordion Close Accordion
Open Accordion Close Accordion
This is the accordion content.
This is the accordion content.
This is the accordion content.
Open Accordion Close Accordion
Tab label 1
Tab panel
Tab label 2
Tab panel
Tab label 3
Tab panel
Open Accordion Close Accordion
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Previous Next

Example Q&A

Open Accordion Close Accordion
You can debug the issues in connector through: 1) Tracing the connector activity if it is invoking through activity; 2) Add log message to the activity to check for logs; 3) If it is invoking through Data page, use response data transform to check for issues using when rules and invoke standard data transform template for logging along with email notification.
Open Accordion Close Accordion
You can create a data object in Pega which will model the data you would like to retrieve. Create a data class and the properties that represent the data you would like to map. Create a REST connector and then reference that connector in a Data Page would be the way I would go about it. You can find more on integrations here: https://www1.pega.com/products/pega-platform/data-integrations.
Open Accordion Close Accordion
No, this should be irrelevant because the procedure of deleting the property and recreating it again works. This would also be the last thing I would want to do since all developments are on this and it would be overkilling to restart due to this. However, I would like to know if Pega internally prevents that, if so, how do I circumvent that?

By setting the content_spacing or trigger_spacing prop to an Accordion Item, the default spacing value inherited from the parent Accordion can be optionally overridden.

Basic usage: spacing

Using spacing will uniformly set the same spacing on both the trigger and the content.

This entire accordion has the spacing prop defined.
This entire accordion has the spacing prop defined.
This entire accordion has the spacing prop defined.

Advanced usage: content spacing

Using content_spacing will only set the spacing on the content container. This should only be used if you don't want the same spacing on both the trigger and the content.

This item has the content_spacing prop defined.
Open Accordion Close Accordion
This item has the content_spacing prop defined.
Open Accordion Close Accordion
This item has the content_spacing prop defined.

Advanced usage: trigger spacing

Using trigger_spacing will only set the spacing on the trigger container. This should only be used if you don't want the same spacing on both the trigger and the content.

This item has the trigger_spacing prop defined.
Open Accordion Close Accordion
This item has the trigger_spacing prop defined.
Open Accordion Close Accordion
This item has the trigger_spacing prop defined.
Web Component Usage Bolt Accordion is a fully client-side renderable web component. Add the bolt-accordion element containing any number of bolt-accordion-item elements to create an accordion. Inside each bolt-accordion-item mark the "trigger" content with the attribute slot="trigger". Everything else is considered accordion "content".
Accordion item 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accordion item 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accordion item 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<bolt-accordion> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 1</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 2</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 3</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> </bolt-accordion>
Prop Usage Configure the accordion with the properties specified in the schema. One property that is unique to the Web component is no-separator. Use this prop rather than the separator prop used in Twig.
Accordion item 1 with a lot of text in the trigger, which could wrap to multiple lines, and this trigger and the icon are vertically aligned center Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accordion item 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accordion item 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<bolt-accordion spacing="small" icon-valign="top" box-shadow no-separator multiple> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 1 with a lot of text in the trigger, which could wrap to multiple lines, and this trigger and the icon are vertically aligned center</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 2</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 3</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> </bolt-accordion>
Advanced Usage Two advanced options are shown below. Automatically show an bolt-accordion-item by adding the auto-open prop.
Accordion item 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accordion item 2 This item is opened by default. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accordion item 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<bolt-accordion> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 1</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item auto-open> <bolt-text slot="trigger">Accordion item 2</bolt-text> <bolt-text>This item is opened by default. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 3</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> </bolt-accordion>

action blocks docs

2.17.0

Action blocks

Action Blocks Component in Bolt

Stylistic block layout for displaying actionable icon and text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-action-blocks

Description

Action blocks work as a group to provide the user an easy to browse list of options of relativeto take action to discover more information. They commonly exist as links to more detailed content.

Best Practices

  • Can use xlight, light, dark, and xdark themes.
  • Can have an image, icon, and/or text
  • Should link to content
  • Should be limited to 7 (soft limit) unless we're representing a large list of content that is meant to be scanned
  • Can wrap to many rows
  • Top aligned by default
  • Can be vertically centered
  • Are set with a border by default
  • Can be borderless
  {% include "@bolt-components-action-blocks/action-blocks.twig" with {
  contentItems: [
    {
      text: "Item 1",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 2",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 3",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Max_items_per_row

The max amount of items (action blocks) to be displayed in one row.

number 6
  • 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
Valign

Vertical alignment of the content inside each action block.

string start
  • start, center, end
Borderless

Removes the border in between each action block.

boolean false
  • true or false
ContentItems

Content items to populate the action blocks.

array
  • [items]:
    • Type: object
    • Properties:
      • text
        • Type: string
      • url
        • Type: string
      • icon
        • Type: object
        • Properties:
          • name
          • size
          • background
MaxItemsPerRow

Use max_items_per_row prop instead.

Align

Use valign prop instead.

Border

Use borderless prop instead.

action blocks

Action Blocks inside a xlight themed container

Action Blocks inside a light themed container

Action Blocks inside a dark themed container

Action Blocks inside a xdark themed container

background docs

2.17.0

Bolt Background

Background Component in Bolt

Background can be added to any container. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-background

Description

Background allows Bolt to set an image inside of bands.

  • Can set an image inside the band
  • Can set background shapes
  • Can set focus on the left
  • Can set focus on the right
  • Can set light, medium, or heavy opacity
  • Can set a left, right, or center gradient

We recommend a max-width of 2880px for full-bleed background images. This recommendation takes into consideration the common HD screen resolution of 1920x1080 and multiplies 1920 by 1.5.

  {% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focalPoint: {
    vertical: "center",
    horizontal: "center"
  },
  contentItems: [
    {
      pattern: "image",
      src: "/images/content/backgrounds/background-tall-4.jpg"
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Opacity

Overlay opacity

string medium
  • light, medium, heavy, full
Overlay

Should an overlay be used for this background.

string enabled
  • enabled or disabled
ShapeGroup

Add a Bolt Background Shapes group.

string none
  • A, B, none
ShapeAlignment

Alignment of shape group.

string right
  • left or right
Fill

Type of fill to use for the overlay.

string color
  • color, gradient, linear-gradient, radial-gradient
FillColor

Color of the fill to use in the overlay.

string default
  • indigo, pink, default, black
FocalPoint

Where the opacity background should originate.

object
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
    • vertical

      Currently doesn't use this value. Intended future application.

      • center, top, bottom
ContentItems

An array of objects to place in the background. Works with Image and Shape components. Video option is deprecated.

array
  • [items]:
    • Type: any
    • Properties:

background

Light Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Medium Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Heavy Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Full Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Heavy Opacity with Left Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Heavy Opacity with Right Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Shapes: Shape Group A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Shapes: Shape Group B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Shapes: Shape Group A, Alignment Left

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Fill: Color

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Fill: Gradient

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Note: valign is an Image component prop, not a Background component prop. Set valign on images passed in via contentItems to control the vertical alignment.

valign: center

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

valign: top

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

valign: bottom

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

valign: 25%

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

background shapes docs

2.17.0

Background shapes

Background Component Shapes in Bolt

Published

History
View changes
Install
yarn add @bolt/components-background-shapes
Source code
View on Github
Dependencies

A grid of colored vector shapes for use in backgrounds. Part of the Bolt “Components” CSS framework that powers the Bolt Design System. This component will likely not be used on its own, but rather will be a dependency of another component that includes it.

Install via NPM
npm install @bolt/components-background-shapes

Description

Background shapes bring the brand further into Bolt. These shapes create a background texture for bands. The shapes are offset at an angle offset inside a band component.

Best Practices

  • Set to the right side of the band if there is copy on the left.
  • Set to the left side of the band if there is copy on the right.
  • Shapes can be used behind cards or thumbnail images (video or just image) but should not make the content hard to consume by the user.
  • Shapes should not be used behind any text elements. Doing so makes the text hard to read.
  • Don't use background shapes if it makes the content in the band hard to parse
  {% include "@bolt-components-background-shapes/background-shapes.twig" with {
  shapeGroup: "B"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
ShapeGroup

The shapeGroup to use to build the shapes layout.

string A
  • A or B

background shapes

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

shapeGroup: A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

shapeGroup: B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

band docs

2.17.0

Band

Band Component in Bolt

Band is a general content container with spacing and background options. Part of the Bolt Design System.

Install via NPM
npm install @bolt/components-band
  {% include "@bolt-components-band/band.twig" with {
  content: "This is a band.",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Content

Main content of the band.

string , array , object
Pinned_content

Pinned content of the band.

object
    • upper

      Pinned to the upper area of the band.

        • content

          A pinned area can contain 1 or more items.

        • align

          Horizontal alignment of a single item.

          • start, center, end
    • lower

      Pinned to the lower area of the band.

        • content

          A pinned area can contain 1 or more items.

        • align

          Horizontal alignment of a single item.

          • start, center, end
Tag

Controls the semantic HTML tag to use for the band's content.

string div
  • div, article, section, header, footer, nav, figure
Valign

Controls the internal vertical alignment of the band's content.

string middle
  • start, center, end
Size

Controls the vertical spacing of the band.

string medium
  • none, xsmall, small, medium, large
Full_bleed

If set to true, the band will take the full width of the page.

boolean true
  • true or false
Theme

Controls the theme of the band.

any dark
  • none, xlight, light, dark, xdark, xxdark
Row_gutter

Please use pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

Content_row_start

Please use pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

Items

Please use content and pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

FullBleed

This prop has been renamed. Please use full_bleed.

ContentTag

This prop is no longer needed. tag takes care of the semantic markup automatically.

band

This is a band.

band size variations

This is a band with size set to none.
This is a band with size set to xsmall.
This is a band with size set to small.
This is a band with size set to medium.
This is a band with size set to large.

band theme variations

This is a band with theme set to none.
This is a band with theme set to xlight.
This is a band with theme set to light.
This is a band with theme set to dark.
This is a band with theme set to xdark.
This is a band with theme set to xxdark.

band tag variations

Setting the container's HTML tag to: div

This is a band.

Setting the container's HTML tag to: article

This is a band.

Setting the container's HTML tag to: section

This is a band.

Setting the container's HTML tag to: header

This is a band.

Setting the container's HTML tag to: footer

This is a band.

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

This is a band.

Note: turn off full bleed option if you don't want the band to span the full width of the page.

Full bleed

This band spans the full width of the page, it ignores the spacing of its parent container.

This is a band.

Not full bleed

This band only takes up the available space within its parent container, it accounts for the spacing of its parent container.

This is a band.

Each pinned area (upper and lower) can have 1 or more items, spacing will be evenly distributed

upper pinned 1
upper pinned 2
upper pinned 3

This Is a Headline

This Is a Subheadline

lower pinned 1
lower pinned 2
lower pinned 3

This Is a Headline

This Is a Subheadline

When there is only 1 item, you can set the align prop to your liking (start, center, end)

This Is a Headline

This Is a Subheadline

Note: please convert the deprecated items prop to the new pinned_content prop.

Deprecated items prop usage

  {% include "@bolt-components-band/band.twig" with {
  content: content,
  items: [
    {
      position: {
        align: "end",
        valign: "center",
        row_start: 1,
        column_start: 1,
        column_end: 12,
      },
      content: pinned_share,
    },
  ]
} only %}

New pinned_content prop usage

  {% include "@bolt-components-band/band.twig" with {
  content: content,
  pinned_content: {
    upper: [
      {
        content: pinned_share,
        align: "end",
      },
    ],
  }
} only %}

band with background

This Band Has a Backround Image

band nested

This Band Has 2 Bands Nested Inside

Nested band 1
Nested band 2

band flag

This Is a Flag

With text on the left and CTAs on the right.

band feature

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

This is a paragraph.

band collection

Image descriptionImage description

Collection 1

Image descriptionImage description

Collection 2

Image descriptionImage description

Collection 3

banner docs

2.17.0

Banner

A content container that delivers important messages to the user.

Published

History
View changes
Install
yarn add @bolt/components-banner
Source code
View on Github
Dependencies

Banner component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-banner
  {% include "@bolt-components-banner/banner.twig" with {
  content: "This is the banner content."
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.

object
Content *

Renders the content of the banner. While any element can be passed, only text and links are recommended because banner messages are supposed to be concise.

any
Status

Sets the status that the banner is trying to convey.

string information
  • error, warning, success, information
Align

Sets the text alignment of the content.

string center
  • start, center, end
Full

Sets the width of the banner to take up 100% of the screen width.

boolean false

banner

This is a banner
Status
This banner is trying to convey error
This banner is trying to convey warning
This banner is trying to convey success
This banner is trying to convey information
Text alignment
This banner's text is aligned to the start
This banner's text is aligned to the center
This banner's text is aligned to the end
Academy Challenge Status
You passed this challenge on May 21, 2020. View Details
You failed this challenge on May 21, 2020. View Details
Web Component Usage Bolt Banner is a web component, you can simply use <bolt-banner> in the markup to make it render.
This is a banner
<bolt-banner> This is a banner </bolt-banner>
Prop Usage Configure the banner with the properties specified in the schema.
You passed this challenge on May 21, 2020. View Details
<bolt-banner status="success" align="start"> You passed this challenge on <strong>May 21, 2020</strong>. <bolt-link url="https://pega.com">View Details</bolt-link> </bolt-banner>

block list docs

2.17.0

Block List

Block-list Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-block-list
Source code
View on Github
Dependencies

Block list for stacked full-width content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-block-list
  {% include "@bolt-components-block-list/block-list.twig" with {
  items: [
    include("@bolt-components-link/link.twig", {
      text: "Link 1",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    include("@bolt-components-link/link.twig", {
      text: "Link 2",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    include("@bolt-components-link/link.twig", {
      text: "Link 3",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    "Simple text example"
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Items

All of the items in the block list - can have simple text or items

array

block list

Theme: xlight


Theme: light


Theme: medium


Theme: dark


Theme: xdark


blockquote docs

Stylistic pull quote styles for all types of layout. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-blockquote

Description

Block quotes provide testimonials throughout the pega experience.

Content that can be contained in a blockquote

  • Logo or image (optional)
  • Quote
  • Attributor image (optional)
  • Attributor name (optional)
  • Attributor title (optional)
  • Attributor company (optional)

Additional info

  • Can be full width or confined with the grid
  • Can be left, center, or right aligned
  • can have top+bottom horizontal lines, a left or right vertical line, or no lines
  • Text is open sans
  • Quote marks are NOT inch marks
  • Quote marks are system font Georgia
  • Text color changes based on the theme colors
  {% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "<p>The greater danger for most of us lies not in ... achieving our mark.</p>"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Content *

Text to appear in blockquote (Twig only). May be plain text or text wrapped in

<

p> tags.

string
Size

Text size.

string xlarge
  • large, xlarge, xxlarge
AlignItems

Aligns items left, center, or right.

string left
  • left, center, right
Border

Add a border.

string vertical
  • vertical, horizontal, none
Indent

Indent text.

boolean false
FullBleed

Width of the brower window.

boolean false
No_quotes

Hide quotation marks.

boolean false
Lang

Set language-specific quotation marks. By default, inherits the value of the closest lang attribute. While any valid lang valid is accepted, choosing en, de, fr, or ja will optimize how quotes are displayed in these languages.

string
Logo

Add a logo component.

object
  • @bolt-components-logo/logo.schema.yml > Object details
    • invert

      Set to true to invert the logo colors.


      Type: boolean
Author

Author of the quote.

object
    • name

      Author's name.

    • title

      Author's title.

    • image
      • @bolt-components-image/image.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • src

          Source url for image.


          Type: string
        • alt

          Alt tag for image.


          Type: string
        • lazyload

          Lazyload can boost performance by loading images on demand, instead of on initial page load.


          Type: boolean
          • true or false
        • no_lazy

          Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.


          Type: boolean
          • true or false
        • placeholder_color

          A valid CSS background color property shown while image loads.


          Type: string
        • placeholder_image

          Image path or image data shown while image loads.


          Type: string
        • srcset

          A comma seperated string of image urls and image widths, used for optimizing image loading performance.


          Type: string
        • sizes

          A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.


          Type: string
        • useAspectRatio

          Use the ratio prop instead.


          Type: boolean
          • true or false
        • ratio

          Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.


          Type: string, boolean
        • max_width

          Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".


          Type: string
        • width

          Override the default width of the image. If no height is provided, aspect ratio will be maintained.


          Type:
        • height

          Override the default height of the image. If no width is provided, aspect ratio will be maintained.


          Type:
        • cover

          Set an image to fill its container.


          Type: boolean
          • true or false
        • imageAttributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • valign

          Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).


          Type: string
        • align

          Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%).


          Type: string

blockquote

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: left

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: center

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: right

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Indent: True

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Indent: False

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: vertical

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: horizontal

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: none

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

No quotes

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Multiple Paragraph Content

Blockquote can have one paragraph. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.

Or it can have multiple paragraphs. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci.

Mike Mai Pegasystems
For language-specific quotes, Blockquote inherits the value of the closest lang attribute. Override that value by setting the lang prop directly on the component.

English

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

German

Echtzeit bedeutet Relevanz. Kunden erwarten von uns, dass wir jederzeit wissen, was sie gerade denken.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

French

Davantage de temps réel, c'est plus de pertinence. Les clients s’attendent à ce que nous lisions dans leurs pensées, dans l’instant présent.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Japanese

リアルタイムであればあるほど、関連性は高まります。顧客は自分たちが今何を考えているかこちらが把握することを期待しています。

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: xlight

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: light

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: dark

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: xdark

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist
Web Component Usage Bolt Link is a web component that renders a semantic blockquote with Bolt styles. For a simple blockquote, wrap your quote content in the <bolt-blockquote> custom element. Note: you must wrap your quote text in <p> tags for the appropriate quotation marks to appear. Add attribution to the quote by adding the author-name, author-title, and author-image attributes to <bolt-blockquote>.

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

<bolt-blockquote author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg"> <p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p> </bolt-blockquote>
Additional Options Apply additional configuration options via attributes on the <bolt-blockquote> element. Attribute names and values match the Twig schema but use "kebab-case" instead of "camelCase". For example, alignItems becomes align-items.

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

<bolt-blockquote align-items="center" border="horizontal" author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg"> <p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p> </bolt-blockquote>
Advanced Usage To add a logo to <bolt-blockquote> place logo content (for example: <bolt-logo> or <img>) next to blockquote text, and add the attribute slot="logo" to the logo's outermost container.
PayPal Logo

The greater danger for most of us lies not in setting our aim too high and falling short...

In fact, the greater danger is setting our aim too low and achieving our mark.

<bolt-blockquote author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg"> <img slot="logo" src="/images/content/logos/logo-paypal.svg" alt="PayPal Logo"> <p>The greater danger for most of us lies not in setting our aim too high and falling short...</p> <p>In fact, the greater danger is setting our aim too low and achieving our mark.</p> </bolt-blockquote>

breadcrumb docs

2.17.0

Breadcrumb

A navigational aid to keep track and maintain awareness of current location within a website.

Published

History
View changes
Install
yarn add @bolt/components-breadcrumb
Source code
View on Github
Dependencies

Breadcrumb is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-breadcrumb
  {% include "@bolt-components-breadcrumb/breadcrumb.twig" with {
  contentItems: [
    include("@bolt-components-link/link.twig", {
      text: "Home",
      url: "#!"
    }),
    include("@bolt-components-link/link.twig", {
      text: "Landing Page",
      url: "#!"
    }),
    include("@bolt-components-link/link.twig", {
      text: "Sub Page",
      url: "#!"
    }),
    include("@bolt-components-link/link.twig", {
      text: "Current Page",
      url: "#!",
      attributes: {
        "aria-current": "page",
      },
    }),
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
ContentItems

Breadcrumb pieces.

array

breadcrumb

Accessibility Requirement The aria-current attribute must be applied to the last link in the set to indicate that it represents the current page.
Page sections popover In addition to passing the Link component as an item, you may also pass the Popover component as an item, and use the Menu component in the popover to allow the user to navigate to a particular page's top sections.

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Eyebrow

Headline

Subheadline

Body text.

Breadcrumb Band Stacking On Top of Featured Band ^

The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.

Background and Theming

There is an outer band containing the breadcrumb band and the featured band, background and theme should be set on that outer band.

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

Digital transformation is more than a slick new mobile app. It demands the hard work of designing for customer outcomes. Pega software gives you the power to truly transform.

Breadcrumb Band Stacking On Top of Featured Band with Outer Background Band ^

The above example shows a small band containing the breadcrumbs and large band containing the content. Both have theme set to none.

Background and Theming

A background image is set on the outer band and the theme is set to dark.

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

Digital transformation is more than a slick new mobile app. It demands the hard work of designing for customer outcomes. Pega software gives you the power to truly transform.

Breadcrumb Band Stacking On Top of Featured Band (individually themed)^

The above example shows a xsmall band containing the breadcrumbs and large band containing the content.

Background and Theming

No background or theme is set on the outer band in this case because it's not neccessary.

button docs

2.17.0

Bolt Button

Button Component in Bolt

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Button is a branded component to convey call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button

Description

Buttons are the core of our action components. Their affordance is immediate and can be use for most actions and allow users to access the target with a single interaction. Buttons clearly provide a next step for the user.

Our Buttons depend on the theme they are contained in and change in appearance based on said theme. The themes and button colors were designed together to ensure the proper amount affordance and clarity.

Xlight and light themes

  • Primary: Light Indigo container with white text
  • Secondary: white button with indigo text
  • Text button: Light indigo text with chevron

Dark and xdark themes

  • Primary: Yellow container with default indigo text
  • Secondary: white button with indigo text
  • Text button: white text with chevron

  • Currently only have one defined size (though other options can and will be defined in the future)

  • Can be 100% width of the wrapper for mobile or card instances
  • Can optionally be 100% width. For example, the button has default width of 2 rem on either side on larger screens but full width on smaller screens

Dos

  • CTAs must be clearly and succinctly labeled with a next step
  • CTA should lead with strong action verbs
  • The primary CTA should be the most important action.
  • Be consistent in placement based on the screen size and device
  • Fall back to the text button in secondary and tertiary content areas where you can. For example, cards with a button use the text style so that a filled button doesn't become overwhelming and redundant.
  • Follow theming rules

Don'ts

  • Don't clutter the page with too many buttons
  • Don't mix and match themes and their button colors. For example, do not use the indigo button on dark and xdark themes as the indigo button does not stand out enough.
  • Don't mix and match colors outside the theme, see button groups.
  {% include "@bolt-components-button/button.twig" with {
  text: "This is a button"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Text *

Text inside the button.

string
Transform

Transforms the button text to various cases.

string none
  • uppercase, lowercase, capitalize, none
Type

Determines the button tag type for semantic buttons

string
  • button, submit, reset
Size

Size of the button.

string medium
  • xsmall, small, medium, large, xlarge
Style

Style of the button determined by information hierarchy.

string primary
  • primary, secondary, text
Width

Controls the width of the button.

string auto
  • auto, full, full@small
Border_radius

Rounds the corners of the button.

string regular
  • regular or full
Align

Horizontal alignment of items (text and icon) inside the button. Note: the values left and right are deprecated, use start and end instead.

string center
  • start, center, end
Icon

Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the button.

object
    • position

      Where to position the icon within the button

      • before or after
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

    • name

      Icon name

    • background

      Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

      • none, circle, square
    • size

      Icon size.

      • small, medium, large, xlarge
    • color

      Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

      • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink
IconOnly

Make the button to display only the icon and hide the text (which is still required). You are required to pass both text and icon data for this option to work.

boolean false
ItemAlignment

Use the align parameter instead.

Rounded

Use the border_radius parameter instead.

Tag

Switch to using the new type prop instead.

string button
  • a, link, button, submit, reset

button

button size variations

Note: medium is the default size.

Note: interactive states only appear when the user interacts with the button, they are not styles that are available for use.

Regular States

Interactive States

Buttons inside a xdark theme

Buttons inside a dark theme

Buttons inside a light theme

Buttons inside a xlight theme

Note: full@small means that the button will go from auto width to full width when the browser goes below the small breakpoint.

Note: the align prop only works with full width buttons.

button type variations

Note: when passing icons inside a button, it is required to define the icon's position, by default it is set to after, which means the icon will come after the text.

Icon position set to before

Icon position set to after

button icon only

Note: an icon-only button still is still required to have text, and that text is accessible through screen readers. It's just visually hidden.

Xsmall icon-only button

Small icon-only button

Medium icon-only button

Large icon-only button

Xlarge icon-only button

Full border radius (circle icon-only button)

Examples with different icons

Add a js- target class for the button to perform something through javascript

Web Component Usage Bolt Button is a web component, you can simply use <bolt-button> in the markup to make it render.
This is a button
<bolt-button url="https://pega.com"> This is a button </bolt-button>
Basic Usage To use icon in combination with text within the button, you must pass <bolt-icon> with a slot attribute defined as either before or after. Note: the slot attribute is required in order for the icon to be placed and spaced correctly within the button. Even if icon-only option is turned on, slot is still required.

This is a button

This is a button

This is a button

<p> <bolt-button> <bolt-icon name="chevron-left" slot="before"></bolt-icon> This is a button </bolt-button> </p> <p> <bolt-button> <bolt-icon name="chevron-right" slot="after"></bolt-icon> This is a button </bolt-button> </p> <p> <bolt-button icon-only> <bolt-icon name="close" slot="before"></bolt-icon> This is a button </bolt-button> </p>
Advanced Usage The web component has all the options shown in the schema table. You can define each prop within the <bolt-button> element. Use unique combinations to customize a button to your liking. Note: the style prop is named color instead.
This is a button
<bolt-button url="https://pega.com" size="large" color="secondary" border-radius="full" tag="a" icon-only > <bolt-icon name="menu" slot="before"></bolt-icon> This is a button </bolt-button>
Server-side Rendered Web Components (Experimental) The <bolt-button> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
This is a button
<bolt-button> This is a button <bolt-icon name="chevron-right" slot="after"></bolt-icon> </bolt-button>

button group docs

2.17.0

Button Group

Button Group Component in Bolt

Button-group can contain multiple buttons. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-button-group

Description

Button groups are a horizontal set of actions with a hierarchy that defines the spacing and their relationship between each other. This set of actions help people under stand their options with potential next steps.

Button padding left is 1rem when there are multiple buttons in a horizontal row.

Dos

  • Follow the button component guidelnes
  • Separate buttons by 1rem
  • Make sure the CTAs have a relationship with each other. If they don't reevaluate the content structure.
  • Be sure to consider the horizontal group of actions in smaller, less optimal sizes.
  • Be sure to determine the hierarchy of the CTAs in the group. These patterns are good:
    • Primary + secondary + text button
    • Secondary + text button
    • Primary + text button

Don'ts

  • Don't have multiple primary buttons grouped together
  • Don't have LESS than 1rem separating buttons
  • Don't have MORE than 1rem separating buttons
  • Don't have CTAs grouped together that do not relate to one another.

NOTE: We currently do not have joined buttons (eg, no gap, single button with two sides), but this is something to consider moving forward.

  {% include "@bolt-components-button-group/button-group.twig" with {
  buttons: [
    {
      text: "Learn More",
      style: "primary"
    },
    {
      text: "About Pega",
      style: "secondary"
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Tag

Html tag to wrap the button group.

string
  • ul or ol
Buttons

An array of button objects.

array
  • [items]:
    • Type: object

      Bolt button information.

    • Properties:
ContentItems

An array of bolt objects.

array
  • [items]:
    • Type: object

      Bolt component information.

    • Properties:
Content

A string of content to place in the button group.

string

button group

button group icon only

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)

This is text with the tags stripped.

card docs

Deprecated - check out the new Card component that replaces this older version.

card replacement docs

2.17.0

Card

Sneak peak of the upcoming v3.0 Card component, (temporarily renamed as 'Card Replacement' on Bolt v2.x to avoid naming collisions).

Install via NPM
npm install @bolt/components-card-replacement

Description

Cards are shadowed containers that group together relevant and actionable information.

Best Practices

  • Placement should be in a manner where it is easily scannable
  • The headline should call out what the benefit is of clicking through
  • Avoid cluttering a card-replacement with too many calls to action
  • If the headline can work as link affordance without a button, don't have a button
  • If the headline does not clearly invoke action, use a CTA at the bottom of the card-replacement to entice the user
  // Standard card-replacement

  {% include "@bolt-components-card-replacement/card-replacement.twig" with {
  media: {
    image: {
      src: "/images/placeholders/landscape-16x9-mountains.jpg",
      alt: "Image alt.",
    },
  },
  body: {
    eyebrow: "This is an eyebrow",
    headline: "This is a headline",
    paragraph: "This is a paragraph.",
  },
  actions: [
    {
      text: "This is a button",
      url: "https://pega.com",
    },
  ],
} only %}

  // Custom Content

  {% include "@bolt-components-card-replacement/card-replacement.twig" with {
  media: {
    content: "Pass custom content to the card-replacement media.",
  },
  body: {
    content: "Pass custom content to the card-replacement body.",
  },
} only %}

  {% include "@bolt-components-card-replacement/card-replacement.twig" with {
  content: "Pass completely custom content to the card-replacement, without the styles of the card-replacement body.",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Tag

HTML tag that contains the card-replacement content.

string article
  • div, article, figure
Horizontal

Displays the card media + body horizontally.

boolean
Height

Controls the height of the card-replacement to auto fit to content or the full height of the column in a grid.

string full
  • auto or full
Theme

Controls the theme of the individual card-replacement.

string none
  • xlight, light, dark, xdark, none
Link

Providing a link will make the whole card-replacement clickable.

object
    • url

      Address for the link.

    • text

      Visually hidden text for link, included for accessibility.

    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

Media

Media section of the card-replacement, accepts either image and video, or custom content.

object
    • image
      • @bolt-components-image/image.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • src

          Source url for image.


          Type: string
        • alt

          Alt tag for image.


          Type: string
        • lazyload

          Lazyload can boost performance by loading images on demand, instead of on initial page load.


          Type: boolean
          • true or false
        • no_lazy

          Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.


          Type: boolean
          • true or false
        • placeholder_color

          A valid CSS background color property shown while image loads.


          Type: string
        • placeholder_image

          Image path or image data shown while image loads.


          Type: string
        • srcset

          A comma seperated string of image urls and image widths, used for optimizing image loading performance.


          Type: string
        • sizes

          A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.


          Type: string
        • useAspectRatio

          Use the ratio prop instead.


          Type: boolean
          • true or false
        • ratio

          Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.


          Type: string, boolean
        • max_width

          Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".


          Type: string
        • width

          Override the default width of the image. If no height is provided, aspect ratio will be maintained.


          Type:
        • height

          Override the default height of the image. If no width is provided, aspect ratio will be maintained.


          Type:
        • cover

          Set an image to fill its container.


          Type: boolean
          • true or false
        • imageAttributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • valign

          Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).


          Type: string
        • align

          Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%).


          Type: string
    • video
      • @bolt-components-video/video.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • videoId

          Brightcove ID for this video.


          Type: string, number
        • playerId

          Brightcover Player ID.


          Type: string
        • accountID

          ID of the Brightcove account that owns the video.


          Type: string, number
        • videoUuid

          A unique identifying string, randomly generated if not provided.


          Type: string
        • share_description

          A custom title to use in the share overlay


          Type: string
        • ratio

          Maintain video ratio.


          Type: boolean
        • collapsed

          Should the video be collapsed on load.


          Type: boolean
        • showMeta

          Should the video show meta data.


          Type: boolean
        • showMetaTitle

          Should the video show meta title.


          Type: boolean
        • controls

          Should the video controls be available.


          Type: boolean
        • autoplay

          Should the video auto-play on load.


          Type: boolean
        • loop

          Should the video loop.


          Type: boolean
        • on_init

          The on_init config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a <bolt-video> player instance when initializing. Please see the new recommended enabled_plugins and disabled_plugins options below.


          Type: string
        • default_plugins

          An array of the default <bolt-video> player plugins that are globally enabled by default.


          Type: array
          • playback
        • available_plugins

          The built-in <bolt-video> player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript.


          Type: array
          • playback, social, email, cue
        • enabled_plugins

          Space-separated list of built-in <bolt-video> plugins for Brightcove to enable. Current include social, email, playback, and cue. For example: <bolt-video enabled-plugins="cue social email playback">.


          Type: string
        • disabled_plugins

          Space-separated list of any built-in <bolt-video> plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the playback plugin). For example: <bolt-video disabled-plugins="playback">.


          Type: string
        • isBackgroundVideo

          Background video feature will be removed with Bolt v3.0


          Type:
    • content

      Passing free-form content into the card-replacement media will ignore image or video data. Use this if the pre-configured image or video doesn't satisfy your needs.

Body

Body section of the card-replacement, accepts pre-configured eyebrow, headline, and paragraph or custom content.

object
    • eyebrow

      Regular eyebrow.

    • headline

      Headline pre-defined to size large.

    • paragraph

      Regular paragraph of text.

    • content

      Passing free-form content into the card-replacement body will ignore eyebrow, headline, and paragraph data. Use this if the pre-configured eyebrow, headline, and paragraph don't satisfy your needs.

Actions

Actions section of the card-replacement, accepts buttons.

array
    • text
    • url
    • external
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

Content

Content will override media, body, and actions props. Use this to build a completely cuztomized card-replacement.

string , array , object
Open Accordion Close Accordion
Raised

Manually switch on / off the raised (shadow + animation effect) treament. By default this config option is applied if the card-replacement contains a bolt-card-replacement-link OR includes the url prop.

boolean

Card - Basic Example

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Card - Horizontal

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button
Image alt. Image alt.

This is an eyebrow

This card's `action` is an internal link

This is a paragraph.

This is an internal button
Image alt. Image alt.

This is an eyebrow

This card's `action` is an external link

This is a paragraph.

This is an external button
Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

Card - Theme Colors

Inside XDARK Parent Container

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

Inside DARK Parent Container

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

Inside LIGHT Parent Container

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

Inside XLIGHT Parent Container

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XLIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

LIGHT Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

DARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

XDARK Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

NONE Themed card-replacement

Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.

This is a button

Card - Height Options

Image alt. Image alt.

This card has auto height.

This is a button
Image alt. Image alt.

This card has full height. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie.

This is a button
Image alt. Image alt.

This card also has full height.

This is a button

Card - Video Example

Video

Video Meta Title Goes Here.

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

With link and video

This card has a link, which makes the whole card-replacement clickable, and you can make it play/pause the video. Action button is optional in this case.

Passing free-form content inside the card-replacement body only

A Rock Climber A Rock Climber

Anything can be passed inside the card body container. Woohoo!

Passing free-form content for the entire card

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.


Anything can be passed inside the card container. Woohoo!
This card is completely customized using the content prop
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
Image alt. Image alt.
Image alt. Image alt.

This is an eyebrow

This is a headline.

This is body text.

This is a button
Web Component Usage Bolt Text is a web component, you can simply use <bolt-card-replacement> in the markup to make it render. Its inner content is comprised of <bolt-card-replacement-media>, <bolt-card-replacement-body>, and <bolt-card-replacement-actions>.
This is an eyebrow This is a headline This is a paragraph. Internal link External link
<bolt-card-replacement> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image> </bolt-card-replacement-media> <bolt-card-replacement-body> <bolt-text eyebrow>This is an eyebrow</bolt-text> <bolt-text headline>This is a headline</bolt-text> <bolt-text>This is a paragraph.</bolt-text> </bolt-card-replacement-body> <bolt-card-replacement-actions> <bolt-card-replacement-action url="https://pega.com"> Internal link </bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" external> External link </bolt-card-replacement-action> </bolt-card-replacement-actions> </bolt-card-replacement>
Simple Link Usage The simplest way to make the whole card-replacement clickable is by passing a link address to the url prop on the main <bolt-card-replacement> component itself. Also include the url-text prop for accessibility.
This is a card-replacement with an overall link that makes the whole card-replacement clickable.
<bolt-card-replacement url="https://google.com" url-text="Go to google.com"> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image> </bolt-card-replacement-media> <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body> </bolt-card-replacement>
Advanced Link Usage Insert a <bolt-card-replacement-link> inside <bolt-card-replacement> and you can pass more than just url. <bolt-card-replacement-link> is similar to <bolt-link>. You can add custom attributes to <bolt-card-replacement-link> and insert a semantic <a> or <button> element inside.
Go to google.com This is a card-replacement with an overall link that makes the whole card-replacement clickable.
<bolt-card-replacement> <bolt-card-replacement-link custom-attribute="foo" html-attribute="bar"> <a href="http://google.com" target="_blank">Go to google.com</a> </bolt-card-replacement-link> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image> </bolt-card-replacement-media> <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body> </bolt-card-replacement>
Nested Links While making the whole card-replacement clickable, you are still able to insert nested links as needed. Any <bolt-link>, <bolt-card-replacement-link>, and <bolt-card-replacement-action> will work as expected.
This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have text links that would go somewhere else. Internal link External link
<bolt-card-replacement url="https://google.com"> <bolt-card-replacement-media> <bolt-ratio aspect-ratio-height="9" aspect-ratio-width="16"> <bolt-video data-setup='{"techOrder": ["Html5"], "resizeManager": false}' video-id="3861325118001" account-id="1900410236" show-meta show-meta-title player-id="r1CAdLzTW" controls></bolt-video> </bolt-ratio> </bolt-card-replacement-media> <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have <bolt-link target="_blank" url="https://boltdesignsystem.com/docs">text links</bolt-link> that would go somewhere else.</bolt-card-replacement-body> <bolt-card-replacement-actions> <bolt-card-replacement-action url="https://pega.com"> Internal link </bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" external> External link </bolt-card-replacement-action> </bolt-card-replacement-actions> </bolt-card-replacement>

chip docs

2.17.0

Chip

Chip Component in Bolt

Pill like container for displaying meta data text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-chip
  {% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-chip> tag.

object
Text *

Text content of the chip.

string , array , object
Size

Controls the size of the chip.

string small
  • xsmall, small, medium
Url

Optional. Contains a URL that the chip points to. When URL is present, tag changes to a, otherwise tag would be span.

string
Target

Specifies where to display the linked URL. This may also be passed as part of attributes.

string
Icon

Bolt icon. Accepts the same options as Bolt Icon Component @bolt-components-icon plus an additional 'position' parameter that determines placement within the button.

object
  • @bolt-components-icon/icon.schema.json > Object details
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.


      Type: object
    • name

      Icon name


      Type: string
    • background

      Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!


      Type: string
      • none, circle, square
    • size

      Icon size.


      Type: string
      • small, medium, large, xlarge
    • color

      Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.


      Type: string
      • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink
Tag

DEPRECATED - tag is automatically determined by URL.

Open Accordion Close Accordion
No_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean
No-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean

chip

Chip

chip url variations

chip size variations

Size xsmall small medium

chip icon variations

Icon Icon before Icon after
Web Component Usage Bolt Chip is a web component, you can simply use <bolt-chip> in the markup to make it render.
Chip
<bolt-chip> Chip </bolt-chip>
Basic Usage All the props defined in the schema table can be used directly on the <bolt-chip> element.
Linked chip
<bolt-chip spacing="small" url="https://pega.com" target="_blank"> Linked chip </bolt-chip>
Advanced Usage To add icons to <bolt-chip>, place a <bolt-icon> next to your chip text. For icons to have the correct spacing, you must add the slot attribute to <bolt-icon>. The slot value can be before or after.
Chip with icon
<bolt-chip> Chip with icon <bolt-icon name="check" slot="after"></bolt-icon> </bolt-chip>

chip list docs

2.17.0

Chip List

Chip List Component in Bolt

Chip-list can contain multiple chips. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-chip-list
  {% include "@bolt-components-chip-list/chip-list.twig" with {
  items: [
    {
      text: "Chip 1",
      url: "#!"
    },
    {
      text: "Chip 2",
      url: "#!"
    },
    {
      text: "Chip 3",
      url: "#!"
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Items

An array of Chips.

array
  • [items]:
    • Type: object

      Chip.

    • Properties:
Size

Sets the size used for all of the chips (if size isn't specified on the individual chip)

  • xsmall, small, medium
ContentItems

Deprecated (will be removed in Bolt v3.0) - use the items prop instead.

array
  • [items]:
    • Type: object

      Chip.

    • Properties:

chip list

Chip list with links

Chip list with text

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

chip list size

code snippet docs

2.17.0

Code Snippet

Code Snippet Component in Bolt

Code snippet shows text in a style that is best fit for a monospace font. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-code-snippet
  {% include "@bolt-components-code-snippet/code-snippet.twig" with {
  display: "block",
  lang: "html",
  content: "Some code snippet"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Display

Defines if the code text is inline or block.

string block
  • block or inline
Lang

Language of the code text.

string html
  • css, html, js, scss, twig
Syntax

Toggle between a light and dark syntax highlighting, or turn it off. Separate from Bolt theming.

string light
  • light, dark, none

code snippet

Code snippet can be a block of code, and display is set to block by default.

  display: block;
margin: 0 0 1.65rem 0;

Well, code snippet can also be inline like this display:inline; when you set display to be inline instead.

block:

  <header>
  <h1>Headline</h1>
</header>

inline:

<header><h1>Headline</h1></header>

css:

  .my-css {
  display: block;
}

scss:

  .my-scss {
  @include my-mixin;
}

html:

  <header>
  <h1>Headline</h1>
</header>

javascript:

  import { polyfillLoader } from '@bolt/core-v3.x/polyfills';

twig:

  {% include "@bolt-components-code-snippet/code-snippet.twig" with {
  display: "block",
  lang: "html",
  content: "Some code snippet"
} only %}

light:

  <header>
  <h1>Headline</h1>
</header>

dark:

  <header>
  <h1>Headline</h1>
</header>

none:

  <header>
  <h1>Headline</h1>
</header>

copy to clipboard docs

2.17.0

Copy to Clipboard

Copy to Clipboard Component in Bolt

Copy to Clipboard allows the user to copy the current page URL to clipbaord to paste and share.

Install via NPM
npm install @bolt/components-copy-to-clipboard
  {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
  text_to_copy: "https://boltdesignsystem.com"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Text

This property has been renamed trigger_text

string Copy Link
CopiedText

Use the custom_confirmation property instead if you need to change the confirmation text.

string Copied!
IconSize

Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size.

string medium
Url

This property has been renamed text_to_copy

string
Trigger_text

Text to use for the inital copy button. Ignored if the custom_trigger property is used.

string Copy Link
Text_to_copy *

The text to copy to the clipboard.

string
Custom_trigger

(optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed.

string , object , array
Custom_transition

(optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon.

string , object , array
Custom_confirmation

(optional) Custom content to show after a successful copy.

string , object , array

copy to clipboard

Copied!
Copied!
Copied!
Copied!
Custom transition
Copied!
Copied!
Custom transition

Custom confirmation

device viewer docs

2.17.0

Device Viewer

Device Viewer Component in Bolt

Device frames for showcase. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-device-viewer
  {% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  image: {
    src: "/images/sample/product-device-screenshot--phone.jpg"
  }
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
DeviceName

Name of the device.

string
  • ipad, iphone8, macbook
Color

Device color.

string
  • black, silver, gold
Orientation

Device orientation.

string
  • portrait or landscape
Magnify

Add the magnifier effect.

boolean false
Image object
    • src

      Source url for the image.

device viewer

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

Magnification: true

dropdown docs

2.17.0

Dropdown

Dropdown Component

The Dropdown component adds a slick, extensible, and accessible menu system.

Install via NPM
npm install @bolt/components-dropdown

Description

Fully interactive with and without JS enabled (including keyboard support)

  // Via Twig
{% embed "@bolt-components-dropdown/dropdown.twig" with {
  title: "Toggle Menu",
  collapse: true
} %}
  {% block content %}
    {% include "@bolt-components-nav/nav.twig" with {
      links: [
        {
        text: "Link 1 Text",
        url": "#!"
      },
      {
        text: "Link 2 Text",
        url": "#!"
      },
      {
        text: "Link 3 Text",
        url": "#!"
      }
      ]
    } %}
  {% endblock %}
{% endembed %}

// Via Web Component and Twig
<bolt-dropdown
  title="Custom Element w/ Collapse &amp; Center"
>
  {% include "@bolt-components-nav/nav.twig" with {
    links: [
      {
        text: "Link 1 Text",
        url": "#!"
      },
      {
        text: "Link 2 Text",
        url": "#!"
      },
      {
        text: "Link 3 Text",
        url": "#!"
      }
    ]
  } only %}
</bolt-dropdown>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Title

The toggle title text

string
Center

True to center the toggle title

boolean false
Collapse

True to hide toggle until mobile screen size

boolean false
Content

All of the items in the dropdown -- generally works by including @bolt-components-nav/nav.twig with links array of objects containing text & url

any

dropdown

Open Dropdown Close Dropdown

dropdown center

Open Dropdown Close Dropdown

dropdown collapse

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

dropdown long header

Open Dropdown Close Dropdown

Default Dropdown

Center

Collapse

Collapse and Center

Theme Variations

Extra Long Header

figure docs

Figure for displaying graphics or tabular content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-figure
  {% set image %}
  {% include "@bolt-components-image/image.twig" with {
    src: "/images/placeholders/500x500.jpg"
  } only %}
{% endset %}

{% include "@bolt-components-figure/figure.twig" with {
  media: {
    content: image
  },
  caption: "Figure caption."
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Media

Pass in any renderable media content via the media.content prop.

object
    • content

      Figure media content, e.g image, icon, video, etc.

    • image

      Use the content prop instead.

      • @bolt-components-image/image.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • src

          Source url for image.


          Type: string
        • alt

          Alt tag for image.


          Type: string
        • lazyload

          Lazyload can boost performance by loading images on demand, instead of on initial page load.


          Type: boolean
          • true or false
        • no_lazy

          Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.


          Type: boolean
          • true or false
        • placeholder_color

          A valid CSS background color property shown while image loads.


          Type: string
        • placeholder_image

          Image path or image data shown while image loads.


          Type: string
        • srcset

          A comma seperated string of image urls and image widths, used for optimizing image loading performance.


          Type: string
        • sizes

          A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.


          Type: string
        • useAspectRatio

          Use the ratio prop instead.


          Type: boolean
          • true or false
        • ratio

          Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.


          Type: string, boolean
        • max_width

          Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".


          Type: string
        • width

          Override the default width of the image. If no height is provided, aspect ratio will be maintained.


          Type:
        • height

          Override the default height of the image. If no width is provided, aspect ratio will be maintained.


          Type:
        • cover

          Set an image to fill its container.


          Type: boolean
          • true or false
        • imageAttributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • valign

          Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).


          Type: string
        • align

          Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%).


          Type: string
    • icon

      Use the content prop instead.

      • @bolt-components-icon/icon.schema.json > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • name

          Icon name


          Type: string
        • background

          Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!


          Type: string
          • none, circle, square
        • size

          Icon size.


          Type: string
          • small, medium, large, xlarge
        • color

          Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.


          Type: string
          • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink
    • video

      Use the content prop instead.

      • @bolt-components-video/video.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • videoId

          Brightcove ID for this video.


          Type: string, number
        • playerId

          Brightcover Player ID.


          Type: string
        • accountID

          ID of the Brightcove account that owns the video.


          Type: string, number
        • videoUuid

          A unique identifying string, randomly generated if not provided.


          Type: string
        • share_description

          A custom title to use in the share overlay


          Type: string
        • ratio

          Maintain video ratio.


          Type: boolean
        • collapsed

          Should the video be collapsed on load.


          Type: boolean
        • showMeta

          Should the video show meta data.


          Type: boolean
        • showMetaTitle

          Should the video show meta title.


          Type: boolean
        • controls

          Should the video controls be available.


          Type: boolean
        • autoplay

          Should the video auto-play on load.


          Type: boolean
        • loop

          Should the video loop.


          Type: boolean
        • on_init

          The on_init config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a <bolt-video> player instance when initializing. Please see the new recommended enabled_plugins and disabled_plugins options below.


          Type: string
        • default_plugins

          An array of the default <bolt-video> player plugins that are globally enabled by default.


          Type: array
          • playback
        • available_plugins

          The built-in <bolt-video> player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript.


          Type: array
          • playback, social, email, cue
        • enabled_plugins

          Space-separated list of built-in <bolt-video> plugins for Brightcove to enable. Current include social, email, playback, and cue. For example: <bolt-video enabled-plugins="cue social email playback">.


          Type: string
        • disabled_plugins

          Space-separated list of any built-in <bolt-video> plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the playback plugin). For example: <bolt-video disabled-plugins="playback">.


          Type: string
        • isBackgroundVideo

          Background video feature will be removed with Bolt v3.0


          Type:
    • table

      Use the content prop instead.

      • @bolt-components-table/table.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • headers

          Generates top and side headers, each can contain an array of cells.


          Type: object
            • top
                • cells

                  Each item represents a cell in the top header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys.

                  • [items]:
                    • Type: any
                    • Properties:
                      • content
                        • Type: string
                      • attributes
                        • Type: object
            • side
                • cells

                  Each item represents a cell in the side header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys

                  • [items]:
                    • Type: any
                    • Properties:
                      • content
                        • Type: string
                      • attributes
                        • Type: object
        • rows

          Generates an array of rows, each can contain an array of cells.


          Type: array
            • cells

              Each item represents a cell in a row. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys

              • [items]:
                • Type: any
                • Properties:
                  • content
                    • Type: string
                  • attributes
                    • Type: object
        • footer

          Generates a table footer, can contain an array of cells.


          Type: object
            • cells

              Each item represents a cell in the footer. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys

              • [items]:
                • Type: any
                • Properties:
                  • content
                    • Type: string
                  • attributes
                    • Type: object
        • format

          Display either a regular table or a more complex numeric table.


          Type: string
          • regular or numeric
        • borderless

          Removes the vertical border in between cells.


          Type: boolean
          • true or false
        • first_col_fixed_width

          Sets the width of the first column to be as wide as the longest text.


          Type: boolean
          • true or false
Caption

Caption for the figure.

string , object , array
Content

Figure contains no content. Only media and caption.

figure

Fig. 1: This is Bill. He is awesome.

Image Figure

Fig. 1: This is an image.

Icon Figure

Fig. 2: This is an icon.

Video Figure

Fig. 3: This is a video.

Table Figure

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
Fig. 4: This is a table.
Web Component Usage Bolt Figure is a web component. Use the custom element <bolt-figure> to wrap your figure media and caption. The figure media must have the attribute slot="media" or be wrapped by an element with that attribute. Everything else inside the <bolt-figure> tag is considered the caption. We recommend simply using text with optional inline markup (as seen below).
This is a caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit text link.
<bolt-figure> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" slot="media"></bolt-image> This is a caption. Lorem ipsum <em>dolor sit amet</em>, consectetur adipiscing elit <a href="#">text link</a>. </bolt-figure>

form docs

2.17.0

Form

Bolt component for forms and form elements

A collection of fieldsets to create a form. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-form
  {% include "@bolt-components-form/form.twig" with {
  text: "This is a form",
  url: "#!",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Icon_size

Customize the size of the input icon used

medium
We promise not to sell your email address
The username you entered is already taken.

Select an alignment

Select toppings

If there were any server-side errors, you'd see them here
Pick at least two of the following

Get the Report

(all fields are required)

form inline inputs

Inline inputs: auto width

Use a bolt-list with display set to inline, and pass each input as an item. This will create an inline layout with multiple inputs. The width of each input will be adjusted to fit its content.

Inline inputs: flexible width

Use a bolt-list with display set to flex, and pass each input as an item. This will create a flexible layout with multiple inputs. The width of each input will be adjusted to the available space to fill up the full width of the layout.

Get the Report

(all fields are required)

Get the Report

(all fields are required)

Get the Report

(all fields are required)

(Note: forms do not offically support dark themes yet. Use at your own risk.)

grid docs

2.17.0

Bolt Grid

Grid Component

Published

History
View changes
Install
yarn add @bolt/components-grid
Source code
View on Github
Dependencies

A flexible 12-column grid with responsive breakpoint options. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-grid
  {% include "@bolt-components-grid/grid.twig" with {
  gutter: "medium",
  row_gutter: "medium",
  items: [
    {
      column_start: "1",
      column_span: "1",
      row_start: "1",
      row_span: "1",
      valign: "start",
      content: "Item Content",
    },
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Gutter

Spacing between the columns of the grid.

string medium
  • none, small, medium, large
Row_gutter

Spacing between the rows of the grid.

string medium
  • none, small, medium, large
Items

Array of grid items to render inside the grid.

array
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

    • content

      Content to render inside each grid item.

    • valign

      Vertical alignment of the grid item itself.

      • start, center, end
    • column_start

      The vertical starting point of the grid item. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column start is set at 6 for any browser width larger and equal to the small breakpoint. This prop is required to make the grid work in Internet Explorer.

    • column_span

      The number of columns the grid item should span across. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column span is set at 6 for any browser width larger and equal to the small breakpoint.

    • row_start

      The horizontal starting point of the grid item. This prop is required to make the grid work in Internet Explorer.

    • row_span

      The number of rows the grid item should span across.

grid

Bolt Grid is a 12-column grid design approach

By using The Grid to design layouts, consistency is guaranteed. If your goal is to confine your layout to a 12-column grid and have elements spaced and lined up consistently using the Bolt spacing system, The Grid is for you. Otherwise, you should not use The Grid, there is the List component for simple layouts and alignments.

1 2 3 4 5 6 7 8 9 10 11 12

grid start and span

Support for Internet Explorer: Due to IE's outdated technology, it is mandatory to define column start and row start if you want the grid to render correctly.

Column start and column span

The Bolt Grid is built on the concept of column start and column span, this allows the user to have full control of the grid layout.

Common usage

Main content in the center (column start 3 and column span 8) with 2 asides.

Aside Main Aside

Main content with an aside (column start 9 and column span 4).

Main Aside

Row start and row span

Row start and row span are also available, they are for less common layouts.

Row Row Row Start at column 2 and row 2 and span 2 rows. Row Row Row

All possible start and span options

Please refer to the Bolt Breakpoints for all possible breakpoint names. number@breakpoint-name means starting at that specific breakpoint, change to the number defined. For example: column_span: "6@small" means starting at the small breakpoint, span 6 columns.

Regular Option Responsive Option
column_start 1 to 12 1@breakpoint-name to 12@breakpoint-name
column_span 1 to 12 1@breakpoint-name to 12@breakpoint-name
row_start 1 to 12 1@breakpoint-name to 12@breakpoint-name
row_span 1 to 12 1@breakpoint-name to 12@breakpoint-name

grid gutter variations

None Gutter

Span 4 columns Span 4 columns Span 4 columns

Small Gutter

Span 4 columns Span 4 columns Span 4 columns

Medium Gutter

Span 4 columns Span 4 columns Span 4 columns

Large Gutter

Span 4 columns Span 4 columns Span 4 columns

None Row Gutter

Span 12 columns Span 12 columns Span 12 columns

Small Row Gutter

Span 12 columns Span 12 columns Span 12 columns

Medium Row Gutter

Span 12 columns Span 12 columns Span 12 columns

Large Row Gutter

Span 12 columns Span 12 columns Span 12 columns

Each item can span from 1 to 12 columns

Span 3 columns Span 6 columns Span 9 columns Span 12 columns

Use any combination that adds up to 12 columns to form a row

In this example, the item 1 is starting at column 1 and spanning 3 columns wide, the item 2 is starting at column 4 and spanning 9 columns.

Item 1 Item 2

In this example, the item 1 is starting at column 1 and spanning 6 columns wide, the item 2 is starting at column 7 and spanning 6 columns.

Item 1 Item 2

Each item can span from 1 to 12 rows

Row span works as long as you have multiple rows. For example, if you only have 2 rows of content, you cannot have an item to span 3 rows because the highest you can get is 2.

3 rows 6 rows 9 rows 12 rows Row Row Row Row Row Row Row Row Row Row Row Row

Responsive breakpoint options

Use the @breakpoint options to do advanced responsive layouts.

  • Item 1
    1. Up to small breakpoint: start at row 2 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 4 columns
    3. Starting at medium breakpoint: start at row 1 and span for 3 columns
    column_start: "1", column_span: "12 3@small 4@medium", row_start: "2 1@small"
  • Item 2
    1. Up to small breakpoint: start at row 1 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 8 columns
    3. Starting at medium breakpoint: start at row 1 and span for 9 columns
    column_start: "1 5@small 4@medium", column_span: "12 8@small 9@medium", row_start: "1 1@small"
Item 1 Item 2

Horizontal item alignment

The alignment must be set manually by using column start and column span, that way the user can position the item exactly as intended with the flexibility doing more than the common start, center, and end alignments.

Standard alignments

To align an item to the start, set column start to 1.

Column start at 1 and span 4

To align an item to the center, set column start by using this formula: (12 - column_span) / 2 + 1.

Column start at 5 and span 4

To align an item to the end, set column start by using this formula: (12 - column_span) + 1.

Column start at 9 and span 4

Advanced alignments

Offset by 1 column from the center.

Column start at 4 and span 8

Offset by 1 column from the start.

Column start at 2 and span 2

Vertical item alignment

Vertical alignment of an item can simply be defined by the valign prop.

Start

Item Item Item

Center

Item Item Item

End

Item Item Item

Traditional Columns and Rows

  1. Use a parent grid to create rows, each item span for 12 columns.
  2. Inside each item of the parent grid, pass a child grid to create columns.
Item Item Item
Item Item Item
Item Item Item

headline docs

2.17.0

Headline

Headline Component

Headlines are specific combinations of typographic styles for display text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-headline
  {% include "@bolt-components-headline/headline.twig" with {
  text: "This is a headline",
} only %}

{% include "@bolt-components-headline/eyebrow.twig" with {
  text: "This is an eyebrow",
} only %}

{% include "@bolt-components-headline/subheadline.twig" with {
  text: "This is a subheadline",
} only %}

{% include "@bolt-components-headline/text.twig" with {
  text: "This is text",
} only %}

{% include "@bolt-components-headline/lead.twig" with {
  text: "This is a lead",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Text *

Renderable text content of the headline.

string , object , array
Tag

Html tag.

string p
  • h1, h2, h3, h4, h5, h6, p, span, cite, div
Align

Text alignment.

string
  • left, center, right
Weight

Font weights.

string regular
  • light, bold, regular, semibold
Style

Font styles.

string normal
  • normal or italic
Size

Font size.

string medium
  • xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
Autoshrink

Automatically shrink the font size used in the xxxlarge headline size when 60 or more characters are used.

boolean true
Transform

Text transformation.

string
  • uppercase, lowercase, capitalize
Url

If provided, turns headline into a link to given url.

string
Icon

Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by @bolt-components-icon or 3) the string "none" to explicitly remove default icons

object , string , string
Quoted

Adds quoted styling to text.

boolean

headline

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

H1

This is an example of H1

H2

This is an example of H2

H3

This is an example of H3

H4

This is an example of H4

H5

This is an example of H5

H6

This is an example of H6

P

This is an example of P

SPAN

This is an example of SPAN

Align:

This is an example of align left

Align:

This is an example of align center

Align:

This is an example of align right

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

Headline w/ Icon Position before

What we do at Pega is brilliant!



Headline w/ Icon Position after

What we do at Pega is brilliant!



Headline w/ Default Icon Position

What we do at Pega is brilliant!



Headline w/ Icon Options

What we do at Pega is brilliant!






Headline w/ Left Icon Position (Deprecated)

What we do at Pega is brilliant!



Headline w/ Right Icon Position (Deprecated)

What we do at Pega is brilliant!

What we do at Pega is brilliant!

icon docs

2.17.0

Icon

Icon component in Bolt

A symbolic image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-icon

Tips for custom icons:

  • Filenames for any custom icons should be all lowercase.
  • Only use dashes in the filename to separate out words. No underscores or spaces!
  • To automatically disable color replacement, make sure the SVG icon ends with -colored.svg.

For example: bolt-logo.svg would get colors stripped while bolt-logo-colored.svg would not!

  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Name

Icon name

, string
Background

Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

string none
  • none, circle, square
Size

Icon size.

string
  • small, medium, large, xlarge
Color

Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

string auto
  • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink

icon

icon size variation


icon theme variation

icon color variation

background: none color: auto background: circle color: auto background: square color: auto background: none color: teal background: circle color: teal background: square color: teal background: none color: blue background: circle color: blue background: square color: blue background: none color: indigo background: circle color: indigo background: square color: indigo background: none color: yellow background: circle color: yellow background: square color: yellow background: none color: orange background: circle color: orange background: square color: orange background: none color: gray background: circle color: gray background: square color: gray background: none color: green background: circle color: green background: square color: green background: none color: white background: circle color: white background: square color: white background: none color: pink background: circle color: pink background: square color: pink
background: none color: auto background: circle color: auto background: square color: auto background: none color: teal background: circle color: teal background: square color: teal background: none color: blue background: circle color: blue background: square color: blue background: none color: indigo background: circle color: indigo background: square color: indigo background: none color: yellow background: circle color: yellow background: square color: yellow background: none color: orange background: circle color: orange background: square color: orange background: none color: gray background: circle color: gray background: square color: gray background: none color: green background: circle color: green background: square color: green background: none color: white background: circle color: white background: square color: white background: none color: pink background: circle color: pink background: square color: pink

Custom SVG Icons

Can't find an existing SVG that suits your needs?

Before jumping ahead and adding a new custom SVG icon, please make sure you come and chat with the Bolt team first to see if there's already an existing icon that could get used instead OR if it makes sense to add a new icon to the design system itself!


Adding Custom SVG Icons to Bolt

Note: make sure your custom SVG icon starts with custom- as this is required to ensure names of built-in icons don't collide with custom SVG icons added.

Step 1. Import your custom SVG Icon in a .js file that's compiled by the Bolt build tools. Note: make sure your SVG icon has been already exported for the web (docs coming soon!).

import './assets/icons/custom-users.svg';

Step 2. After recompiling the site's JavaScript, your custom SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-users", size: "xlarge" } only %}
<bolt-icon name="custom-users" size="xlarge"></bolt-icon>

Adding a Custom SVG Icon - Retain Original Colors

This advanced use case is rarely recommended since it can limit the number of places an SVG icon can get used and prevents the icon's color palette from adjusting based on the location it's used.

Step 1. Import your SVG Icon in a .js file, making sure your icon ends in -colored.svg

import './assets/icons/custom-arrow-left-colored.svg';

Step 2. After recompiling the site's JavaScript, your custom colored SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-arrow-left-colored", size: "xlarge", } %}
<bolt-icon name="custom-arrow-left-colored" size="xlarge"></bolt-icon>

icon custom colors

Bolt's SVG icon system provides the ability to customize an individual icon's color (the shape itself), background color, and background opacity levels, in both the Twig and Custom Element formats the design system ships.

via Web Component:

  <bolt-icon
  size="xlarge"
  background="circle"
  name="marketing-gray"
  style="
    color: #a65388;
    --bolt-theme-icon-background: #a65388;
    --bolt-theme-icon: #FFF;
    --bolt-theme-icon-background-opacity: 1;
  "></bolt-icon>

via Twig Include:

  {% include "@bolt-components-icon/icon.twig" with {
  name: "customer-service",
  background: "circle",
  size: "xlarge",
  attributes: {
    style: [
      "color: #e64b18;",
      "--bolt-theme-icon-background: #e64b18;",
      "--bolt-theme-icon: #FFF;",
      "--bolt-theme-icon-background-opacity: 1;"
    ]
  }
} only %}

icon name variations


  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bolt-logo-colored

  • brand-atom

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-rocket

  • brand-satelite

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid

  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bolt-logo-colored

  • brand-atom

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-rocket

  • brand-satelite

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid
Web Component Usage Bolt Icon is a web component. You can simply use <bolt-icon> in the markup to make it render.
<bolt-icon name="calendar"></bolt-icon>
Prop Usage Configure the icon with the properties specified in the schema.
<bolt-icon name="calendar" size="xlarge" background="square" color="orange"></bolt-icon>

image docs

2.17.0

Image

Image Component in Bolt

An image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-image

Image sizes

IMPORTANT: This method of adding classes to images is DEPRECATED.

To specify image size (e.g u-bolt-width-1/1) pass the correct class like so:

{% set classes = create_attribute(imageAttributes | default({})).addClass([
    "c-bolt-image__img",
    "u-bolt-width-1/1",
  ])
%}

Then pass it into the component:

{% include '@bolt-components-image/image.twig' with {
  src: "/images/placeholders/tout-4x3-climber.jpg",
  alt: "A Rock Climber",
  imageAttributes: classes,
} only %}
  {% include '@bolt-components-image/image.twig' with {
  src: "/src/images/turtle.jpg",
  alt: "A Turtle"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Src

Source url for image.

string
Alt

Alt tag for image.

string
Lazyload

Lazyload can boost performance by loading images on demand, instead of on initial page load.

boolean true
  • true or false
No_lazy

Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.

boolean false
  • true or false
Placeholder_color

A valid CSS background color property shown while image loads.

string hsl(233, 33%, 97%)
Placeholder_image

Image path or image data shown while image loads.

string data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
Srcset

A comma seperated string of image urls and image widths, used for optimizing image loading performance.

string
Sizes

A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.

string auto
UseAspectRatio

Use the ratio prop instead.

boolean true
  • true or false
Ratio

Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.

string , boolean auto
Max_width

Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".

string
Width

Override the default width of the image. If no height is provided, aspect ratio will be maintained.

number , string
Height

Override the default height of the image. If no width is provided, aspect ratio will be maintained.

number , string
Cover

Set an image to fill its container.

boolean false
  • true or false
ImageAttributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Valign

Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).

string center
Align

Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%).

string center

image

A Rock Climber A Rock Climber

image size variations

640x480 jpg

A Rock Climber A Rock Climber

500x500 jpg

Bill Murray Bill Murray

1151x638 jpg

Mountains Mountains

1151x638 jpeg

Mountains

2712x2300 png

decision hub chart

3000x5336 jpeg

device screenshot device screenshot

124x33 svg

logo paypal svg

Src: Root Relative

src: "/images/placeholders/image.jpg",
Bill Murray Bill Murray

Src: Source Set

srcset: "/images/placeholders/500x500-200.jpg 200w,/images/placeholders/500x500-320.jpg 320w",
Bill Murray Bill Murray

Src only that won't be found in bolt.data.images

Bill Murray Bill Murray

Src only that won't be found in bolt.data.images and not lazy loaded

Bill Murray Bill Murray

Src and srcset that won't be found in bolt.data.images

Bill Murray Bill Murray

Absolute src - not lazy loaded

Wikipedia Example

Absolute src - lazy loaded

Wikipedia Example

Jpg: Lazyload true

Bill Murray Bill Murray

Jpg: Lazyload false

Bill Murray Bill Murray

Png: Lazyload true

decision hub chart

Png: Lazyload false

decision hub chart

Svg: Lazyload: true

logo paypal svg

Svg: Lazyload: false

logo paypal svg

Custom Height and Width, JPEG (2:1)

Bill Murray Bill Murray

Custom Height and Width, PNG (2:1)

decision hub chart

Custom Height and Width, SVG (10:1)

logo paypal svg

Custom Max-Width, JPG (200px)

rocks in Yosemite rocks in Yosemite

image zoom variation

Image Zoom

When used with the device viewer component, the image component can used to create a "zoomed" state (`magnify` must be set to `true` on the device viewer).

Web Component Usage Bolt Image is a web component that renders a semantic <img> tag with Bolt styles. All that's required to make a <bolt-image> are the src and alt attributes.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber"></bolt-image>
Responsize Images Optionally, pass srcset and sizes to <bolt-image> for responsive images.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-320.jpg 320w" sizes="auto" alt="A Rock Climber"></bolt-image>
Setting the Aspect-ratio Setting the aspect ratio on an image provides a placeholder while the image is loading. Do this by adding the ratio attribute with the image's aspect-ratio as slash-separated values, e.g. "4/3" or "400/300".
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="4/3"></bolt-image>
Lazyloading Lazyloading is on by default. Turn it off with the no-lazy attribute.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" no-lazy></bolt-image>
Custom Placeholder Placeholder image and color options can be set via the attributes placeholder-image and placeholder-color where "image" is an image path and "color" is a valid CSS background-color. Note: the ratio attribute must be provided for placholder image or color to display.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="4/3" placeholder-color="#D3D3D3" placeholder-image="http://placehold.it/400x300"></bolt-image>

list docs

2.17.0

List

List Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-list
Source code
View on Github
Dependencies

Minimal list component for laying out a group of items. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-list
  {% include "@bolt-components-list/list.twig" with {
  display: "inline",
  spacing: "xsmall",
  align: "start",
  valign: "center",
  items: [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Items *

Generates an array of items, each can contain renderable content (i.e. a string, render array, or included pattern).

array
Tag

Apply the semantic tag for the list.

string ul
  • ul, ol, div, span
Display

Display either an inline list of items or a block (stacked) list of items. Responsive options are also available for transforming from block to inline at specific breakpoints.

string block
  • block, flex, inline, inline@xxsmall, inline@xsmall, inline@small, inline@medium
Spacing

Control the spacing in between items.

string xsmall
  • none, xxsmall, xsmall, small, medium, large, xlarge
Separator

Display a separator in between items.

string none
  • none, solid, dashed
Inset

Turn spacing to the inside of each item.

boolean false
  • true or false
Align

Control the horizontal alignment of items.

string start
  • start, center, end, justify
Valign

Control the vertical alignment of items.

string center
  • start, center, end
Nowrap

Prevent inline/flex list items from wrapping to a second line.

boolean false
  • true or false

list

  • Item 1
  • Item 2
  • Item 3

list item variations

Inline list of different items

Inline list of chips

Inline list of buttons

Block

  • Item 1
  • Item 2
  • Item 3

Flex

  • Item 1
  • Item 2
  • Item 3

Inline

  • Item 1
  • Item 2
  • Item 3

Inline@xxsmall

  • Item 1
  • Item 2
  • Item 3

Inline@xsmall

  • Item 1
  • Item 2
  • Item 3

Inline@small

  • Item 1
  • Item 2
  • Item 3

Inline@medium

  • Item 1
  • Item 2
  • Item 3

Inline@breakpoint

Note: this type of display option will transform a block list to inline when the browser is equal to or greater than the breakpoint specified.

Block list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Block list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Block list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Block list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Block list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Block list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Block list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Flex list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (none)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (xxsmall)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (xsmall)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (small)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (medium)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (large)

  • Item 1
  • Item 2
  • Item 3

Inline list with spacing (xlarge)

  • Item 1
  • Item 2
  • Item 3

Solid separators in a block list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a flex list

  • Item 1
  • Item 2
  • Item 3

Solid separators in a inline list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a block list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a flex list

  • Item 1
  • Item 2
  • Item 3

Dashed separators in a inline list

  • Item 1
  • Item 2
  • Item 3

list inset variations

Regular spacing in a block list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a block list

  • Item 1
  • Item 2
  • Item 3

Regular spacing in a inline list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a inline list

  • Item 1
  • Item 2
  • Item 3

Regular spacing in a flex list

  • Item 1
  • Item 2
  • Item 3

Inset spacing in a flex list

  • Item 1
  • Item 2
  • Item 3

Regular vs inset spacing

There are 2 different types of spacing styles and you can use it to your advantage. Different layouts call for different spacing styles, use your best judgment to apply the more applicable style.

The advantage of using regular spacing style

This is the regular spacing style, which adds space only in between items. So when it is put side by side next to a paragraph of text, the top of the list will line up with the paragraph of text (optically). Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

The same applies to items with a background color. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

  • Item 1
  • Item 2
  • Item 3

The advantage of using inset spacing style

Inset spacing puts spacing around each item, this is very useful if you are putting the list inside any kind of box container. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

  • Item 1
  • Item 2
  • Item 3

^ This list is inside a colored box.

list align variations

Align prop only works with inline display, it has no effects on block and flex display.

Horizontally align inline items: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xxsmall items: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xsmall items: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@small items: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@medium items: start

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline items: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xxsmall items: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xsmall items: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@small items: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@medium items: center

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline items: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xxsmall items: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xsmall items: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@small items: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@medium items: end

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline items: justify

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xxsmall items: justify

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@xsmall items: justify

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@small items: justify

  • Item 1
  • Item 2
  • Item 3

Horizontally align inline@medium items: justify

  • Item 1
  • Item 2
  • Item 3

list valign variations

Valign prop only works with inline and flex display, it has no effects on block display.

Vertically align inline items: start

  • Item 1
  • Item 2
  • Item 3

Vertically align inline items: center

  • Item 1
  • Item 2
  • Item 3

Vertically align inline items: end

  • Item 1
  • Item 2
  • Item 3

Vertically align flex items: start

  • Item 1
  • Item 2
  • Item 3

Vertically align flex items: center

  • Item 1
  • Item 2
  • Item 3

Vertically align flex items: end

  • Item 1
  • Item 2
  • Item 3

list tag variations

Use the semantically correct tag based on the context of your page layout.

ul

ol

  1. Item 1
  2. Item 2
  3. Item 3

div

span

Item 1 Item 2 Item 3

list nowrap variations

Nowrap prop only works with inline and flex display, it has no effects on block display.

Inline list with nowrap

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Flex list with nowrap

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
Web Component Usage Bolt Button is a web component, you can simply use <bolt-list> in the markup to make it render.
Item 1 Item 2 Item 3
<bolt-list> <bolt-list-item>Item 1</bolt-list-item> <bolt-list-item>Item 2</bolt-list-item> <bolt-list-item>Item 3</bolt-list-item> </bolt-list>
Basic Usage All the props defined in the schema table can be used directly on the <bolt-list> element.
Item 1 Item 2 Item 3
<bolt-list display="inline" spacing="xsmall" separator="dashed" align="center" > <bolt-list-item>Item 1</bolt-list-item> <bolt-list-item>Item 2</bolt-list-item> <bolt-list-item>Item 3</bolt-list-item> </bolt-list>
Advanced Usage Instead of passing plain text into each item, you may also pass other Bolt components or regular HTML.
Item 1 Item 2 Item 3
<bolt-list display="inline"> <bolt-list-item> <bolt-link url="https://pega.com"> Item 1 </bolt-link> </bolt-list-item> <bolt-list-item> <bolt-chip url="https://pega.com"> Item 2 </bolt-chip> </bolt-list-item> <bolt-list-item> <bolt-button url="https://pega.com"> Item 3 </bolt-button> </bolt-list-item> </bolt-list>

logo docs

2.17.0

Logo

Logo Component in Bolt

Stylistic tags for displaying a logo. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-logo
  {% include "@bolt-components-logo/logo.twig" with {
  src: "/images/content/logos/logo-paypal.svg"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Invert

Set to true to invert the logo colors.

boolean

logo invert variation

menu docs

2.17.0

Menu

A vertical list of menu items. This component is usually used inside a popover container to provide additional actions.

Menu is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-menu
  {% include "@bolt-components-menu/menu.twig" with {
  items: [
    {
      content: "Menu Item 1",
      attributes: {
        "attribute-name": "function",
      },
    },
    {
      content: "Menu Item 2",
      attributes: {
        "attribute-name": "function",
      },
    },
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.

object
Items

Generates an array of items, each item is a <bolt-trigger>. While the content prop for each item can accept anything custom content, plain text is the recommended format.

array
  • [items]:
    • Type: object

      A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.

    • Properties:
      • attributes

        A Drupal-style attributes object with extra attributes to append to this component.

        • Type: object
      • content

        Main content of the trigger (Twig only).

        • Type: string, array, object
      • url

        Contains a URL that the link points to. This may also be passed as part of attributes.

        • Type: string
      • target

        Specifies where to display the linked URL. This may also be passed as part of attributes.

        • Type: string
      • type

        Determines the button tag type for semantic buttons

        • Type: string
        • Enum: button, submit, reset
      • cursor

        Type of cursor shown on hover.

        • Type: string
        • Enum: auto, pointer, zoom-in, zoom-out
      • on_click

        The name of a method on the on_click_target.

        • Type: string
      • on_click_target

        className (e.g. "js-click-me") used in querySelector to reference a web component on the page. onClick, the on_click method name will be called on this element.

        • Type: string
      • disabled

        Make trigger unusable and un-clickable. Only applies to button.

        • Type: boolean
Title

Controls the inset spacing of each menu item.

string
Spacing

Controls the inset spacing of each menu item.

string small
  • xsmall, small, medium

menu

Note: this component is usually used inside of a popover. View Popover

menu title variations

Menu title Create a title for the menu by using the title prop. Choose one of these
Menu with xsmall spacing Menu with small spacing Menu with medium spacing

menu use case popover

Popover menu Create a popover menu by combining the Popover and Menu components.

menu use case theming

Menu inside a xdark theme
Choose one of these
Menu inside a dark theme
Choose one of these
Menu inside a light theme
Choose one of these
Menu inside a xlight theme
Choose one of these
Web Component Usage Bolt Menu is a web component, you can simply use <bolt-menu> in the markup to make it render.
Menu item 1 Menu item 2 Menu item 3
<bolt-menu> <bolt-menu-item> Menu item 1 </bolt-menu-item> <bolt-menu-item> Menu item 2 </bolt-menu-item> <bolt-menu-item> Menu item 3 </bolt-menu-item> </bolt-menu>
Prop Usage Configure the menu with the properties specified in the schema.
Menu Options Menu item 1 is a button Menu item 2 is a link
<bolt-menu spacing="medium"> <span slot="title">Menu Options</span> <bolt-menu-item> Menu item 1 is a button </bolt-menu-item> <bolt-menu-item url="https://pega.com"> Menu item 2 is a link </bolt-menu-item> </bolt-menu>

modal docs

2.17.0

Modal

The Modal component presents users with a short task or gathered information without losing context of the underlying page.

The Modal component presents users with a short task or gathered information without losing context of the underlying page. Part of the collection of components, visual styles, and build tools that power the Bolt Design System.

Install via NPM
npm install @bolt/components-modal
  {% include "@bolt-components-button/button.twig" with {
  text: "Open Modal",
  attributes: {
    "on-click": "show",
    "on-click-target": "js-target-name"
  }
} only %}

{% include "@bolt-components-modal/modal.twig" with {
  content: "This is a modal",
  attributes: {
    class: "js-target-name"
  },
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Used to apply additional HTML attributes to the outer <bolt-modal> tag.

object
Width

Controls the width of the modal container.

string optimal
  • full, regular, optimal, auto
Spacing

Controls the spacing around the modal container.

string medium
  • none, small, medium, large
Theme

Controls the color theme of the modal container.

string xlight
  • none, xlight, light, dark, xdark
Scroll

Controls the scrolling area.

string container
  • overall or container
Uuid

Unique ID for modal, randomly generated if not provided.

string
Slots

There are 3 sections (slots) within the modal container. By assigning the appropriate slot name, content will be passed into the respective section.

object
    • default

      The body section of the modal container.

    • header

      The header section of the modal container.

    • footer

      The footer section of the modal container.

Open Accordion Close Accordion
Disabled

Default disabled prop supported globally by most Bolt components.

boolean
No_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean
No-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean

modal

This is the modal container's header.

This is the modal container's body

This is the modal container's body.

This is the modal container's footer.

modal width variations

The modal container's width can be adjusted by the width prop. The default is set to optimal. Width Options
This is a modal set to full width. This is taking up the full width of the screen minus the gutters (about 2rem on left and right).
This is a modal set to regular width. This is 10 out 12 columns wide, about 80% of the screen width.
This is a modal set to optimal width. This is about 75 characters wide, close to optimal reading length.
This is a modal set to auto width. This adjusts to the width of the modal content. In most cases, the user must define a max-width in absolute value (do not use relative value such as %) on the modal content to get the desired results. Recommended for advanced usage.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
The modal container's spacing can be adjusted by the spacing prop. The default is set to medium. Spacing Options
This is a modal set to none spacing. This removes the spacing inside the modal container.
This is a modal set to small spacing. This sets small inset spacing on the modal container.
This is a modal set to medium spacing. This sets medium inset spacing on the modal container.
This is a modal set to large spacing. This sets large inset spacing on the modal container.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).

modal theme variations

The modal container's coloring theme can be adjusted by the theme prop. The default is set to xlight. Theme Options
This is a modal set to none theme. This makes the modal container transparent.
This is a modal set to xlight theme. This sets the xlight theme on the modal container.
This is a modal set to light theme. This sets the light theme on the modal container.
This is a modal set to dark theme. This sets the dark theme on the modal container.
This is a modal set to xdark theme. This sets the xdark theme on the modal container.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
The scrollable area can be adjusted by using the scroll prop. The default is set to container. Scroll Options
Tall image Tall image This makes the overall viewport area scrollable.
Tall image Tall image This makes the modal container itself scrollable.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
Trigger Options
This modal is triggered by a button. The Button component is the standard method to trigger a modal.
A Rock Climber A Rock Climber

Image trigger can be created by wrapping the Trigger component around an Image component.

Advanced usage: if the Image component has an absolute value (e.g. 640px) defined for max_width, then the modal's width prop can be set to auto. This will allow the image inside the modal to be responsive but does not stretch beyond the specified max_width.

Link trigger Link trigger is currently not supported.

modal usage javascript

Custom JavaScript Usage You can write custom JavaScript to target the modal and attach behaviors. The following is an example of how you can use JavaScript to manipulate the Modal component. Please note that Bolt does not ship with any of this custom JavaScript. Demo
Automatically open a modal Use custom JavaScript to automatically open a modal on page load, after a short delay. Click on the "Activate JavaScript" button to see a demo. The page will reload and a modal will open after 3 seconds.

Auto-open Modal

This modal will open 3 seconds after page load.

Custom JavaScript <script> // Add parameter to the URL - demo helper function, not required in production var setAutoOpenModalParam = function(set){ var currentUrl = window.location.href.split('?').shift(); var param = '?showModal=true'; window.location.href = set ? currentUrl + param : currentUrl; } // Get parameter to the URL - demo helper function, not required in production var getUrlParameter = function(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; // Reference to the modal var autoOpenModal = document.querySelector('#js-modal-advanced-auto-open'); // Calls modal 'show' method after a delay var setAutoOpenModal = function(el) { if (getUrlParameter('showModal')) { setTimeout(function(){ el.show(); }, 3000) } } // Callback on modal 'ready' var onModalReady = function(e) { setAutoOpenModal(autoOpenModal); // IMPORTANT: remove this event listener unless you want it called each time the modal component renders e.target.removeEventListener('modal:ready', onModalReady); } // Add 'ready' callback autoOpenModal.addEventListener('modal:ready', onModalReady); </script> Demo
Automatically close a modal Use custom JavaScript to automatically close a modal after a set period of time. Click on the "Open Modal" button to see a demo. The modal will open and automatically close after 3 seconds.

Auto-close Modal

This modal will close 3 seconds after opening.

Custom JavaScript <script> openAutoCloseModal = function() { // Reference to the modal var autoCloseModal = document.querySelector('#js-modal-advanced-auto-close'); // When modal opens, start a timer and close after 3 seconds var onModalShow = function() { setTimeout(function() { autoCloseModal.hide(); // Don't forget to remove the event listener autoCloseModal.removeEventListener('modal:show', onModalShow); }, 3000); }; // Wait for 'modal:show' event and call custom function autoCloseModal.addEventListener('modal:show', onModalShow); if (autoCloseModal._wasInitiallyRendered) { // If modal is ready, show it now autoCloseModal.show(); } else { // Otherwise, wait to show until 'modal:ready' event is emitted autoCloseModal.addEventListener('modal:ready', function() { autoCloseModal.show(); }); } }; </script>
Image Modal Usage <bolt-trigger> is needed to create an image modal that gets triggered from either the Image component or the Device Viewer component. The following are examples of how you can assemble the necessary pieces together. Please note that you should use the width prop on <bolt-modal> to accommodate your needs, optimal width is about 70 characters wide, full width will take up the width of the page.
Enlarge image and show caption Create a thumbnail image trigger and pass a figure with image and caption into the modal content. Note: make sure you upload a high-resolution image (up to 2880px wide) if you intend to show the image as big as possible. Modal width is set to auto and image max-width is set to 1000px.
Image description. Image description.

This is the caption for the image.

Enlarge image (inside device viewer) and show caption Create a device viewer trigger and pass a figure with image and caption into the modal content. Note: make sure you upload a high-resolution image (up to 2880px wide) if you intend to show the image as big as possible. Modal width is set to optimal .
Image description. Image description.

This is the caption for the image.

modal usage video

Video Modal Usage There are two options for playing a video in a modal. Both require some custom JavaScript. Option 1: Modal triggers Video Clicking a button calls a modal's show method. Custom JavaScript listens for the event and plays the video when it happens. Demo
Custom JavaScript <script> // Play the video on modal show, pause on hide const modal1 = document.querySelector('.js-modal-123'); const video1 = document.querySelector('.js-modal-video-123'); modal1.addEventListener('modal:show', function() { video1.play(); }); modal1.addEventListener('modal:hide', function() { video1.pause(); }); </script> Option 2: Video triggers Modal Clicking a button calls a video's toggle method. Custom JavaScript listens for the event and opens the modal when it happens. Demo
Custom JavaScript <script> // Show modal on video toggle, pause on modal hide const modal2 = document.querySelector('.js-modal-456'); const video2 = document.querySelector('.js-modal-video-456'); video2.addEventListener('playing', function() { modal2.show(); }); modal2.addEventListener('modal:hide', function() { video2.pause(); }); </script>

modal usage content

Content Modal Usage Content modals can be as simple as a few lines of text or as complex as a page layout. Note: when using bands inside a modal, the full_bleed prop must be set to false.
Show a simple layout Pass any components inside the modal content to create simple layouts, such as short confirmations, alerts, notifications, etc.

This Is a Headline

This is a paragraph. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

Show a complex layout Create complex layouts with components and layout objects inside the modal content and set the modal width to full to maximize space. For example, you can build a multi-column layout with the grid, band, and card components.

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

This is a paragraph. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

Sign in to view PegaWorld live stream

modal usage form

Form Modal Usage Form modals are best suited for presenting a paywall, signup/login, or content restrictions.
Form only Pass some text and a form into the modal content.

Get the report

(all fields are required)

"on-click": "show", "on-click-target": "js-modal-123"
Web Component Usage Modal is a web component. You can simply use <bolt-modal> in the markup to make it render. In the following examples, we use onclick to trigger the modal. However, the same options shown on the Trigger Options page are also available on the web component.
Open Modal This is a modal.
<bolt-button on-click="show" on-click-target="js-bolt-modal-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-demo"> This is a modal. </bolt-modal>
Basic Usage The modal container has 3 sections (slots) for passing content, header, default, footer. To pass content to either the header or footer, slot must be defined.
Open Modal This is the header This is the body (default). This is the footer
<bolt-button on-click="show" on-click-target="js-bolt-modal-basic-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-basic-demo"> <bolt-text slot="header">This is the header</bolt-text> <bolt-text>This is the body (default).</bolt-text> <bolt-text slot="footer">This is the footer</bolt-text> </bolt-modal>
Trigger Usage When using an open button that comes right before a <bolt-modal>, set onclick to this.nextElementSibling.show(). When using a close button that's inside a <bolt-modal>, set onclick to this.closest('bolt-modal').hide().
Open Modal This modal has a close button along with the content. Close Modal
<bolt-button on-click="show" on-click-target="js-bolt-modal-trigger-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-trigger-demo"> <bolt-text>This modal has a close button along with the content.</bolt-text> <bolt-button on-click="hide">Close Modal</bolt-button> </bolt-modal>
Advanced Usage The web component has all the options shown in the schema table. You can define each prop on the <bolt-modal> element. Use unique combinations to customize a modal to your liking.
Open Modal
<bolt-button on-click="show" on-click-target="js-bolt-modal-advanced-demo"> Open Modal </bolt-button> <bolt-modal width="optimal" spacing="none" theme="none" scroll="overall" class="js-bolt-modal-advanced-demo"> <bolt-image src="/images/content/backgrounds/background-robotics-customer-service.jpg" alt="This is an image"></bolt-image> </bolt-modal>
Server-side Rendered Web Components (Experimental) The Modal component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
Open Modal This is a modal.
{% filter bolt_ssr %} <bolt-button on-click="show" on-click-target="js-bolt-modal-ssr-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-ssr-demo"> This is a modal. </bolt-modal> {% endfilter %}

nav priority

Visualization & Simulation

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Section 1

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 2

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 3

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 4

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 5

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

Section 6

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci.

navbar docs

2.17.0

Navbar

Navbar Component in Bolt

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Navbar is a list of secondary links. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-navbar
  {% include "@bolt-components-navbar/navbar.twig" with {
  title: {
    tag: "h2",
    text: "Title Text",
    icon: {
      name: "icon-name"
    }
  },
  links: [
    {
      text: "Link 1 Text",
      url: "#!"
    },
    {
      text: "Link 2 Text",
      url: "#!"
    },
    {
      text: "Link 3 Text",
      url: "#!"
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Theme

Color theme. Can be set to 'none' for a transparent background.

string dark
  • xlight, light, dark, xdark, none
Title

Navbar title. Icon is optional. Tag can be set to h1 to h6 depending on the page.

object
    • tag
      • h1, h2, h3, h4, h5, h6
    • text
    • icon
        • name

          Name of the (optional) icon to be used.

Center

Determines if you want the Navbar content to be center aligned or not

boolean
  • true or false
Width

Adjusts the Navbar's overall maximum width behavior -- either filling up the entire browser's total screen width (full) or just the component's parent container width (auto).

string full
  • full or auto
Links

(Inherited from nav-priority) Array of links

array
  • [items]:
    • Type: object
    • Properties:
      • text
        • Type: string
      • url
        • Type: string
MoreText

(Inherited from nav-priority) Button text that displays when the Priority+ Nav Dropdown is displayed.

string More
Offset

(Inherited from nav-indicator) Number of pixels taken up by sticky items at the top of the page. Used for smooth scroll and gumshoe.

integer

navbar centered

navbar short

navbar width

The Navbar component's full width option allows the component to span the entire page / screen's width in size -- ideal for sticky nav and overall site navigation.

This full config option for the Navbar component can be combined with the other config options available such as center.

The Navbar component's auto width option allows the component to be used in situations where it doesn't / shouldn't span the browser's entire screen-width in size (ex. in a sidebar or off-canvas nav)

This provides maximum flexibility when coming up with creative solutions.

navbar

navbar theme variation

navbar linked title

Activate linked title by passing in an url

navbar transparent

Remove theme and gradient for a transparent option

ol docs

2.17.0

Ordered List

Ordered-list Component in Bolt

Stylistic numbered list for article content.

Install via NPM
npm install @bolt/components-ol
  {% include "@bolt-components-ol/ol.twig" with {
  items: [
    "Do not include any data or information in your posts that are confidential!",
    "Apply basic practices for collaborative work.",
    "Be honest, respectful, trustworthy and helpful.",
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
ContentItems

Use the items prop instead.

array
  • [items]:
    • Type: object

      A single list item object with either a text or contentItems key

    • Properties:
      • text
        • Type: string
      • contentItems

        Passes to @bolt/text.twig

        • Type: object
Items *

All items can be simple text or items.

array

ol

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ol theme variation

Theme: xlight

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: light

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: dark

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xdark

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: medium

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ol nested items

  1. Do not include any data or information in your posts that are confidential!
  2. Apply basic practices for collaborative work.
  3. Be honest, respectful, trustworthy and helpful.
  4. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.
  5. Answer questions authoritatively and concisely.
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4

ol with web component

Web Component Usage

Bolt Ordered List is a web component, you can simply use <bolt-ol> in the markup to make it render. Its inner content is comprised of <bolt-li>.

Example

<bolt-ol>
  <bolt-li>Item 1</bolt-li>
  <bolt-li>Item 2</bolt-li>
  <bolt-li>Item 3</bolt-li>
  <bolt-li>Item 4</bolt-li>
  <bolt-li>Item 5</bolt-li>
</bolt-ol>

Simple usage

Item 1 Item 2 Item 3 Item 4 Item 5

Nesting of lists (ol and ul)

Item 1 Item 2 Item 3 Item 4 Item 5 Sub Item 1 Sub Item 2 Sub Item 3 Sub Item 4 Item Item Item Item Item Sub Item 5 Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item

Theme variations

Theme: xlight

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: light

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: dark

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: xdark

Item 1 Item 2 Item 3 Item 4 Item 5

page header docs

2.17.0

Page Header

(In Progress) Page Header Component

Component in progress

Install via NPM
npm install @bolt/components-page-header

Content

Set content as arbitrary HTML:

{% set content %}
  <p>Whatever HTML content you want</p>
{% endset %}
  {% include "@bolt-components-page-header/page-header.twig" with {
  content: content
} only %}

pagination docs

2.17.0

Bolt Pagination

Pagination Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-pagination
Source code
View on Github
Dependencies

The sequence of numbers assigned to pages on a search results page. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-pagination
  {% include "@bolt-components-pagination/pagination.twig" with {
  current: 5,
  total: 10,
  first: {
    href: 'page-1-url'
  },
  previous: {
    href: 'page-4-url'
  },
  pages: {
    3: {
      href: 'page-3-url'
    },
    4: {
      href: 'page-4-url'
    },
    5: {
      href: 'page-5-url'
    },
    6: {
      href: 'page-6-url'
    },
    7: {
      href: 'page-7-url'
    }
  },
  next: {
    href: 'page-6-url'
  },
  last: {
    href: 'page-10-url'
  }
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Align

Horizontally align the items.

string center
  • start, end, center
Total *

Total pages within the pagination

integer
Current *

Current page selected

integer
Pages *

A keyed array of page item objects where the key is the page number

array , object
First

A link object for the first page

object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence).

    • attributes

      A Drupal-style attributes object for this link.

Previous

A link object for the previous page (e.g. if on page 3, this links to page 2)

object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence)

    • attributes

      A Drupal-style attributes object for this link.

Next

A link object for the next page (e.g. if on page 3, this links to page 4)

object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence)

    • attributes

      A Drupal-style attributes object for this link.

Last

A link object for the last page

object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence)

    • attributes

      A Drupal-style attributes object for this link.

PreviousText

Text to be displayed for the previous anchor

string Previous
NextText

Text to be displayed for the next anchor

string Next

pagination

Internationalization Support

For better internationalization support, align prop uses the start (left) and end (right) vocab. This helps the pagination to have the desired alignment regardless of the writing direction of the language being displayed.

Align start

Align end

Align center

Pagination on the Left, Something on the Right

In this case, you must set the align prop to be start so it is not centered within the cell.

Bolt Placeholder Example
xsmall Placeholder small Placeholder medium Placeholder large Placeholder xlarge Placeholder
Bolt Placeholder Example Bolt Placeholder Example

placeholder component

Bolt Placeholder Example

popover docs

2.17.0

Popover

A small overlay that opens on demand.

Popover is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-popover
  {% include "@bolt-components-popover/popover.twig" with {
  trigger: "This is the popover trigger",
  content: "This is the popover content."
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-popover> tag.

object
Trigger

Renders the trigger of the popover.

object
Content

Renders the content of the popover.

any
Placement

Sets the preferred placement of the popover. The actual placement of the popover will be automatically adjusted based on the space available on screen.

string bottom
  • auto, top-start, top, top-end, left-start, left, left-end, right-start, right, right-end, bottom-start, bottom, bottom-end
Spacing

Controls the spacing around the popover content.

string small
  • none, xsmall, small, medium
Boundary

Optionally allows you to specify a parent element's CSS selector to use as an outer boundary when calculating placement.

string
FallbackPlacements

An array of different placement options that Popper.js should try if there isn't enough space for the ideal placement. Normally this defaults to all placement options however this lets you limit the options to pick from in certain situations.

array
Uuid

Unique ID for popover, randomly generated if not provided.

string

popover

Preferred placement
Auto placement
Content spacing Adjust the inset spacing of the content by using the spacing prop.

popover use case menu

Popover menu Create a popover menu by combining the Popover and Menu components.
Web Component Usage Bolt Popover is a web component, you can simply use <bolt-popover> in the markup to make it render.
This triggers a popover
Content This is the content of the popover with a call to action.
<bolt-popover> <bolt-button size="small"> This triggers a popover </bolt-button> <div slot="content"> <bolt-text headline font-size="small">Content</bolt-text> <bolt-text font-size="xsmall">This is the content of the popover with a <bolt-link url="https://pega.com">call to action</bolt-link>.</bolt-text> </div> </bolt-popover>
Prop Usage Configure the popover with the properties specified in the schema.
Popover Menu
Menu Item 1 Menu Item 2 Menu Item 3
<bolt-popover spacing="none" placement="top-start"> <bolt-button size="small"> Popover Menu </bolt-button> <div slot="content"> <bolt-menu> <bolt-menu-item> Menu Item 1 </bolt-menu-item> <bolt-menu-item> Menu Item 2 </bolt-menu-item> <bolt-menu-item> Menu Item 3 </bolt-menu-item> </bolt-menu> </div> </bolt-popover>

ratio docs

ratio no shadow

ratio 1x1

ratio 4x3

ratio

search filter docs

Search Filter

Search Filter Component in Bolt

A wrapper for search filters that primarily handles mobile behavior. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

NOTE: as of this writing, this component is used only for internal Bolt demos and not in any actual search. It may require some modification to be usable in the real world.

Install via NPM
npm install @bolt/search-filter
  {% include "@bolt-components-search-filter/search-filter.twig" with {
  "content": "Insert search filters here."
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Content

Renderable content (e.g. a string, render array, or included pattern) to display within a modal at mobile breakpoints. Typically, this is where the filters themselves go.

search filter

share docs

Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-share

Description

The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

OG Tags

Example

<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="https://boltdesignsystem.com/some-page-title-here" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta name="twitter:site" content="@pega" />

Best Practices

  • Don't use the share tool with a page's related sections
  • Implement any "stickiness" and placement functionality on the platform the component is being used in
  • For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
  • Don't have the fixed position of the component overlap any "related content"
  {% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse"
    },
    {
      name: "twitter",
      url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
    },
    {
      name: "linkedin",
      url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
    },
    {
      name: "email",
      url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
    }
  ],
  copy_to_clipboard: {
    text_to_copy: "https://boltdesignsystem.com"
  },
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Text

Defines the label text in front of the social icons.

string Share this page
Size

Controls the size of icons and spacing.

string medium
  • small or medium
Align

Controls the horizontal alignment of label text and icons.

string start
  • start, center, end
Opacity

Controls the overall transparency of the share tool.

integer 100
  • 100, 80, 60, 40, 20
Sources

Social media sources to share to.

array
  • [items]:
    • Type: object
    • Properties:
      • name

        Name of the social media source.

        • Type: string
        • Enum: facebook, twitter, linkedin, email
      • url

        The specifically formed share URL with query string.

        • Type: string
Copy_to_clipboard object
  • @bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.


      Type: object
    • text

      This property has been renamed trigger_text


      Type: string
    • copiedText

      Use the custom_confirmation property instead if you need to change the confirmation text.


      Type: string
    • iconSize

      Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size.


      Type: string
    • url

      This property has been renamed text_to_copy


      Type: string
    • trigger_text

      Text to use for the inital copy button. Ignored if the custom_trigger property is used.


      Type: string
    • text_to_copy

      The text to copy to the clipboard.


      Type: string
    • custom_trigger

      (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed.


      Type: string, object, array
    • custom_transition

      (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon.


      Type: string, object, array
    • custom_confirmation

      (optional) Custom content to show after a successful copy.


      Type: string, object, array
Inline

Button version has been removed so this prop is no longer needed.

CopyToClipboard

Please use copy_to_clipboard.

share

share size variations

Small Size

Medium Size

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

share align variations

Align: start

Align: center

Align: end

share custom label

share theme variations

xdark

dark

light

xlight

stack docs

2.17.0

Stack

A container component that defines spacing between elements vertically

Published

History
View changes
Install
yarn add @bolt/components-stack
Source code
View on Github
Dependencies

A container component that defines spacing between elements vertically.. Part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-stack
  {% include "@bolt-components-stack/stack.twig" with {
  content: "This is one stack."
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-stack> tag.

object
Spacing

Control the spacing in between items.

string medium
  • xlarge, large, medium, small, xsmall, none
Content

Content of the stack.

string , array , object
Open Accordion Close Accordion
No_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean
No-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

boolean

stack

This is one stack. A stack spans the full width of its parent container.
This is another stack.

Multiple stacks with xlarge spacing

This stack has xlarge spacing.
This stack has xlarge spacing.
This stack has xlarge spacing.

Multiple stacks with large spacing

This stack has large spacing.
This stack has large spacing.
This stack has large spacing.

Multiple stacks with medium spacing

This stack has medium spacing.
This stack has medium spacing.
This stack has medium spacing.

Multiple stacks with small spacing

This stack has small spacing.
This stack has small spacing.
This stack has small spacing.

Multiple stacks with xsmall spacing

This stack has xsmall spacing.
This stack has xsmall spacing.
This stack has xsmall spacing.

Multiple stacks with none spacing

This stack has none spacing.
This stack has none spacing.
This stack has none spacing.

sticky docs

2.17.0

Sticky

Sticky Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-sticky
Source code
View on Github
Dependencies

Sticky makes any component sticky to the top of the page. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-sticky
  {% embed "@bolt-components-sticky/sticky.twig" %}
  {% block sticky_content %}

    // Sticky content

  {% endblock %}
{% endembed %}

table docs

2.17.0

Table

Table Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-table
Source code
View on Github
Dependencies

Table layout for tabular content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-table
  {% include "@bolt-components-table/table.twig" with {
  headers: {
    top: {
      cells: [
        "Column 1",
        "Column 2",
        "Column 3",
      ]
    },
    side: {
      cells: [
        "Row 1",
        "Row 2",
        "Row 3",
        "Footer",
      ]
    }
  },
  rows: [
    {
      cells: [
        "R1C1",
        "R1C2",
        "R1C3",
      ]
    },
    {
      cells: [
        "R2C1",
        "R2C2",
        "R2C3",
      ]
    },
    {
      cells: [
        "R3C1",
        "R3C2",
        "R3C3",
      ]
    }
  ],
  footer: {
    cells: [
      "FC1",
      "FC2",
      "FC3",
    ]
  }
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Headers

Generates top and side headers, each can contain an array of cells.

object
    • top
        • cells

          Each item represents a cell in the top header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys.

          • [items]:
            • Type: any
            • Properties:
              • content
                • Type: string
              • attributes
                • Type: object
    • side
        • cells

          Each item represents a cell in the side header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys

          • [items]:
            • Type: any
            • Properties:
              • content
                • Type: string
              • attributes
                • Type: object
Rows *

Generates an array of rows, each can contain an array of cells.

array
    • cells

      Each item represents a cell in a row. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys

      • [items]:
        • Type: any
        • Properties:
          • content
            • Type: string
          • attributes
            • Type: object
Footer

Generates a table footer, can contain an array of cells.

object
    • cells

      Each item represents a cell in the footer. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys

      • [items]:
        • Type: any
        • Properties:
          • content
            • Type: string
          • attributes
            • Type: object
Format

Display either a regular table or a more complex numeric table.

string regular
  • regular or numeric
Borderless

Removes the vertical border in between cells.

boolean false
  • true or false
First_col_fixed_width

Sets the width of the first column to be as wide as the longest text.

boolean false
  • true or false

table

With Rows Only

R1C1 R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 R3C2 R3C3

With Top Headers

Column 1 Column 2 Column 3
R1C1 R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 R3C2 R3C3

With Side Headers

Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3

With Top and Side Headers

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3

With Headers and Footer

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

Real Example

Item number Description Assemblies
Build 2.0.1.0 — SR-49969 SR-49941 This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. OpenSpan.UpdaterService.Remoting.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.Git.dll
OpenSpan.VersionFinder.exe
OpenSpan.UpdaterService.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.Initializer.exe
Build 1.1.360 — SR-44891 SR-44869 This hotfix changes the system to better handle long file names. It also enhances VersionFinder to sort the list of branches, making it easier to find a specific branch. OpenSpan.Updater.Git.dll
SR-43163 This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated. OpenSpan.Updater.Git.dll
OpenSpan.Updater.Initializer.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.PreReqCheck.dll
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ServerClientInterface.Tester.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.UpdaterService.Remoting.dll
OpenSpan.UpdaterService.exe
Build 1.1.354 — SR-44889 SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll

Numeric format is recommended for a table with numbers only, such as box scores.

Regular Format

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Numeric Format

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

table borderless

Remove the vertical border in between cells.

Description Team Vehicle Form
Optimus Prime The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron. Autobots Peterbilt Truck
Bumblebee One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons. Autobots VW Beetle

Set column widths to be flexible.

Prop Description Type
attributes Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
headers Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
rows Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. array
format Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. string

Set the width of the first column to be as wide as the longest text.

Prop Description Type
attributes Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
headers Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. object
rows Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. array
format Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. string

table cell attributes

Add attributes to table cells.

This cell spans 2 columns and has an utility class. Column 3 Column 4
Row 1 R1C1 R1C2 This cell spans 2 columns and has an utility class.
Row 2 R2C1 R2C2 This cell spans 2 columns, 2 rows and has an utility class.
Row 3 R3C1 R3C2
Footer This cell spans 2 columns and has an utility class. FC3 FC4

table theme variations

xdark

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

dark

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

light

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

xlight

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

table item variations

Pass different items into cells

Item number Description Assemblies

Build 2.0.1.0 — SR-49969

SR-49941 This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. OpenSpan.UpdaterService.Remoting.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.Git.dll
OpenSpan.VersionFinder.exe
OpenSpan.UpdaterService.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.Initializer.exe
Build 2.0.1.0 — SR-49969 SR-44869 OpenSpan.Updater.Git.dll
Build 1.1.360 — SR-44891 SR-43163 This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated. A Rock Climber A Rock Climber
SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll
Web Component Usage Bolt Table is a web component that renders a semantic table with Bolt styles. To make a simple table, wrap a semantic <table> element with a <bolt-table> element.
Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
<bolt-table> <table> <thead> <tr> <td></td> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <th>Row 2</th> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> <tr> <th>Row 3</th> <td>R3C1</td> <td>R3C2</td> <td>R3C3</td> </tr> </tbody> <tfoot> <tr> <th>Footer</th> <td>FC1</td> <td>FC2</td> <td>FC3</td> </tr> </tfoot> </table> </bolt-table>
Prop Usage Configure the table with the properties specified in the schema.
Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5
<bolt-table format="numeric" borderless> <table> <thead> <tr> <td></td> <td>Pts</td> <td>Reb</td> <td>Ast</td> <td>Stl</td> <td>Blk</td> </tr> </thead> <tbody> <tr> <th>Michael Jordan</th> <td>70</td> <td>10</td> <td>2</td> <td>5</td> <td>1</td> </tr> <tr> <th>Toni Kukoc</th> <td>21</td> <td>15</td> <td>10</td> <td>3</td> <td>4</td> </tr> <tr> <th>Steve Kerr</th> <td>5</td> <td>2</td> <td>20</td> <td>5</td> <td>0</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>91</td> <td>27</td> <td>32</td> <td>13</td> <td>5</td> </tr> </tfoot> </table> </bolt-table>
Advanced Usage Attributes and utility classes are supported on table headers and cells.
This cell spans 2 columns and has an utility class. Column 3 Column 4
Row 1 R1C1 R1C2 This cell spans 2 columns and has an utility class.
Row 2 R2C1 R2C2 This cell spans 2 columns, 2 rows and has an utility class.
Row 3 R3C1 R3C2
Footer This cell spans 2 columns and has an utility class. FC3 FC4
<bolt-table> <table> <thead> <tr> <td></td> <th colspan="2" class="u-bolt-color-indigo-light"> This cell spans 2 columns and has an utility class. </th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td>R1C1</td> <td>R1C2</td> <td colspan="2" class="u-bolt-color-orange-dark"> This cell spans 2 columns and has an utility class. </td> </tr> <tr> <th>Row 2</th> <td>R2C1</td> <td>R2C2</td> <td colspan="2" rowspan="2" class="u-bolt-color-orange-dark"> This cell spans 2 columns, 2 rows and has an utility class. </td> </tr> <tr> <th>Row 3</th> <td>R3C1</td> <td>R3C2</td> </tr> </tbody> <tfoot> <tr> <th>Footer</th> <td colspan="2" class="u-bolt-color-teal"> This cell spans 2 columns and has an utility class. </td> <td>FC3</td> <td>FC4</td> </tr> </tfoot> </table> </bolt-table>
Accepted Data Each table header or cell can accept any Bolt web components, HTML markup, or just plain text.
Item number Description Assemblies
Build 2.0.1.0 — SR-49969 SR-49941 This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. OpenSpan.UpdaterService.Remoting.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.Git.dll
OpenSpan.VersionFinder.exe
OpenSpan.UpdaterService.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.Initializer.exe
Build 2.0.1.0 — SR-49969 SR-44869 OpenSpan.Updater.Git.dll
Build 1.1.360 — SR-44891 SR-43163 This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated.
SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll
<bolt-table first-col-fixed-width> <table> <thead> <tr> <td></td> <th>Item number</th> <th>Description</th> <th>Assemblies</th> </tr> </thead> <tbody> <tr> <th> <bolt-text headline font-size="small" text-transform="uppercase" letter-spacing="wide"> Build 2.0.1.0 — SR-49969 </bolt-text> </th> <td> <bolt-button size="small" url="#!">SR-49941</bolt-button> </td> <td> This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. </td> <td> OpenSpan.UpdaterService.Remoting.dll<br> OpenSpan.Updater.ServerClientInterface.dll<br> OpenSpan.Updater.ScheduledTasks.dll<br> OpenSpan.Updater.PrePostOperation.dll<br> OpenSpan.Updater.Git.dll<br> OpenSpan.VersionFinder.exe<br> OpenSpan.UpdaterService.exe<br> OpenSpan.Updater.X509tool.exe<br> OpenSpan.Updater.UserHelper.exe<br> OpenSpan.Updater.UninstallHelper.exe<br> OpenSpan.Updater.RuntimeLauncher.exe<br> OpenSpan.Updater.InstallHelper.exe<br> OpenSpan.Updater.Initializer.exe </td> </tr> <tr> <th>Build 2.0.1.0 — SR-49969</th> <td>SR-44869</td> <td> <img src="http://fillmurray.com/200/200"> </td> <td>OpenSpan.Updater.Git.dll</td> </tr> <tr> <th rowspan="2">Build 1.1.360 — SR-44891</th> <td>SR-43163</td> <td> This hotfix adds a list of post-update tasks to the <span>RuntimeConfig.xml </span>file. These tasks are run after files that match a pattern you specify are updated. </td> <td> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-50.jpg 50w, /images/placeholders/tout-4x3-climber-100.jpg 100w, /images/placeholders/tout-4x3-climber-200.jpg 200w, /images/placeholders/tout-4x3-climber-320.jpg 320w, /images/placeholders/tout-4x3-climber-480.jpg 480w, /images/placeholders/tout-4x3-climber-640.jpg 640w" alt="A Rock Climber" ratio="64/48"></bolt-image> </td> </tr> <tr> <td> <bolt-chip tag="a" url="#!">SR-44850</bolt-chip> </td> <td> This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. </td> <td>ManagedOpenSsl.dll</td> </tr> </tbody> </table> </bolt-table>

tabs docs

2.17.0

Tabs

Tabs organize multiple panels of related content, allowing users to view one panel at a time.

Install via NPM
npm install @bolt/components-tabs
  {% include "@bolt-components-tabs/tabs.twig" with {
  panels: [
    {
      label: "Tab label 1",
      content: "Tab panel 1.",
    },
    {
      label: "Tab label 2",
      content: "Tab panel 2.",
    },
    {
      label: "Tab label 3",
      content: "Tab panel 3.",
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Panels

All of the tab panels. Each panel should contain a label and content.

array
  • [items]:
    • Type: object
    • Properties:
      • label

        Tab label used in the navigation. Twig only.

        • Type: string
      • content

        Tab panel content.

        • Type: string, object, array
      • selected

        Set active state on tab. Only one active tab allowed at a time. Defaults to first tab.

        • Type: boolean
Align

Horizontal alignment of tab labels.

string start
  • start, center, end
Label_spacing

Set label spacing.

string small
  • small or medium
Panel_spacing

Set panel spacing.

string small
  • none, small, medium
Inset

Controls spacing placement on tab labels and panels.

string auto
  • auto, on, off
Selected_tab - Minimum is 1

Set selected tab by number. To select the second tab, set to 2.

integer 1

tabs

Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs inset

The inset prop controls how label_spacing and panel_spacing are applied. When set to auto (default), there is inset spacing around labels and no inset spacing around panels, which means panels are flush with the edges of the parent container. When set to on, spacing is applied around the labels as well as the panels. This works well in a container which has no inner padding of its own. When set to off, all inset spacing is turned off. label_spacing applies between labels rather than around them, and panel_spacing only applies above the panel, making the panel flush with the edges of the parent container. Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Use label_spacing and panel_spacing props, in conjunction with inset, to set spacing around tab labels and panels. See Inset variations page for more on the inset prop.
Label spacing Use label_spacing to set spacing around (or between) tab labels.
Spacing: small
Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Spacing: medium
Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Panel spacing Use panel_spacing to set spacing around tab panels.
Spacing: none
Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Spacing: small
Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Spacing: medium
Inset: auto
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: on
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Inset: off
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs align

Align: start
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Align: center
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Align: end
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs theme

Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.

tabs content

A teaser

Eyebrow

This is a headline.

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

A table
Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
An image
Mountains Mountains
A video
Tabs
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
An accordion
This is the accordion content.
This is the accordion content.
This is the accordion content.
A carousel
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Previous Next
Tab label 1
Tab panel
Tab label 2
Tab panel
A very long tab label
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel
Tab label 1
Tab panel
Tab label 2
Tab panel
Tab label 3
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel

tabs selected tab

Use selected_tab prop to pre-selected a tab by number. To select the second tab, set selected_tab to 2. Defaults to first.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Tabbed Band A Tabbed Band is a high-level content container that utilizes a specific configuration of the Band and the Tabs components. Tabs will need the following props: inset: "off", label_spacing: "medium", panel_spacing: "medium",

This is a Tabbed Band

This is Tab 1

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

This is Tab 2
Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

This is Tab 3

Customer Decision Hub

Infuse real-time AI into every customer engagement

There’s nothing artificial about Pega’s proven AI. This always-on brain gets results. Using pragmatic artificial intelligence and decision management, you can improve response rates by up to 6X, NPS by 30 points, and get ROI as high as 500%.

Call to Action

tabs web component

Web Component Usage Tabs is a web component. Add the <bolt-tabs> element containing multiple <bolt-tabs-panel> elements to create a set of tabs. Inside each <bolt-tab-panel> mark the "label" content with the attribute slot="label". Everything else is considered tab "content".
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<bolt-tabs> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Prop Usage Configure the tabs with the properties specified in the schema.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<bolt-tabs panel-spacing="small" align="center"> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Advanced Usage Two advanced options are shown below. Automatically show a <bolt-tab-panel> by setting selected-tab on <bolt-tabs> or by adding selected to a single <bolt-tab-panel>.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<!-- Use `selected-tab` to set selected tab --> <bolt-tabs selected-tab="2"> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs> <!-- Use `selected` to set selected tab --> <bolt-tabs> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel selected> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>

teaser docs

2.17.0

Teaser

Teaser Component

Teaser block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-teaser
  {% include "@bolt-components-teaser/teaser.twig" with {
  content: "Body text. 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.",
  buttons: [
    {
      pattern: "button",
      style: "primary",
      text: "CTA 1"
    },
    {
      pattern: "button",
      style: "secondary",
      text: "CTA 2"
    }
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Eyebrow

Eyebrow text component

object
  • @bolt-components-headline/headline.schema.yml > Object details
    • text

      Renderable text content of the headline.


      Type: string, object, array
    • tag

      Html tag.


      Type: string
      • h1, h2, h3, h4, h5, h6, p, span, cite, div
    • align

      Text alignment.


      Type: string
      • left, center, right
    • weight

      Font weights.


      Type: string
      • light, bold, regular, semibold
    • style

      Font styles.


      Type: string
      • normal or italic
    • size

      Font size.


      Type: string
      • xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
    • autoshrink

      Automatically shrink the font size used in the xxxlarge headline size when 60 or more characters are used.


      Type: boolean
    • transform

      Text transformation.


      Type: string
      • uppercase, lowercase, capitalize
    • url

      If provided, turns headline into a link to given url.


      Type: string
    • icon

      Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by @bolt-components-icon or 3) the string "none" to explicitly remove default icons


      Type:
    • quoted

      Adds quoted styling to text.


      Type: boolean
Headlines

An array of headline component objects

array
  • [items]:
    • Type: object

      Headline text components

    • Properties:
Logo

Bolt logo component

object
  • @bolt-components-logo/logo.schema.yml > Object details
    • invert

      Set to true to invert the logo colors.


      Type: boolean
Content

Body text of teaser

string
ContentItems

Array of content item objects

array
  • [items]:
    • Type: object
    • Properties:
Buttons

An array of button component objects

array
  • [items]:
    • Type: object

      A button

    • Properties:

teaser

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

teaser variation

Eyebrow

This is a headline.

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

text docs

2.17.0

Text

Text Component in Bolt

Text component v2. This is still in progress and only available as a web component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-text
  <bolt-text>
  This is text.
</bolt-text>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Text *

Text content of the headline.

string
Tag

HTML semantic tags.

string p
  • h1, h2, h3, h4, h5, h6, p, div, span, cite
Display

Inline text or a block of text.

string block
  • inline or block
Color

Text color in context of theme colors.

string theme-body
  • theme-headline or theme-body
Align

Text alignment.

string inherit
  • inherit, start, center, end
Opacity

Opacity level.

number 100
  • 100, 80, 60, 40, 20
Quoted

Quoted text.

boolean false
  • true or false
Line-height

Line height in context of the typographic design.

string regular
  • tight, regular, loose
Letter-spacing

Letter spacing in context of the typographic design.

string regular
  • narrow, regular, wide
Text-transform

Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case.

string regular
  • regular, uppercase, lowercase, capitalize
Font-family

Font family in context of the typographic design.

string body
  • headline, body, code
Font-size

Font size in context of the typographic design.

string medium
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
Font-weight

Font weight in context of the typographic design.

string regular
  • regular, semibold, bold
Font-style

Emphasized text.

string regular
  • regular or italic
Headline

A preset for headlines in context of the typographic design.

boolean false
  • true or false
Subheadline

A preset for subheadlines in context of the typographic design.

boolean false
  • true or false
Eyebrow

A preset for eyebrow in context of the typographic design.

boolean false
  • true or false
Url

If provided, turns headline into a link to given url.

string
Util

Each item in the array will build a utility class. No need to include u-bolt-. For the web component use comma separated string.

array

text

Web Component Usage Bolt Text is a web component, you can simply use <bolt-text> in the markup to make it render.
This is text.
<bolt-text> This is text. </bolt-text>
Typographic Design The following are the official recipes for each piece of our typography. They will cover all common use cases. Only in edge cases, you'd want to break away and create your own recipes. Headlines
This Is the XXXLarge Headline This Is the XXLarge Headline This Is the XLarge Headline This Is the Large Headline This Is the Small Headline This Is the XSmall Headline
<bolt-text headline font-size="xxxlarge"> This Is the XXXLarge Headline </bolt-text> <bolt-text headline font-size="xxlarge"> This Is the XXLarge Headline </bolt-text> <bolt-text headline font-size="xlarge"> This Is the XLarge Headline </bolt-text> <bolt-text headline font-size="large"> This Is the Large Headline </bolt-text> <bolt-text headline font-size="small"> This Is the Small Headline </bolt-text> <bolt-text headline font-size="xsmall" text-transform="uppercase" letter-spacing="wide"> This Is the XSmall Headline </bolt-text>
Subheadlines
This Is the XXLarge Subheadline This Is the XLarge Subheadline This Is the Large Subheadline
<bolt-text subheadline font-size="xxlarge"> This Is the XXLarge Subheadline </bolt-text> <bolt-text subheadline font-size="xlarge"> This Is the XLarge Subheadline </bolt-text> <bolt-text subheadline font-size="large"> This Is the Large Subheadline </bolt-text>
Eyebrow
This Is the Eyebrow
<bolt-text eyebrow> This Is the Eyebrow </bolt-text>
Teaser Teaser is a combination of text with clear information architecture. It is commonly used as a quick summary that draws the reader to a longer piece of content.
This is an eyebrow This is a headline This is a subheadline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.
<bolt-text eyebrow> This is an eyebrow </bolt-text> <bolt-text headline font-size="xxxlarge"> This is a headline </bolt-text> <bolt-text subheadline font-size="xxlarge"> This is a subheadline </bolt-text> <bolt-text> This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. </bolt-text>

text tag variations

Tag Usage <bolt-text> allows for separation of semantics and visual. Using a semantically correct tag will not affect the appearance of the text.
This text has its tag prop defined as: h1
<bolt-text tag="h1"> This text has its tag prop defined as: h1 </bolt-text>
This text has its tag prop defined as: h2
<bolt-text tag="h2"> This text has its tag prop defined as: h2 </bolt-text>
This text has its tag prop defined as: h3
<bolt-text tag="h3"> This text has its tag prop defined as: h3 </bolt-text>
This text has its tag prop defined as: h4
<bolt-text tag="h4"> This text has its tag prop defined as: h4 </bolt-text>
This text has its tag prop defined as: h5
<bolt-text tag="h5"> This text has its tag prop defined as: h5 </bolt-text>
This text has its tag prop defined as: h6
<bolt-text tag="h6"> This text has its tag prop defined as: h6 </bolt-text>
This text has its tag prop defined as: p
<bolt-text tag="p"> This text has its tag prop defined as: p </bolt-text>
This text has its tag prop defined as: div
<bolt-text tag="div"> This text has its tag prop defined as: div </bolt-text>
This text has its tag prop defined as: span
<bolt-text tag="span"> This text has its tag prop defined as: span </bolt-text>
This text has its tag prop defined as: cite
<bolt-text tag="cite"> This text has its tag prop defined as: cite </bolt-text>
Display Usage <bolt-text> can be defined as a paragraph of text (block display) or a piece of inline text (inline display).
This paragraph of text has block display, which means it will take up the full width of its container. This paragraph of text also has block display, but within this paragraph, certain text can be inline display, and it can be styled differently than the rest of the paragraph.
<bolt-text display="block"> This paragraph of text has block display, which means it will take up the full width of its container. </bolt-text> <bolt-text display="block"> This paragraph of text also has block display, but within this paragraph, certain text can be <bolt-text display="inline" font-weight="bold" text-transform="uppercase">inline display</bolt-text>, and it can be styled differently than the rest of the paragraph. </bolt-text>

text color variations

Color Usage <bolt-text> can be colored accordingly based on theming. It can either take on a particular theme's headline color or body text color.
This text has its color prop defined as: theme-headline
<bolt-text color="theme-headline" font-weight="bold" font-size="large"> This text has its color prop defined as: theme-headline </bolt-text>
This text has its color prop defined as: theme-body
<bolt-text color="theme-body" font-weight="bold" font-size="large"> This text has its color prop defined as: theme-body </bolt-text>

text align variations

Align Usage <bolt-text> can be aligned horizontally. This only applies if display is set to block.
This text has its align prop defined as: inherit
<bolt-text display="block" align="inherit"> This text has its align prop defined as: inherit </bolt-text>
This text has its align prop defined as: start
<bolt-text display="block" align="start"> This text has its align prop defined as: start </bolt-text>
This text has its align prop defined as: center
<bolt-text display="block" align="center"> This text has its align prop defined as: center </bolt-text>
This text has its align prop defined as: end
<bolt-text display="block" align="end"> This text has its align prop defined as: end </bolt-text>
Opacity Usage <bolt-text> can be adjusted in terms of opacity. The options are synced with Bolt's opacity scale.
This text has its opacity prop defined as: 100
<bolt-text opacity="100"> This text has its opacity prop defined as: 100 </bolt-text>
This text has its opacity prop defined as: 80
<bolt-text opacity="80"> This text has its opacity prop defined as: 80 </bolt-text>
This text has its opacity prop defined as: 60
<bolt-text opacity="60"> This text has its opacity prop defined as: 60 </bolt-text>
This text has its opacity prop defined as: 40
<bolt-text opacity="40"> This text has its opacity prop defined as: 40 </bolt-text>
This text has its opacity prop defined as: 20
<bolt-text opacity="20"> This text has its opacity prop defined as: 20 </bolt-text>

text quoted

Quote Usage <bolt-text> can be turned into a quote by using the quoted boolean prop.
This text is quoted. This headline text is also quoted.
<bolt-text quoted> This text is quoted. </bolt-text> <bolt-text headline quoted> This headline text is also quoted. </bolt-text>
Line-height Usage <bolt-text> has a few options for leading (line-height). Leading can be adjusted for legibility. The default is regular.
This text has
its line-height
prop defined as:
tight
<bolt-text line-height="tight"> This text has<br> its line-height<br> prop defined as:<br> tight </bolt-text>
This text has
its line-height
prop defined as:
regular
<bolt-text line-height="regular"> This text has<br> its line-height<br> prop defined as:<br> regular </bolt-text>
This text has
its line-height
prop defined as:
loose
<bolt-text line-height="loose"> This text has<br> its line-height<br> prop defined as:<br> loose </bolt-text>
Letter-spacing Usage <bolt-text> has a few options for the spacing in between letters. It can be adjusted for legibility. The default is regular.
This text has its letter-spacing prop defined as: narrow
<bolt-text letter-spacing="narrow"> This text has its letter-spacing prop defined as: narrow </bolt-text>
This text has its letter-spacing prop defined as: regular
<bolt-text letter-spacing="regular"> This text has its letter-spacing prop defined as: regular </bolt-text>
This text has its letter-spacing prop defined as: wide
<bolt-text letter-spacing="wide"> This text has its letter-spacing prop defined as: wide </bolt-text>
Text-transform Usage <bolt-text> has a few options for transforming letter case. It can be adjusted for legibility. The default is regular.
This text has its text-transform prop defined as: regular
<bolt-text text-transform="regular"> This text has its text-transform prop defined as: regular </bolt-text>
This text has its text-transform prop defined as: uppercase
<bolt-text text-transform="uppercase"> This text has its text-transform prop defined as: uppercase </bolt-text>
This text has its text-transform prop defined as: lowercase
<bolt-text text-transform="lowercase"> This text has its text-transform prop defined as: lowercase </bolt-text>
This text has its text-transform prop defined as: capitalize
<bolt-text text-transform="capitalize"> This text has its text-transform prop defined as: capitalize </bolt-text>
Font-family Usage <bolt-text> has a few options to change typefaces. These options are relative to the types of text such as heading, body, and code. Each type is linked to a specific typeface. This method accounts for our evolving brand.
This text has its font-family prop defined as: headline
<bolt-text font-family="headline"> This text has its font-family prop defined as: headline </bolt-text>
This text has its font-family prop defined as: body
<bolt-text font-family="body"> This text has its font-family prop defined as: body </bolt-text>
This text has its font-family prop defined as: code
<bolt-text font-family="code"> This text has its font-family prop defined as: code </bolt-text>
Font-size Usage <bolt-text> has font-size options to indicate information hierarchy.
This text has its font-size prop defined as: xsmall
<bolt-text font-size="xsmall"> This text has its font-size prop defined as: xsmall </bolt-text>
This text has its font-size prop defined as: small
<bolt-text font-size="small"> This text has its font-size prop defined as: small </bolt-text>
This text has its font-size prop defined as: medium
<bolt-text font-size="medium"> This text has its font-size prop defined as: medium </bolt-text>
This text has its font-size prop defined as: large
<bolt-text font-size="large"> This text has its font-size prop defined as: large </bolt-text>
This text has its font-size prop defined as: xlarge
<bolt-text font-size="xlarge"> This text has its font-size prop defined as: xlarge </bolt-text>
This text has its font-size prop defined as: xxlarge
<bolt-text font-size="xxlarge"> This text has its font-size prop defined as: xxlarge </bolt-text>
This text has its font-size prop defined as: xxxlarge
<bolt-text font-size="xxxlarge"> This text has its font-size prop defined as: xxxlarge </bolt-text>
Font-style Usage <bolt-text> has font-style options to indicate simple emphasis.
This text has its font-style prop defined as: regular
<bolt-text font-style="regular"> This text has its font-style prop defined as: regular </bolt-text>
This text has its font-style prop defined as: italic
<bolt-text font-style="italic"> This text has its font-style prop defined as: italic </bolt-text>
Font-weight Usage <bolt-text> has font-weight options to indicate emphasis hierarchy.
This text has its font-weight prop defined as: regular
<bolt-text font-weight="regular"> This text has its font-weight prop defined as: regular </bolt-text>
This text has its font-weight prop defined as: semibold
<bolt-text font-weight="semibold"> This text has its font-weight prop defined as: semibold </bolt-text>
This text has its font-weight prop defined as: bold
<bolt-text font-weight="bold"> This text has its font-weight prop defined as: bold </bolt-text>
Server-side Rendered Web Components (Experimental) The <bolt-text> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
This is text.
{% filter bolt_ssr %} <bolt-text> This is text. </bolt-text> {% endfilter %}

toc docs

2.17.0

Table of Contents

Table of Contents is a navigation list, usually found on an article page, of its section titles.

Published

History
View changes
Install
yarn add @bolt/components-toc
Source code
View on Github
Dependencies

Table of Contents is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-toc
  {% include "@bolt-components-toc/toc.twig" with {
  items: [
    {
      text: "Section 1",
      url: "#section-1"
    },
    {
      text: "Section 2",
      url: "#section-2"
    },
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.

object
Items

Generates an array of items. The items represent the headlines of top level sections in an article.

array
  • [items]:
    • Type: object

      Renders a linked item that points to the beginning of a particular section.

    • Properties:
      • text

        Renders the text for the linked item.

        • Type: string
      • url

        Renders the href for the linked item. This should be the id of the responding section. For example: #section-one-name.

        • Type: string
      • active

        Indicates that the item represents the current section being viewed.

        • Type: boolean
Header

Renders a header for the table of contents.

string
Uuid

Unique ID for the table of contents, randomly generated if not provided.

string

toc

Manually set an item as active Any item can be set to active to indicate that the page is anchored to the respective section.

Table of Content

Section One Section Two Section Three Section Four Section Five

toc header variations

Visible header A header for table of contents can be created by passing plain text into the header prop.

This is the header

Section One Section Two Section Three Section Four Section Five

toc use case sticky

Marvel Cinematic Universe

Phase One Phase Two Phase Three

Phase One

Iron Man. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis.

Phase Two

Iron Man 3. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque.

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et.

Phase Three

Captain America: Civil War. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum.

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin.

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

toc with web component

Web Component Usage Bolt Table of Contents is a web component, you can simply use <bolt-toc> in the markup to make it render.
Section One Section Two Section Three
<bolt-toc> <bolt-toc-item url="#section-one"> Section One </bolt-toc-item> <bolt-toc-item url="#section-two"> Section Two </bolt-toc-item> <bolt-toc-item url="#section-three"> Section Three </bolt-toc-item> </bolt-toc>
Basic Usage All the props defined in the schema table can be used directly on the <bolt-toc> element and the <bolt-toc-item> element.
Phase One Phase Two Phase Three
<bolt-toc header="Marvel Cinematic Universe"> <bolt-toc-item url="#phase-one"> Phase One </bolt-toc-item> <bolt-toc-item url="#phase-two" active> Phase Two </bolt-toc-item> <bolt-toc-item url="#phase-three"> Phase Three </bolt-toc-item> </bolt-toc>

tooltip docs

2.17.0

Tooltip

Floating label that briefly describes an element.

Tooltip component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-tooltip
  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: "This is the tooltip trigger",
  content: "This is the tooltip content."
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-tooltip> tag.

object
Trigger *

Renders the trigger of the tooltip.

any
Content *

Renders the content of the tooltip. Plain text is preferred because this is supposed to be a simple label. For passing more complex content and actions, please use Popover instead.

any
Placement

Sets the preferred placement of the tooltip. The actual placement of the tooltip will be automatically adjusted based on the space available on screen.

string top
  • auto, top-start, top, top-end, left-start, left, left-end, right-start, right, right-end, bottom-start, bottom, bottom-end
Uuid

Unique ID for the tooltip, randomly generated if not provided.

string
Boundary

Optionally allows you to specify a parent element selector to use as an outer boundary when calculating placement.

string
FallbackPlacements

An array of different placement options that Popper.js should try if there isn't enough space for the ideal placement. Normally this defaults to all placement options however this lets you limit the options to pick from in certain situations.

array
Direction

This prop is deprecated. Please use placement instead.

any
NoWrap

This prop is deprecated. Please stop using it.

any
Spacing

This prop is deprecated. Please stop using it.

any

tooltip

A tooltip is used to provide descriptive help to the user about the control that the mouse is over. For instance, moving the mouse over this piece of text for a second can display a small popup label containing more detailed description. When the mouse is moved again, the tooltip disappears. This is a useful means of providing additional details about a user interface without cluttering up the main interface.
Preferred placement Preferred placement comes with fancy zoom-in transition.
bottom-start bottom bottom-end
left-start
left
left-end
top-start top top-end right-start right right-end
Auto placement Auto placement only comes with fade-in transition.
CRM CRM CRM
CRM
CRM
CRM
CRM CRM CRM CRM CRM CRM

tooltip use case icon

Web Component Usage Bolt Tooltip is a web component, you can simply use <bolt-tooltip> in the markup to make it render.
CRM Customer relationship management
<bolt-tooltip> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>
Prop Usage Configure the tooltip with the properties specified in the schema.
CRM Customer relationship management
<bolt-tooltip placement="top" uuid="target-this-unique-id"> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>
Advanced Usage Any element can be passed as the trigger.
Download File size: 25MB
<bolt-tooltip> <bolt-button>Download</bolt-button> <span slot="content">File size: 25MB</span> </bolt-tooltip>

trigger docs

2.17.0

Bolt Trigger

Trigger Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-trigger
Source code
View on Github
Dependencies

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Trigger is an unstyled component used to convey a call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-trigger

Description

Triggers add button or link behavior to any content without the default button or link styles.

  {% include "@bolt-components-trigger/trigger.twig" with {
  content: "This is a trigger"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Content

Main content of the trigger (Twig only).

string , array , object
Url

Contains a URL that the link points to. This may also be passed as part of attributes.

string
Target

Specifies where to display the linked URL. This may also be passed as part of attributes.

string
Type

Determines the button tag type for semantic buttons

string button
  • button, submit, reset
Cursor

Type of cursor shown on hover.

string pointer
  • auto, pointer, zoom-in, zoom-out
On_click

The name of a method on the on_click_target.

string
On_click_target

className (e.g. "js-click-me") used in querySelector to reference a web component on the page. onClick, the on_click method name will be called on this element.

string
Display

Set the display property

string inline
  • inline or block
No_outline

Turn off the default outline on focus

boolean false
Disabled

Make trigger unusable and un-clickable. Only applies to button.

boolean false

trigger

trigger tag variations

Trigger with a tag

This <a> has no outline on focus

This <a> is disabled

trigger advanced usage

Trigger Image

Click on the thumbnail to open a modal with an enlarged image.

Web Component Usage Bolt Trigger is a web component. You can use it by simply including the <bolt-trigger> element in the markup.
This is a trigger
<bolt-trigger onclick="alert('Trigger clicked')"> This is a trigger </bolt-trigger>
Basic Usage By default Bolt Trigger renders a semantic button tag. Set the url prop to render a semantic a tag.
This is a trigger
<bolt-trigger url="http://pega.com"> This is a trigger </bolt-trigger>
Additional Options Customize the cursor style by setting the cursor prop.
This is a trigger
<bolt-trigger cursor="zoom-in"> This is a trigger </bolt-trigger>
Advanced Usage Use the on-click and on-click-target props to call a method on another component. See schema for more info.
<bolt-trigger on-click="show" on-click-target="js-image-modal-456" cursor="zoom-in" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="640/480"></bolt-image> </bolt-trigger> <bolt-modal class="js-image-modal-456" spacing="none" theme="none" scroll="overall"> <bolt-trigger on-click="hide" on-click-target="js-image-modal-456" cursor="zoom-out" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" sizes="auto" ratio="640/480"></bolt-image> </bolt-trigger> </bolt-modal>

typeahead docs

2.17.0

Bolt Typeahead

Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Installation

npm install @bolt/components-typeahead

Features

  • Progressively enhanced simple html <form> fallback (via Twig)
  • Server-side pre-rendered SVG icons (when using Twig)!
  • Uses the new withEvents base class to allow for much deeper JavaScript customization
  • Fuzzy logic search / fuzzy matching using fuse.io
  • Keyboard combo-support (command+shift+f)
  • Wired up to use CSS Modules (once they ship in a future Bolt release)
  • Fully customizable behavior to handle partial vs full result matches, etc
  • Supports rendering to the Shadow DOM and the Light DOM

What's Next? (Future Updates)

  • Fully support theming system colors
  • JSDoc support / further improve docs and demos
  • Broader testing coverage
  • Look into adding <slot> support
  • More customization for additional use cases?
  • Multi-section support

API

JavaScript Properties/Attributes

Name Type Description
items array An array of objects that populates the dropdown

JavaScript Event Hooks

Name Params Description
onInput event,
value
Called every time the input value changes
getSuggestions value Called by onSuggestionsFetchRequested when re-rendering suggestions. Handles highlighting keywords in the search results in a React-friendly way + handles limiting the total number of results displayed
onChange event,
newValue, method
Called when a suggestion is selected. Includes info on how the particular item was selected (click, keyboard, etc)
onSuggestionsFetchRequested value Called every very time you need to gather / update suggestions to display. See onSuggestionsFetchRequested for more info.
onSuggestionsClearRequested Called when clearing suggestions. See onSuggestionsClearRequested for more info.
onSelected event,
suggestion
Will be called every time suggestion is selected via mouse or keyboard. See onSuggestionSelected for more info.
onRenderInput value Fired when the input is being rendered

Additional references

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Max_results

The maximum number of typeahead results to display

number 10
Items

An array of objects that's used to populate the suggestion list that appears below the input as the users type. This array of objects can be asynchronously fetched and should contain a label, url, and optionally description.

array
Clear_input_text

Screenreader-specific text for the clear search button, intended to provide a longer, more descriptive explanation of the clear button's behavior.

string Clear search results
Submit_button_text

Screenreader-specific text for the submit button, intended to provide a longer, more descriptive explanation of the submit button's behavior.

string Submit search query
Input_label

Screenreader-specific label text associated with the search input.

string
Input_placeholder

The placeholder text to display inside the Typeahead search input.

string Enter your search query
Input_value

Initial value to pre-populate the input field

string
Input_name

Input element's name attribute used when pre-rendering the component

string
No_highlight

Disable text highlighting in matching search results (highlighting is enabled by default)

boolean false

Demo: Dyamically Fetch Data

In this example, we populate the Typeahead component with JSON data that's dynamically fetched from an external source via the getSuggestions hook.

Also, this demo caps the max # of search results to display at 5.


{% include "@bolt-components-form/form.twig" with {
  children: include("@bolt-components-typeahead/typeahead.twig", {
    attributes: {
      class: [
        "js-typeahead-hook--dynamically-fetch-data"
      ]
    },
    max_results: 5,
    input_name: "q"
  }),
  attributes: {
    action: "https://www.pega.com/search",
    target: "_blank",
    method: "GET"
  }
} %}

// NOTE: make sure you're running this code through a tool like Babel before shipping for cross browser compatibility!
const dynamicTypeaheadDemo = document.querySelector(
  '.js-typeahead-hook--dynamically-fetch-data',
);

const setupEventHandlers = () => {
  // note: make sure to let Typeahead know when the data fetched is ready
  dynamicTypeaheadDemo.on('getSuggestions', async value => {
    return await new Promise(async resolve => {
      await fetch('/build/data/typeahead.data.json')
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          return resolve(data);
        });
    });
  });

  dynamicTypeaheadDemo.on('onSelected', (element, event, suggestion) => {
    const exactMatch = element.items.filter(
      item => item.label === suggestion.suggestionValue,
    )[0];

    function navigateTo(url) {
      if (window.location !== window.parent.location) {
        const win = window.open(url, '_blank');
        win.focus();
      } else {
        window.location = url;
      }
    }

    if (exactMatch && exactMatch.url) {
      if (exactMatch.url) {
        navigateTo(exactMatch.url);
      } else {
        navigateTo(`https://www.pega.com/search?q=${itemSelected.label}`);
      }
    } else if (suggestion.suggestionValue !== '') {
      navigateTo(`https://www.pega.com/search?q=${suggestion.suggestionValue}`);
    }
  });
};

if (dynamicTypeaheadDemo) {
  if (dynamicTypeaheadDemo._wasInitiallyRendered) {
    setupEventHandlers();
  }

  dynamicTypeaheadDemo.addEventListener('ready', e => {
    if (e.detail.name === 'bolt-typeahead') {
      setupEventHandlers();
    }
  });
}

In this example, we populate the Typeahead component with a small batch of results and customize the onSelected behavior to go directly to the result selected (vs the search results page) for exact matches.

Submitting the form with text that isn't a 1:1 match will fall back to the search results page (the behavior shown in the other demo).


{% include "@bolt-components-form/form.twig" with {
  children: include("@bolt-components-typeahead/typeahead.twig", {
    attributes: {
      class: [
        "js-typeahead-hook--exact-result"
      ]
    },
    max_results: 5,
  }),
  attributes: {
    action: "https://www.pega.com/search",
    target: "_blank",
    method: "GET"
  }
} %}

// NOTE: make sure you're running this code through a tool like Babel before shipping for cross browser compatibility!
const typeaheadDemo = document.querySelector(
  '.js-typeahead-hook--exact-result',
);

const typeaheadDemoItems = [
  {
    label: 'AI and improving the customer experience',
    description:
      '“Artificial intelligence” (AI) presents both distracting hype and powerful opportunities to drive customer engagement.',
    url: 'https://www.pega.com/ai-and-improving-customer-experience',
  },
  {
    label:
      'Gartner Magic Quadrant for Enterprise Low-Code Application Platforms 2019',
    description:
      'Pega was cited as a Visionary in Gartner’s new 2019 Magic Quadrant for Enterprise Low-Code Application Platforms.',
    url:
      'https://www.pega.com/insights/resources/gartner-magic-quadrant-enterprise-low-code-application-platforms-2019',
  },
];

const setupEventHandlers = () => {
  typeaheadDemo.items = typeaheadDemoItems;

  typeaheadDemo.on('onSelected', (element, event, suggestion) => {
    const exactMatch = element.items.filter(
      item => item.label === suggestion.suggestionValue,
    )[0];

    function navigateTo(url) {
      if (window.location !== window.parent.location) {
        const win = window.open(url, '_blank');
        win.focus();
      } else {
        window.location = url;
      }
    }

    if (exactMatch && exactMatch.url) {
      if (exactMatch.url) {
        navigateTo(exactMatch.url);
      } else {
        navigateTo(`https://www.pega.com/search?q=${itemSelected.label}`);
      }
    } else if (suggestion.suggestionValue !== '') {
      navigateTo(`https://www.pega.com/search?q=${suggestion.suggestionValue}`);
    }
  });
};

if (typeaheadDemo) {
  if (typeaheadDemo._wasInitiallyRendered) {
    setupEventHandlers();
  }

  typeaheadDemo.addEventListener('ready', e => {
    if (e.detail.name === 'bolt-typeahead') {
      setupEventHandlers();
    }
  });
}

In this example, we populate the Typeahead component with a larger batch of results and customize the onSelected behavior to always go to the search results page when selecting an item.

Unlike the other demo, only perfect matches will allow you to submit (via the submit button) or select a result.

For example, manually selecting or entering Case Management in the input field will allow you to submit via hitting enter or clicking on the search icon. However, entering in Case Management2 instead would not submit.


{% include "@bolt-components-form/form.twig" with {
  children: include("@bolt-components-typeahead/typeahead.twig", {
    attributes: {
      class: [
        "js-typeahead-hook"
      ]
    },
    max_results: 5,
  }),
  attributes: {
    action: "https://www.pega.com/search",
    target: "_blank",
    method: "GET"
  }
} %}

// NOTE: make sure you're running this code through a tool like Babel before shipping for cross browser compatibility!
const typeahead = document.querySelector('.js-typeahead-hook');

const items = [
  {
    label: 'AI and improving the customer experience',
    description:
      '“Artificial intelligence” (AI) presents both distracting hype and powerful opportunities to drive customer engagement.',
    url: 'https://www.pega.com/ai-and-improving-customer-experience',
  },
  {
    label:
      'Gartner Magic Quadrant for Enterprise Low-Code Application Platforms 2019',
    description:
      'Pega was cited as a Visionary in Gartner’s new 2019 Magic Quadrant for Enterprise Low-Code Application Platforms.',
    url:
      'https://www.pega.com/insights/resources/gartner-magic-quadrant-enterprise-low-code-application-platforms-2019',
  },
  {
    label: 'Pega Data & Integrations',
    description:
      "Take full advantage of integration opportunities with Pega's open architecture, allowing you to build applications faster and meet the increasing demands of your business.",
    url: 'https://www.pega.com/products/pega-platform/data-integrations',
  },
  {
    label: 'Digital Customer Experiences',
    description:
      'Deliver engaging digital customer experiences anywhere, anytime, with unique designs for your business right out of the box.',
    url:
      'https://www.pega.com/products/pega-platform/digital-customer-experiences',
  },
  {
    label: 'DevOps and Testing',
    description:
      "Continuous integration and deployment. Continuous evolution. With one-click DevOps, you'll break barriers to delivery – and leapfrog competitors – by empowering business teams to…",
    url: 'https://www.pega.com/products/pega-platform/devops-testing',
  },
  {
    label: 'Pega Onboarding',
    description:
      'Intelligent work automation dramatically cuts time to revenue while ensuring compliance with global and local regulations, whether you are onboarding new clients, adding products…',
    url: 'https://www.pega.com/industries/financial-services/onboarding',
  },
  {
    label: 'Case Management',
    description:
      'Pega BPM and case management solutions allow you to build and manage enterprise-level strategic applications that can communicate with legacy systems.',
    url: 'https://www.pega.com/products/pega-platform/case-management',
  },
  {
    label: 'Pega Intelligent Virtual Assistant',
    description:
      "Across all channels, Pega's Intelligent Virtual Assistant engages users where they are and gives them experiences based on context, not just auto-responses.",
    url:
      'https://www.pega.com/products/pega-platform/intelligent-virtual-assistant',
  },
];

const setupEventHandlers = () => {
  typeahead.items = items;
  typeahead.on('onSelected', (element, event, suggestion) => {
    const itemSelected = element.items.filter(
      item => item.label === suggestion.suggestionValue,
    )[0];

    if (itemSelected) {
      if (itemSelected.label) {
        if (window.location !== window.parent.location) {
          // const win = window.open(`${itemSelected.url}`, '_blank');
          const win = window.open(
            `https://www.pega.com/search?q=${itemSelected.label}`,
            '_blank',
          );
          win.focus();
        } else {
          window.location = `https://www.pega.com/search?q=${itemSelected.label}`;
        }
      }
    }
  });
};

if (typeahead) {
  if (typeahead) {
    if (typeahead._wasInitiallyRendered) {
      setupEventHandlers();
    }

    typeahead.addEventListener('ready', e => {
      if (e.detail.name === 'bolt-typeahead') {
        setupEventHandlers();
      }
    });
  }
}

ul docs

2.17.0

Unordered List

Unordered List Component in Bolt

Stylistic bulleted list for article content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-ul
  {% include "@bolt-components-ul/ul.twig" with {
  "items": [
    "Do not include any data or information in your posts that are confidential!",
    "Apply basic practices for collaborative work.",
    include("@bolt-components-link/link.twig", {
      text: "Be honest, respectful, trustworthy and helpful.",
      url: "#!",
    }),
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
ContentItems

Use the items prop instead.

array
  • [items]:
    • Type: object

      A single list item object with either a text or contentItems key

    • Properties:
      • text

        Item text

        • Type: string
      • contentItems

        Items pass to @bolt/text.twig

        • Type: array
Items

All items can be simple text or items.

array

ul

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ul theme variation

Theme: xlight

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: light

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: dark

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xdark

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ul nested items

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Level 1
    • Item 1
    • Level 2
      • Item 1
      • Item 2
      • Level 3
        • Item 1
        • Item 2
        • Item 3
        • Level 4
          • Item 1
          • Item 2
          • Item 3
          • Item 4
          • Level 5
            • Item 1
            • Item 2
            • Item 3
            • Item 4
            • Item 5
          • Item 5
        • Item 5
      • Item 4
      • Item 5
    • Item 3
    • Item 4
    • Item 5
  • Avoid cluttering discussions with noise.

ul with web component

Web Component Usage

Bolt Unordered List is a web component, you can simply use <bolt-ul> in the markup to make it render. Its inner content is comprised of <bolt-li>.

Example

<bolt-ul>
  <bolt-li>Item 1</bolt-li>
  <bolt-li>Item 2</bolt-li>
  <bolt-li>Item 3</bolt-li>
  <bolt-li>Item 4</bolt-li>
  <bolt-li>Item 5</bolt-li>
</bolt-ul>

Simple usage

Item 1 Item 2 Item 3 Item 4 Item 5

Nesting of lists (ol and ul)

Coffee Tea Black tea Green tea Good tea Great tea Is the best Milk L1 - Tea L1 - Coffee L2 - Light roast L2 - Dark roast L3 - Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.Answer questions authoritatively and concisely. Avoid cluttering discussions with noise. L4 - Tea L4 - Coffee L5 - Light roast L5 - Dark roast L6 - Italian Roast L6 - Coffee from Italy L5 - Medium roast L4 - Milk L3 - Coffee from Italy L2 - Medium roast L1 - Milk Level 1 - Item 1 Level 1 - Item 2 Level 1 - Item 3 Level 1 - Item 4 Level 2 - Item 1 Level 2 - Item 2 Level 2 - Item 3 Level 3 - Item 1 Level 3 - Item 2 Level 4 - Item 1 Level 5 - Item 1 Level 5 - Item 2 Level 5 - Item 3 Level 5 - Item 4 Level 5 - Item 5 Level 4 - Item 2 Level 4 - Item 3 Level 4 - Item 4 Level 4 - Item 5 Level 3 - Item 3 Level 3 - Item 4 Level 3 - Item 5 Level 2 - Item 4 Level 2 - Item 5 Level 1 - Item 5 Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk Coffee Tea Milk

Theme variations

Theme: xlight

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: light

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: dark

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: xdark

Item 1 Item 2 Item 3 Item 4 Item 5

video docs

Stylistic video. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/video
  {% include "@bolt/video.twig" with {
  videoId: "5609376179001",
  accountId: "1900410236",
  playerId: "r1CAdLzTW",
  showMeta: true,
  showMetaTitle: false
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
VideoId

Brightcove ID for this video.

string , number
PlayerId

Brightcover Player ID.

string
AccountID

ID of the Brightcove account that owns the video.

string , number
VideoUuid

A unique identifying string, randomly generated if not provided.

string
Share_description

A custom title to use in the share overlay

string Share This Video
Ratio

Maintain video ratio.

boolean
Collapsed

Should the video be collapsed on load.

boolean
ShowMeta

Should the video show meta data.

boolean true
ShowMetaTitle

Should the video show meta title.

boolean true
Controls

Should the video controls be available.

boolean true
Autoplay

Should the video auto-play on load.

boolean false
Loop

Should the video loop.

boolean false
On_init

The on_init config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a <bolt-video> player instance when initializing. Please see the new recommended enabled_plugins and disabled_plugins options below.

string
Enabled_plugins

Space-separated list of built-in <bolt-video> plugins for Brightcove to enable. Current include social, email, playback, and cue. For example: <bolt-video enabled-plugins="cue social email playback">.

string
Disabled_plugins

Space-separated list of any built-in <bolt-video> plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the playback plugin). For example: <bolt-video disabled-plugins="playback">.

string
IsBackgroundVideo

Background video feature will be removed with Bolt v3.0

Open Accordion Close Accordion
Default_plugins

An array of the default <bolt-video> player plugins that are globally enabled by default.

array
  • playback
Available_plugins

The built-in <bolt-video> player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript.

array
  • playback, social, email, cue

video

This video has showMeta set to true and showMetaTitle set to true.

This video has showMeta set to false.

This video has showMeta set to true and showMetaTitle set to false.

video hide controls

This video has controls set to false, you cannot interact with the video player but you can create external control to interact with it:

This video has external controls:

This video has external controls and an inline script:

video with email share

This video has attributes for email share. Inline script is required for the email share.

This video has share_description set to Share me!.

video with cue points

This video has a cue point defined inside the Brightcove interface.

This video has showMetaTitle set to false to hide the title from the video player, so you can pass the title to other markup.

Figure and Figcaption

Pega Adaptive Decision Manager

Headline with Video

Pega Adaptive Decision Manager

default plugins

When used straight out of the box, the playback plugin is enabled by default.

disabled plugins

This video has disabled_plugins set to playback. Therefore disabling the default playback plugin.

Accepted plugins: cue, social, playback, and email.

enabled plugins

This video has enabled_plugins set to a few values. Therefore enabling the plugins defined in the values.

Accepted plugins: cue, social, playback, and email.

This video has an external plugins script defined through on_init.

This video has an external plugins script defined through on_init and enabled_plugins set to certain values.

macros

Molecule - H5P Embed

H5P Placeholder

Page Subtitle

Page Title Goes Here Test

A short description goes here test.

Page Subtitle

Page Title Goes Here Test

  • 13 Modules

  • 12 Challenges

  • 1 Mission

  • 7 hrs 30 mins

  • Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Page Subtitle

Page Title Goes Here Test

  • 13 Modules

  • 12 Challenges

  • 1 Mission

  • 7 hrs 30 mins

  • Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

My Missions (12)

Mission

Illum velit voluptas quaerat.

  • 6 Modules

  • 1 Challenge

  • 25% complete

Id deserunt ducimus laudantium eius. Autem et sint numquam possimus.

Last activity: 3 days ago

Mission

Officia doloribus.

  • 6 Modules

  • 1 Challenge

  • 10% complete

Nesciunt id facilis architecto cupiditate sit odio eius. Excepturi repellat magnam fugiat ut qui.

Last activity: 12/21/19

Assigned

Mission

Provident numquam molestias hic.

  • 2 Modules

  • 1 Challenge

  • 10% complete

Dolore ut accusamus enim est sint occaecati. Reiciendis doloremque facere at necessitatibus rerum commodi. Aliquid libero sequi accusantium sed mollitia id ut.

Last activity: 12/21/19

Mission

Dolorem voluptas maxime.

  • 6 Modules

  • 1 Challenge

  • 25% complete

Inventore quia vel atque occaecati quia aut deleniti. Quo velit quia tempora alias enim aliquam doloribus. Velit exercitationem pariatur facilis assumenda occaecati aut.

Last activity: 3 days ago

Mission

Quia inventore dolores.

  • 3 Modules

  • 1 Challenge

  • 10% complete

Adipisci officia quia voluptate porro. Doloremque omnis omnis enim sed in ipsum a error.

Last activity: 12/21/19

Assigned

Mission

Harum provident eum.

  • 7 Modules

  • 1 Challenge

  • 10% complete

Aspernatur quas dolores nulla alias a cumque sit molestias. Unde molestiae consequatur quaerat necessitatibus asperiores.

Last activity: 12/21/19

  • 9 Modules

  • 1 Challenge

  • 25% complete

Dolorem voluptate adipisci fugit amet voluptatem mollitia voluptas. Nemo impedit dolor dolor sed labore sed expedita.

Last activity: 3 days ago

Mission

Rerum natus quae molestiae.

  • 7 Modules

  • 1 Challenge

  • 10% complete

Praesentium ducimus voluptates sit non inventore non et. Saepe praesentium sequi repellat dolor. Quisquam et in alias sunt sapiente nesciunt.

Last activity: 12/21/19

Assigned

Mission

Voluptas velit officia commodi.

  • 5 Modules

  • 1 Challenge

  • 10% complete

Eos esse quidem nesciunt quisquam deserunt est ut. Quo eos rem repudiandae. Veritatis sint voluptas blanditiis rerum quisquam vitae officiis.

Last activity: 12/21/19

  • 10 Modules

  • 1 Challenge

  • 25% complete

Quasi dolorem placeat dolore ea alias sequi. Omnis nihil omnis aut atque.

Last activity: 3 days ago

Mission

Sequi cupiditate labore aut.

  • 4 Modules

  • 1 Challenge

  • 10% complete

Aut placeat esse consectetur officia eos id omnis. Libero qui quibusdam ipsum cum molestiae. Delectus quia assumenda animi porro nemo sed.

Last activity: 12/21/19

Assigned

Mission

Et qui consequatur tempore.

  • 10 Modules

  • 1 Challenge

  • 10% complete

Est similique earum rerum officia enim. Ad illo voluptas dolor in quidem autem. Qui accusamus nulla autem voluptas nisi molestias.

Last activity: 12/21/19

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Welcome back Justin!

Let's change the way the world builds software.

My Missions

Add Mission

Add Mission

In Progress

Module

Voluptate vero atque vero.

  • 2 Topics

  • 40 mins remaining

Architecto voluptas autem autem. Accusantium debitis quo doloremque molestiae sit. Nisi quod mollitia assumenda voluptatem.

Last activity: 3 days ago

Module

Voluptatem repellendus eligendi.

  • 7 Topics

  • In progress

Sunt dolorem delectus asperiores aspernatur ab libero. Est odit sit tempore.

Last activity: 12/21/19

Previous Next

Recommended Missions

Mission

Cum error et tenetur.

  • 2 Modules

  • 1 Challenge

  • 25% complete

Et ea illo temporibus suscipit repudiandae pariatur repellat reprehenderit. Sunt accusantium ut dignissimos inventore qui consequatur.

Mission

Nulla totam cupiditate.

  • 8 Modules

  • 1 Challenge

  • 25% complete

Quia sapiente illum rerum assumenda rerum. Dolorum sunt quae dolores magni.

Mission

Fugit necessitatibus optio.

  • 7 Modules

  • 1 Challenge

  • 25% complete

Consequatur consequatur perferendis occaecati incidunt. Exercitationem ut aut quibusdam sed dolorem. Tenetur voluptates sequi temporibus ipsam ratione.

Previous Next

New Training

  • 8 Modules

  • 1 Challenge

  • 25% complete

Voluptatem id beatae perspiciatis facilis placeat voluptatum. Nisi error dolores voluptatibus natus. Odit et quam temporibus nisi.

Module

Sapiente voluptas aperiam.

  • 10 Topics

  • In progress

Tempore voluptas ut qui tempora ut ducimus. Laborum cupiditate est ut at incidunt et quasi. Ea quia est sunt consequatur laborum.

  • 3 Topics

  • 40 mins remaining

Numquam voluptate qui quam ut temporibus dolor quo omnis. Accusamus nostrum officiis asperiores voluptas fuga accusantium ex. Est laboriosam animi quae sit modi ratione.

Previous Next

Page - Dashboard

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Welcome back Justin!

Let's change the way the world builds software.

My Missions

Mission

Eos eius veniam voluptatibus.

  • 4 Modules

  • 1 Challenge

  • 25% complete

Accusamus est laboriosam deleniti autem consectetur quia. Laudantium quaerat tenetur iure voluptatem optio ipsum amet. Blanditiis nulla neque sequi.

Last activity: 3 days ago

Mission

Quos nobis id.

  • 4 Modules

  • 1 Challenge

  • 10% complete

Itaque excepturi accusamus facere tempore laborum nisi nihil. Molestiae reiciendis facere molestias voluptas distinctio. Aut sint illum atque blanditiis.

Last activity: 12/21/19

Assigned

Mission

Id ad est corporis.

  • 5 Modules

  • 1 Challenge

  • 10% complete

Et ut officiis neque qui quis natus velit. Et quia quia consequatur molestiae iusto. Dolor hic voluptate illum asperiores autem inventore maxime.

Last activity: 12/21/19

Mission

Incidunt labore totam.

  • 5 Modules

  • 1 Challenge

  • 25% complete

Architecto eveniet temporibus perferendis nihil reprehenderit quis facere. Consequatur vero laboriosam maxime fugiat. Sint quo optio quibusdam.

Last activity: 3 days ago

Mission

Reprehenderit neque nostrum.

  • 4 Modules

  • 1 Challenge

  • 10% complete

Hic harum architecto atque aut rerum. Sed dolores ea vitae suscipit.

Last activity: 12/21/19

Assigned

  • 5 Modules

  • 1 Challenge

  • 10% complete

Ab eveniet soluta et hic. Corporis et commodi mollitia assumenda eos quia nihil. Architecto aut voluptas id voluptatem doloribus qui animi.

Last activity: 12/21/19

Mission

Dolore sunt neque sed.

  • 8 Modules

  • 1 Challenge

  • 25% complete

Voluptatem provident veritatis sit facilis. Incidunt itaque modi et adipisci.

Last activity: 3 days ago

Mission

Quis quidem magni voluptas.

  • 6 Modules

  • 1 Challenge

  • 10% complete

Voluptatem et odit quaerat dolore placeat aperiam quisquam. Velit harum esse ipsum nostrum.

Last activity: 12/21/19

Assigned

  • 4 Modules

  • 1 Challenge

  • 10% complete

Voluptatibus dignissimos culpa natus. Dolor minus soluta molestias nihil magni.

Last activity: 12/21/19

Mission

Quia aperiam animi.

  • 5 Modules

  • 1 Challenge

  • 25% complete

Unde aut molestias in non est est. Non molestiae consequatur sint magni voluptas et in. Dolor corrupti illo quia ea ea est quo.

Last activity: 3 days ago

Mission

Aliquid nostrum odit quia.

  • 7 Modules

  • 1 Challenge

  • 10% complete

Dolor enim alias iusto similique. Blanditiis dolores sit corporis cupiditate iure perferendis laborum.

Last activity: 12/21/19

Assigned

Mission

Cupiditate maiores aut harum sunt.

  • 8 Modules

  • 1 Challenge

  • 10% complete

Non laborum sed minus iure maxime dolor. Id architecto suscipit perferendis. Enim aspernatur placeat sint nisi voluptatum a sed.

Last activity: 12/21/19

Previous Next

In Progress

Module

Soluta unde velit.

  • 4 Topics

  • 40 mins remaining

Ipsum itaque facere provident aliquam sint pariatur et. Et dolore libero iure eum unde voluptatum.

Last activity: 3 days ago

  • 3 Topics

  • In progress

Aperiam voluptates molestiae quo quos in. Praesentium autem animi accusantium. Consequatur quibusdam non qui nesciunt dolore.

Last activity: 12/21/19

Previous Next

Recommended Missions

  • 4 Modules

  • 1 Challenge

  • 25% complete

Ut vitae et ipsam. Quo quam porro minus laudantium.

Mission

Sunt eum asperiores est.

  • 3 Modules

  • 1 Challenge

  • 25% complete

Aut enim dicta necessitatibus iste. Inventore quod aut consequatur voluptas.

Mission

Eum quis neque deserunt ad.

  • 6 Modules

  • 1 Challenge

  • 25% complete

Eos numquam et corporis porro recusandae voluptas soluta. Amet minima necessitatibus repudiandae officiis eligendi velit asperiores.

Previous Next

New Training

Mission

Nulla et distinctio et.

  • 2 Modules

  • 1 Challenge

  • 25% complete

Eum qui delectus atque ducimus beatae ut. Minima unde sapiente odio quis dolorum dolor. Sunt dolorem illo dolores eius nihil.

Module

Architecto cupiditate qui.

  • 5 Topics

  • In progress

Eius quasi adipisci voluptates facilis nisi molestiae expedita illo. Tempora vero molestiae culpa laborum. Quasi sunt omnis ut vel ipsam laudantium.

Module

Architecto debitis.

  • 9 Topics

  • 40 mins remaining

Quia quae consequatur quae labore sunt. Quos incidunt consequuntur qui necessitatibus.

Previous Next

Page - Homepage

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

choose a mission.
complete the challenges.
earn bragging rights.

Infinity is just the beginning.

Achieve your Pega Certification

Show the world how great you are.

A Pega certification confirms that you and your team have the skills, knowledge and experience to architect and implement world-class Pega solutions.

Future proof your career.

Join our thriving Pega certified professional ecosystem and stay relevant and valuable.

Build fast. Empower your team.

Projects that leverage Pega certified professionals see reduced costs and faster times to market by increasing team efficiency and minimizing errors.

Browse Missions and path types

Technical Paths

Build strategic applications to help solve real-world problems for today’s fast-paced business environment.

Business Paths

Ensure that business users align their strategic business goals with IT initiatives to ensure project success.

Join the community and share your ideas.

Our open ecosystem is changing the way the world builds software - and redefining who gets to build it.

Invision Comps

https://pega.invisionapp.com/d/main#/console/18904689/398003731/preview

Invision Comps

https://pega.invisionapp.com/d/main#/console/18904689/398003732/preview

Invision Comps

https://pega.invisionapp.com/d/main#/console/18904689/394542211/preview

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Certification Exam

Name of Certification goes here

  • 60 Questions

  • 90 mins

  • Passing Score: 70%

The Certified System Architect (CSA) certification is for developers and technical staff members who want to learn how to develop Pega applications. This certification provides a baseline measurement on your knowledge of Pega applications. The CSA 7.4 exam includes scenario questions, multiple choice questions and drag/drop items. If multiple answers are required, the text states how many responses are needed.

Prerequisites:

Exam Topics (% of exam)

  • Pega Platform (8%)
  • Case Lifecycle (25%)
  • Case Data Modeling (17%)
  • Business Policy Automation (13%)
  • User Views (20%)
  • Reports (12%)
  • Testing (5%)

Before you begin...

The Certified System Architect Test is proctored by Pearson VUE. Users must create a Pearson VUE account if you do not already have one and register for the exam through the Pearson VUE site. There are two exam delivery options:

  • Take an exam at a test center, or
  • Take an exam via Online Proctored delivery

    (e.g., in a quiet, uninterrupted room in your home or office, proctored via webcam).

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Mission Test

Mission Name Goes Here

  • 60 Questions

  • 90 mins

  • Passing Score Needed: 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

H5P Placeholder

Congratulations Justin!

You’ve completed the Low-Code Application Mission and earned a new badge!

FPO

NOTE: Please allow 24-48 hours for the badge to appear on your Achievements page.

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Mission Test

Mission Name Goes Here

  • 60 Questions

  • 90 mins

  • Passing Score Needed: 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

H5P Goes Here
Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Mission Test

Mission Name Goes Here

  • 60 Questions

  • 90 mins

  • Passing Score Needed: 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

H5P Placeholder
Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Page Subtitle

Mission Name Goes Here

  • 13 Modules

  • 12 Challenges

  • 1 Mission

  • 7 hrs 30 mins

  • Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Mission

Consequatur sunt odit.

  • 30 topics

  • Completed

Quis reiciendis ut in magnam animi et. Sit inventore sed ut voluptas. Asperiores qui ab quis saepe.

Completed (1)

Module

Name of module that will take up two lines of text

Aut dolor mollitia ea. Ipsum tempore aperiam tempora culpa error. Illum ut fuga velit quaerat.

Mission Test

Sint omnis qui sapiente.

Blanditiis aspernatur ipsa fugiat. Nobis accusamus nemo sed quod ut itaque. Ab quis autem pariatur et. Dolorum libero aut animi harum amet consequuntur illo.

Completed (2)

Mission

Quam voluptatem et adipisci.

Praesentium eaque vitae ut assumenda quo doloremque. Tenetur et reiciendis in ipsum voluptas sint saepe.

Module

Molestias molestiae et.

Mollitia quae ab placeat. Ut temporibus corrupti fugit reprehenderit repudiandae. Explicabo quae voluptatem quidem accusamus aspernatur.

Achievement Badge Awarded

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Page Subtitle

Mission Name Goes Here

  • 13 Modules

  • 12 Challenges

  • 1 Mission

  • 7 hrs 30 mins

  • Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Mission

Voluptatem molestias minus nesciunt.

  • 23 topics

  • Completed

Aspernatur aperiam minus quam totam culpa. Quia laboriosam qui consequatur laborum. Placeat sed ipsum modi quis et fugit.

Module

Quasi sequi voluptatem.

Accusantium sequi vel numquam. Ut eos eveniet atque libero et laborum aut ratione.

Module

Name of module that will take up two lines of text

Laborum cumque minima ut voluptas. Ducimus sed quaerat rerum maiores. Itaque veritatis enim voluptas architecto exercitationem fugiat commodi. Autem expedita praesentium illo qui unde voluptates. Optio deleniti ut rem est aut totam.

Mission Test

Recusandae expedita recusandae quibusdam.

Provident sit mollitia distinctio. Et ab porro sed animi quaerat et.

Mission Exercise

Est voluptatem aut.

Recusandae eos neque similique aperiam. Doloremque autem enim iste illum nihil. Asperiores omnis animi vel sit aut corrupti. Ratione molestias sed perspiciatis voluptatem voluptas. Voluptas occaecati rerum magni autem numquam.

Challenge

Ex dolore dolores.

Iure nostrum cumque reiciendis. Veniam qui explicabo est possimus deserunt. Nihil officiis repellat placeat ea sint.

Mission

Iure qui accusantium asperiores.

Ipsum ex adipisci nesciunt aut deleniti. In sit minima deserunt earum fugiat alias odit illo. Corporis consequatur a soluta. Eos culpa commodi aut numquam quia praesentium labore.

Module

Voluptatibus quia repudiandae.

Cumque voluptatum ad adipisci est quae dolorem consequuntur. Molestiae consequatur quia maxime nulla eos quo laboriosam itaque. Eum ipsa ipsum voluptatum. Ipsa quos sit eveniet facere rerum vitae similique.

Achievement Badge Awarded

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Module

Module name goes here

  • 4 Topics

  • 30 Mins

Create data types to model the attributes of an entity and establish a common context for a group of fields.

After completing this module, you should be able to:

  • Explain how data types group related fields to model a single entity
  • Explain how data types group related fields to model a single entity
  • Explain how data types group related fields to model a single entity

This module is available in the following Missions:

Topics

  • Data types

    10 mins

  • Creating a data type

    5 mins

  • Creating a data type

    5 mins

  • Module Quiz

    3 Questions

  • Module Quiz

    3 Questions

  • Module Quiz

    3 Questions

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Challenge

Configuring a case type

  • 14 Steps

  • 2 hr 10 mins

Scenario

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.

Before beginning the challenge, you must launch your own Pega cloud environment.

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed.

Fig. 1: This is Bill. He is awesome.

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh.

H5P Embed
Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

How to update a rule

System architects often secure rulesets to prevent unauthorized or unintended changes to rules. When you edit the rules in a secured ruleset, you either check out the rule or perform a private edit.

Rule check out and check in

Example of a larger version of an image that can be viewed in a modal. Example of a larger version of an image that can be viewed in a modal.

The check-out feature is used to manage changes to rules when multiple developers work on an application. This feature allows a system architect to update a rule while preventing updates by other system architects. Rule check-oLorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent commodo interdum risus, id semper lorem varius ut. his updates the application ruleset with a new version of the rule. When updating a rule in App Studio, App Studio automatically manages the check-out/check-in process for you. Mauris accumsan nisi massa, a ultricies lacus tristique ac. Etiam ullamcorper ante nisl, non consectetur diam pulvinar sed.

Mauris hendrerit sem ex, eu finibus tellus vehicula eget. Etiam massa lacus, ornare et dapibus vehicula, facilisis eget sem. Nulla tincidunt dui nunc, quis laoreet augue pretium ac. Fusce ac felis eu velit lacinia tincidunt.ut creates a copy of a rule in a ruleset that is only visible to you, called a personal ruleset.

Checking out a rule

Lorem ipsum caption for the thumbnail.

Checking out a rule creates a copy of the original rule in your personal ruleset and prevents other system architects from checking the rule out until you check in your changes.

The personal ruleset occupies the top spot in the ruleset stack. The rules in your personal ruleset override rules in the rest of the application. This allows you to test your changes to the rule without affecting other system architects.

In the Dev Studio header, click the Checkouts icon to view a list of the rules you have checked out. After you update the rule and test the changes, you check in the rule. This updates the application ruleset with a new version of the rule.

Checking in a rule

Lorem ipsum caption for the thumbnail.

Checking out a rule creates a copy of the original rule in your personal ruleset and prevents other system architects from checking the rule out until you check in your changes.

The personal ruleset occupies the top spot in the ruleset stack. The rules in your personal ruleset override rules in the rest of the application. In the Dev Studio header, click the Checkouts icon to view a list of the rules you have checked out. After you update the rule and test the changes, you check in the rule. This updates the application ruleset with a new version of the rule. After you update the rule and test the changes, you check in the rule. This updates the application ruleset with a new version of the rule. When updating a rule in App Studio, App Studio automatically manages the check-out/check-in process for you. When updating a rule in App Studio, App Studio automatically manages the check-out/check-in process for you. This allows you to test your changes to the rule without affecting other system architects.

Private edit

A private edit provides a nonexclusive check out of a rule. This allows other system architects to edit a rule at the same time. Private edits are useful for quick debugging without interrupting development by other team members. This option is not available in App Studio.

It is a best practice to lock older versions of a ruleset in order to prevent changes. For rules in a locked ruleset, a lock icon is displayed on the rule form.

Data type best practices

A private edit provides a nonexclusive check out of a rule. This allows other system architects to edit a rule at the same time. Private edits are useful for quick debugging without interrupting development by other team members. This option is not available in App Studio.

H5P Embed

https://pega.invisionapp.com/d/main#/console/18904689/393795334/preview

https://pega.invisionapp.com/d/main#/console/18904689/393795334/preview

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.17.0 (2020-02-04)

Bug Fixes

  • add missing deps (5ea4a60)
  • Update empty block checking syntax in blueprint package (98407bb)

Features

  • add "My Missions" and "Add Mission" templates (8b712d1)
  • add basic support to Toolbar to allow conditionally disabling sticky behavior (76557e5)
  • topic details page buildout + adding generic placeholder images for reference (5112ecc)

2.16.2 (2020-01-28)

Note: Version bump only for package @bolt/blueprints

2.16.1 (2020-01-27)

Note: Version bump only for package @bolt/blueprints

2.16.0 (2020-01-24)

Bug Fixes

  • remove icon background from card spacer (d44ca99)
  • remove z-index and position (329b1d6)
  • update Toolbar button control props to prevent Tooltip / Popover from ever being placed outside of the Card or Carousel containers (1c6d413)

2.15.2 (2020-01-21)

Note: Version bump only for package @bolt/blueprints

2.15.1 (2020-01-18)

Bug Fixes

2.15.0 (2020-01-17)

Note: Version bump only for package @bolt/blueprints

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

  • Customer Retention

  • Sales Effectiveness

    Create Sales Superstars

  • Operations & IT

    Stop Coding. Start Designing.

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

  • Whiteboard
  • 03:17
  • Whiteboard
  • 03:17
  • Top aligned inline List Item #1
  • Inline List Item #2
  • Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

  • Customer Retention

  • Sales Effectiveness

    Create Sales Superstars

  • Operations & IT

    Stop Coding. Start Designing.

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

  • Whiteboard
  • 03:17
  • Whiteboard
  • 03:17
  • Top aligned inline List Item #1
  • Inline List Item #2
  • Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

full page theming dark

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

  • Customer Retention

  • Sales Effectiveness

    Create Sales Superstars

  • Operations & IT

    Stop Coding. Start Designing.

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

  • Whiteboard
  • 03:17
  • Whiteboard
  • 03:17
  • Top aligned inline List Item #1
  • Inline List Item #2
  • Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

  • Customer Retention

  • Sales Effectiveness

    Create Sales Superstars

  • Operations & IT

    Stop Coding. Start Designing.

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

  • Whiteboard
  • 03:17
  • Whiteboard
  • 03:17
  • Top aligned inline List Item #1
  • Inline List Item #2
  • Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

full page theming none

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

  • Customer Retention

  • Sales Effectiveness

    Create Sales Superstars

  • Operations & IT

    Stop Coding. Start Designing.

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

  • Whiteboard
  • 03:17
  • Whiteboard
  • 03:17
  • Top aligned inline List Item #1
  • Inline List Item #2
  • Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

d8 homepage

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

  • Customer Retention

  • Sales Effectiveness

    Create Sales Superstars

  • Operations & IT

    Stop Coding. Start Designing.

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

d8 homepage japanese

Logo Placeholder
close Search

営業効率

「ペガは管理者が、すぐ目の前にあるかもしれないオポチュニティーについて代理店と話せるようにします。」

最高販売配信責任者Larik Hall

ペガジャパン株式会社とは?

Pega は顧客の仕事とデジタル プロセス オートメーションをつなぐナンバーワン ソフトウェアです。

トレンドとは

iBPMSでの2017MAGIC QUADRANT

Gartnerは、最新のiBPMSレポートにおいてペガがトップであることを認めています。

Robotics and AI Are Changing the World of Work

Marketforce の最近の調査によると、上級管理者の 69% が労働力の一環として知能機械の導入を考えていることがわかりました。

トランサヴィア:エンドツーエンドのカスタマージャーニー

トランサヴィアはPega CRMのカスタマージャーニー全体を通じて同社のサービスやセールスを提供しています。

誇大広告のSalesforce.comの本当に代わりとなるもの:Pega CRM

Salesforce.comをご検討中ですか?誇大宣伝を信じてはいけません。現代のトップ企業がぺガを選ぶ理由をご覧ください。

product landing

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
Background banner of conference keynote Background banner of conference keynote
Products

CRM Applications for Real-Time Engagement

Pega’s AI powered CRM Suite is transforming the way enterprises drive greater engagement across the entire customer journey.

Explore the Pega CRM Suite

Move past traditional CRM systems to a true journey-enabled, customer engagement suite. Learn how Pega is helping enterprises revolutionize their customer engagement with end-to-end automation and real-time AI on the only unified CRM platform.

  • Engage customers with real-time 1:1 marketing on any channel.

  • Intelligently guide sales professionals and automate the sales process.

  • Serve, satisfy and engage every customer with digital customer service.

Customer Decision Hub

Infuse real-time AI into every customer engagement

There’s nothing artificial about Pega’s proven AI. This always-on brain gets results. Using pragmatic artificial intelligence and decision management, you can improve response rates by up to 6X, NPS by 30 points, and get ROI as high as 500%.

Call to Action

Analyst Reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

We’re creating an environment where we know our customers individually, and we want to use what we know to really understand what’s important to them – so we can be there in the moments that matter.

Jessica Cuthbertson CEO, RBS

Watch Birgit König, Ph.D., CEO, Allianz Health Germany, share how the Pega platform meets rapidly changing customer expectations.

Call to Action

See How Pega Can Help Your Business

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

product t2

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
CRM Applications

Dynamically recommend next-best-actions for your customers.

Explore the Pega CRM Suite

Move past traditional CRM systems to a true journey-enabled, customer engagement suite. Learn how Pega is helping enterprises revolutionize their customer engagement with end-to-end automation and real-time AI on the only unified CRM platform.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Analyst Reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

We’re creating an environment where we know our customers individually, and we want to use what we know to really understand what’s important to them – so we can be there in the moments that matter.

Jessica Cuthbertson CEO, RBS

Watch Birgit König, Ph.D., CEO, Allianz Health Germany, share how the Pega platform meets rapidly changing customer expectations.

Call to Action

See How Pega Can Help Your Business

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

product t4

@pl/page-header.twig
CRM Applications

Dynamically recommend next-best-actions for your customers.

Explore the Pega CRM Suite

Move past traditional CRM systems to a true journey-enabled, customer engagement suite. Learn how Pega is helping enterprises revolutionize their customer engagement with end-to-end automation and real-time AI on the only unified CRM platform.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Analyst Reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

We’re creating an environment where we know our customers individually, and we want to use what we know to really understand what’s important to them – so we can be there in the moments that matter.

Jessica Cuthbertson CEO, RBS

Watch Birgit König, Ph.D., CEO, Allianz Health Germany, share how the Pega platform meets rapidly changing customer expectations.

Call to Action

See How Pega Can Help Your Business

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

resource details page

White Paper

Insert Page Title Here

Download Now

The foundational use cases that are unifying the worlds of adtech and martech.

Omni-channel customer journeys are increasingly recognized as the best practice standard by which organizations need to define, implement, and measure their marketing strategy and assign marketing spend. Maintaining advertising technology (adtech) and marketing technology (martech) silos creates technology, organizational, and capability gaps—preventing us from effectively driving toward coherent, profitable, and delightful customer experiences across both owned and paid media, throughout the entire customer life cycle. And yet, with the growing maturity of data management platform (DMP) implementations—combined with greater adoption and utilization of decision management platforms—these two unique worlds of adtech and martech can be bridged, with pre-built technology solutions that deliver new, previously unachievable use cases. By combining powerful DMP technology with advanced AI, marketing organizations can optimize ad spend, reduce attrition, improve acquisition rates, and increase revenues.

Download this whitepaper to learn about:

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology
  • The unified DMP solution offered by Merkle | Comet and Pega® Customer Decision Hub, Pega’s decisioning technology—providing a bi-directional integration of your third-party DMP and marketing technology

Category:

  • First tag
  • Sales Automation and Stuff
  • CRM
  • White Paper
  • Pega.com

Related resources

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

White Paper

CSAA Insurance Group: Transforming the Customer Experience

Download Now

The foundational use cases that are unifying the worlds of adtech and martech.

Omni-channel customer journeys are increasingly recognized as the best practice standard by which organizations need to define, implement, and measure their marketing strategy and assign marketing spend. Maintaining advertising technology (adtech) and marketing technology (martech) silos creates technology, organizational, and capability gaps—preventing us from effectively driving toward coherent, profitable, and delightful customer experiences across both owned and paid media, throughout the entire customer life cycle. And yet, with the growing maturity of data management platform (DMP) implementations—combined with greater adoption and utilization of decision management platforms—these two unique worlds of adtech and martech can be bridged, with pre-built technology solutions that deliver new, previously unachievable use cases. By combining powerful DMP technology with advanced AI, marketing organizations can optimize ad spend, reduce attrition, improve acquisition rates, and increase revenues.

Download this whitepaper to learn about:

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology
  • The unified DMP solution offered by Merkle | Comet and Pega® Customer Decision Hub, Pega’s decisioning technology—providing a bi-directional integration of your third-party DMP and marketing technology

Category:

  • First tag
  • Sales Automation and Stuff
  • CRM
  • White Paper
  • Pega.com

Related resources

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

White Paper

PegaWORLD 2012 Video: Using Technology to Address Gaps in Care, Increase Medication Adherence and Improve Health Outcomes at Alere Health

Download Now

The foundational use cases that are unifying the worlds of adtech and martech.

Omni-channel customer journeys are increasingly recognized as the best practice standard by which organizations need to define, implement, and measure their marketing strategy and assign marketing spend. Maintaining advertising technology (adtech) and marketing technology (martech) silos creates technology, organizational, and capability gaps—preventing us from effectively driving toward coherent, profitable, and delightful customer experiences across both owned and paid media, throughout the entire customer life cycle. And yet, with the growing maturity of data management platform (DMP) implementations—combined with greater adoption and utilization of decision management platforms—these two unique worlds of adtech and martech can be bridged, with pre-built technology solutions that deliver new, previously unachievable use cases. By combining powerful DMP technology with advanced AI, marketing organizations can optimize ad spend, reduce attrition, improve acquisition rates, and increase revenues.

Download this whitepaper to learn about:

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology
  • The unified DMP solution offered by Merkle | Comet and Pega® Customer Decision Hub, Pega’s decisioning technology—providing a bi-directional integration of your third-party DMP and marketing technology

Category:

  • First tag
  • Sales Automation and Stuff
  • CRM
  • White Paper
  • Pega.com

Related resources

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

White Paper

New ways to engage your customers

Download Now

The foundational use cases that are unifying the worlds of adtech and martech.

Omni-channel customer journeys are increasingly recognized as the best practice standard by which organizations need to define, implement, and measure their marketing strategy and assign marketing spend. Maintaining advertising technology (adtech) and marketing technology (martech) silos creates technology, organizational, and capability gaps—preventing us from effectively driving toward coherent, profitable, and delightful customer experiences across both owned and paid media, throughout the entire customer life cycle. And yet, with the growing maturity of data management platform (DMP) implementations—combined with greater adoption and utilization of decision management platforms—these two unique worlds of adtech and martech can be bridged, with pre-built technology solutions that deliver new, previously unachievable use cases. By combining powerful DMP technology with advanced AI, marketing organizations can optimize ad spend, reduce attrition, improve acquisition rates, and increase revenues.

Download this whitepaper to learn about:

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology
  • The unified DMP solution offered by Merkle | Comet and Pega® Customer Decision Hub, Pega’s decisioning technology—providing a bi-directional integration of your third-party DMP and marketing technology

Category:

  • First tag
  • Sales Automation and Stuff
  • CRM
  • White Paper
  • Pega.com

Related resources

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

d8 news landing

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

In The News

See the latest updates and media coverage about Pega from around the world.

Featured Press Releases

Jan 18 2018

Pegasystems to Present at the Needham Growth Conference

CAMBRIDGE, Mass. – January 11, 2018 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced that its chief financial officer, chief...

Jan 18 2018

Pega Receives Highest Scores in Two Use Cases in Gartner’s Critical Capabilities for the CRM Customer Engagement Center

CAMBRIDGE, Mass. – December 26, 2017 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced it received the highest scores in the business-...

Jan 04 2018

Pegasystems Announces Quarterly Cash Dividend

CAMBRIDGE, Mass. – December 15, 2017 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced a quarterly cash dividend of $0.03 per share,...

Featured Media Coverage

Jan 22 2018

A New CRM Bill of Rights for the Future Empowered Enterprise

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 11 2018

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Dec 26 2017

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Related resources

First resource

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Optional resource type

Second resource

Simplify and automate to reduce costs and improve agility.

Third resource

Simplify and automate to reduce costs and improve agility.

d8 browse page

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Insert Page Title Here

Newsworthy is an understatement. Our industry-leading solutions help the world's largest companies build applications engineered for the future.

Jan 18 2018

A New CRM Bill of Rights for the Future Empowered Enterprise

Jan 18 2018

6 Customer Experience Trends to Watch in 2018

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Date

Topic

Industry

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

d8 browse page media

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Media Coverage

Newsworthy is an understatement. Our industry-leading solutions help the world's largest companies build applications engineered for the future.

Jan 18 2018

A New CRM Bill of Rights for the Future Empowered Enterprise

Jan 18 2018

6 Customer Experience Trends to Watch in 2018

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Date

Topic

Industry

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

d8 browse page press

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Press Releases

Newsworthy is an understatement. Our industry-leading solutions help the world's largest companies build applications engineered for the future.

Jan 18 2018

A New CRM Bill of Rights for the Future Empowered Enterprise

Jan 18 2018

6 Customer Experience Trends to Watch in 2018

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Date

Topic

Industry

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

June 5, 2018

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

Jan 18 2018

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 18 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article summary. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.

d8 details page press

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

New community fosters collaborative approach to developing Pega apps for both experienced and new developers

LAS VEGAS – June 5, 2018Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced Pega Community, an open online community empowering Pega users of all experience levels to build better software without coding. This new community allows anyone – from novice to expert – to access the latest resources and tutorials to unlock the power of Pega Infinity™, Pega’s next generation digital transformation suite.

Pega Community homepage

As organizations race to digitally transform their businesses, people with the skills to rapidly create the required solutions are in high demand. Pega Community aims to change how software gets built and redefine who gets to build it by providing an engaging educational resource for Pega’s no-code development environment. From business users to veteran developers, the site offers valuable resources to quickly drive successful digital transformation projects from start to finish. Members can stay current with Pega technology, enhance existing skills, and take their careers to the next level. Pega Community allows developers to network with each other to share ideas and discuss projects, while providing Pega clients with a prime resource to find people with the necessary skills needed for their next project.

Find out what's new

Pega Community is open today and offers the following:

  • Pega Launchpad: New Pega users can engage with several core ‘missions’ to help familiarize them with Pega and accelerate their learning – at their own pace. These missions include a look at key Pega capabilities such as artificial intelligence (AI) and robotics; designing effective applications to meet users’ goals; tips on leveraging Pega Community; and more. Users will soon be able to earn badges they can attach to their profiles as they complete courses, learn new skills, and quickly gain confidence to develop solutions on their own.
  • Pega Community Profiles and ”Find a Pega Pro”: Newly expanded profile pages enable Pega Community members to build their personal Pega brand and connect with other developers and potential employers. Profiles include project history, areas of expertise, and availability status for new projects. Additionally, users can showcase their achievements with their official verified Pega certifications, as well as badges earned from completing courses, attending events and seminars, demonstrating product knowledge, and more. Through the new “Find a Pega Pro” tool, Pega’s industry-leading clients – representing some of the most successful companies in the world – can search within their own organizations to find available Pega developers who match the skills and qualifications they’re seeking. This tool will help Pega Community members looking for their next project to market their skills and find exciting new career opportunities.
  • Project Hub: Project Hub gives users a comprehensive, centralized source of information, guidance, and tools needed to run successful Pega projects. These continuously updated resources – from basic to advanced articles, to templates and role-specific resources – bolster success by helping users accelerate projects, ensure app quality and relevance, and drive agility. The information is structured around the project lifecycle and key capabilities for fast and easy reference. For the first time, users have access to all the delivery insights cultivated from more than 35 years of Pega consulting projects.

Pega Community will be debuted during today’s keynote presentation at PegaWorld — Pega’s annual conference being held through June 6 in Las Vegas. To join Pega Community, please visit https://community.pega.com/.

Quotes & Commentary

“AI and automation technologies have generated tremendous hype, but the potential within the enterprise remains largely untapped,“ said Don Schuerman, chief technology officer and vice president, product marketing, Pegasystems. “Organizations must augment their human intelligence with AI across the entire organization in order to move beyond basic efficiency improvements. By deploying AI and automation with an end-to-end view in mind, businesses can move closer to fulfilling their customer centric vision.”

Download related media assets for this story.

All trademarks are the property of their respective owners.

The information contained in this press release is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release and timing of any features or functionality described remains at the sole discretion of Pegasystems, Pegasystems specifically disclaims any liability with respect to this information.

Media Contacts

Lisa Pintchman Rogers
VP, Corporate Communications
Lisa.Pintchman@pega.com
+1 617-866-6022

North America

Sean Audet
Director, Corporate Communications
Sean.Audet@pega.com
+1 617-528-5230

Ilena Ryan
Sr. Manager, Public Relations
Ilena.Ryan@pega.com
+1 617-866-6722

Europe

Joanna Richardson
Director, Corporate Communications
Joanna.Richardson@pega.com
+44 (0) 118 9651 660

Jon Brigden
PR & Communications Manager
Jon.Brigden@pega.com
+44 (0) 118 9398 584

Pegasystems Inc.

One Rogers St.
Cambridge, MA 02142
U.S.A.
Phone +1 617-374-9600
Fax +1 617-374-9620

Placeholder for this page's header
2018 Agenda

Session: spark talk

Insert Page Title Here

Date and Location

Insert Time Here
Insert Location Here

Speaker(s)

Alan Trefler

President and CEO

Pegasystems

Micheal Hines

President

Cisco

Winifred Gomez

Vice President

Accenture

Insert Event Description Here. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.

What you'll learn

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology

Register Now

Time is running out to take advantage of end-of-year pricing.

Become a PegaWorld Insider

Stay up-to-date on all the latest PegaWorld news and announcements.

Connect to start a conversation

#PegaWorld18

Placeholder for this page's header
2018 Agenda

Session: spark talk

Alan's keynote

Date and Location

June 3, 2018, 10:00A - 11:00A
MGM Grand Hotel, Room 2014

Speaker(s)

Alan Trefler

President and CEO

Pegasystems

Micheal Hines

President

Cisco

Winifred Gomez

Vice President

Accenture

Insert Event Description Here. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.

What you'll learn

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology

Register Now

Time is running out to take advantage of end-of-year pricing.

Become a PegaWorld Insider

Stay up-to-date on all the latest PegaWorld news and announcements.

Connect to start a conversation

#PegaWorld18

Placeholder for this page's header
2018 Agenda

Session: spark talk

What Aflac is Learning About Consumer Expectations Through Monitoring Tech Disruptions

Date and Location

June 4, 2018, 2:00P - 4:00P
MGM Grand Hotel, Room 2046

Speaker(s)

Alan Trefler

President and CEO

Pegasystems

Micheal Hines

President

Cisco

Winifred Gomez

Vice President

Accenture

Insert Event Description Here. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.

What you'll learn

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology

Register Now

Time is running out to take advantage of end-of-year pricing.

Become a PegaWorld Insider

Stay up-to-date on all the latest PegaWorld news and announcements.

Connect to start a conversation

#PegaWorld18

event landing

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Events at Pega: Meet the people behind the tech

Join Pega thought leaders, customers, and partners from around the world and explore the power of Pega firsthand.

Featured Pega Events

Conference | June 3-6, 2018

PEGAWORLD 2018

We get it. Plenty of events promise big things, or to make dreams come true. At our flagship event, PegaWorld, we definitely think big - but we also empower you with the technology and know-how to turn ideas into actual results.

Networking | Multiple Dates

Customer Engagement Summits

Customer engagement, digital transformation - where do you stand? Which technology is best? Artifical Intelligence? Robotics? The Customer Engagement Summits offers you the opportunity to meet your peers, talk to experts, listen to business experiences and turn your digital transformation into a reality!

Showing 555 results in filter 1, filter 2, and "search term" (Clear filters)

Type

Location

Industry

Conference | Rebruary 26 - March 1 2018 | Barcelona, Spain

Mobile World Congress

The Pega Communications and Media team is hosting a meeting room at Mobile World Congress - the world's largest gathering for the mobile industry. Visit us in Hall 2, stand C31MR at the Fira Gran Via conference facility in Barcelona, Spain. View the event page to request a meeting in advance.

Request a Meeting

Conference | Rebruary 26 - March 1 2018 | Barcelona, Spain

Mobile World Congress

The Pega Communications and Media team is hosting a meeting room at Mobile World Congress - the world's largest gathering for the mobile industry. Visit us in Hall 2, stand C31MR at the Fira Gran Via conference facility in Barcelona, Spain. View the event page to request a meeting in advance.

Request a Meeting

Conference | Rebruary 26 - March 1 2018 | Barcelona, Spain

Mobile World Congress

The Pega Communications and Media team is hosting a meeting room at Mobile World Congress - the world's largest gathering for the mobile industry. Visit us in Hall 2, stand C31MR at the Fira Gran Via conference facility in Barcelona, Spain. View the event page to request a meeting in advance.

Request a Meeting

Conference | Rebruary 26 - March 1 2018 | Barcelona, Spain

Mobile World Congress

The Pega Communications and Media team is hosting a meeting room at Mobile World Congress - the world's largest gathering for the mobile industry. Visit us in Hall 2, stand C31MR at the Fira Gran Via conference facility in Barcelona, Spain. View the event page to request a meeting in advance.

Request a Meeting

Conference | Rebruary 26 - March 1 2018 | Barcelona, Spain

Mobile World Congress

The Pega Communications and Media team is hosting a meeting room at Mobile World Congress - the world's largest gathering for the mobile industry. Visit us in Hall 2, stand C31MR at the Fira Gran Via conference facility in Barcelona, Spain. View the event page to request a meeting in advance.

Request a Meeting

Conference | Rebruary 26 - March 1 2018 | Barcelona, Spain

Mobile World Congress

The Pega Communications and Media team is hosting a meeting room at Mobile World Congress - the world's largest gathering for the mobile industry. Visit us in Hall 2, stand C31MR at the Fira Gran Via conference facility in Barcelona, Spain. View the event page to request a meeting in advance.

Request a Meeting

We’re creating an environment where we know our customers individually, and we want to use what we know to really understand what’s important to them – so we can be there in the moments that matter.

Jessica Cuthbertson CEO, RBS

event detail

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
Pega Events

CRM Applications for Real-Time Engagement

Pega’s AI powered CRM Suite is transforming the way enterprises drive greater engagement across the entire customer journey.

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

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

  • The growing importance and demands of a unified adtech and martech world
  • Four foundational use cases for unifying your DMP
  • The role of decisioning technology
  • The unified DMP solution offered by Merkle | Comet and Pega® Customer Decision Hub, Pega’s decisioning technology—providing a bi-directional integration of your third-party DMP and marketing technology

Event Agenda


11:00 - 12:00 pm

Registration


11:00 - 12:00 pm

Networking Lunch


11:00 - 12:00 pm

Welcome & Keynote


11:00 - 12:00 pm

Customer Engagement Program: Panel Discussion, Demos, Presentations


11:00 - 12:00 pm

Networking Reception


Register now

(all fields are required)

Fill out this form with LinkedIn

Location Details

This Is The Place Where The Event Is Happening

123 Sesame St.

New York, NY 10012

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat.

Hear From Our Industry Leaders

Stanley Wheeler

Executive Director, My Company

Show more

Stanley Wheeler

Executive Director, My Company

Show more

Stanley Wheeler

Executive Director, My Company

Show more

Stanley Wheeler

Executive Director, My Company

Show more

Stanley Wheeler

Executive Director, My Company

Show more

Stanley Wheeler

Executive Director, My Company

Show more

Highlights from 2017

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #3

Simplify and automate to reduce costs and improve agility.

Event Sponsors

Related Resources

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #3

Simplify and automate to reduce costs and improve agility.

event form example

Register now

(all fields are required)

Fill out this form with LinkedIn

sticky navbar

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
ROBOTIC AUTOMATION

Automation to Get Work Done

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

Automation is a Journey

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

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

Anthem VideoAnthem Video

Whitepaper

Anthem: Service Desktop

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

Transformational Results

321% ROI in less than 12 months. 75% cost savings. 75% productivity improvements. These are transformational outcomes. Getting there takes more than just a few robots. You need one unified automation engine.

Use business process management to orchestrate people and systems. Deploy RPA to take repetitive work out of your operation. Use case management to manage it all from end to end.

You define service level agreements, route work, and apply rules and advanced intelligence. You can jumpstart with RPA, sure – but you’ll be able to fly past the 20% improvement companies see from robotics alone.

Why? Because Pega’s capabilities are unified on one platform. No duct tape. No wiring a bunch of things together. You think about outcomes from end to end. Your technology should be able to get that end to end work done.

Anthem VideoAnthem Video

Whitepaper

Anthem: Service Desktop

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

Give Your Employees a Robot

Imagine if you could give back five minutes of every employee’s day. You can if you free them from wrangling across systems and process siloes for information. How? Software robots that automate the desktop tasks that frustrate your people and slow them down. We call these “productivity bots.”

Productivity bots collaborate with your employees to bridge systems and process siloes. They do work like tabbing, searching, and copying and pasting – so your people can focus on your customers.

Leveraging productivity bots that simplify the employee experience injects instant ROI into your business. In just two to three weeks you'll turn all your service agents, back-office workers, or front-line sellers into productivity ninjas. They’ll be happier. You’ll be happier. And your customers will be happier.

Anthem VideoAnthem Video

Whitepaper

Anthem: Service Desktop

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

Find Improvement Opportunities

It’s 3 p.m. Do you know how your employees are doing? What are they struggling with? What best practices have they discovered? How do you help them be more effective?

You might have KPIs, but do you know what contributes to those KPIs? What systems are effective? What workarounds your employees are taking? New apps get deployed, processes change, regulatory environments shift – it’s the never-ending cycle of change. You need continuous insights to measure the impact of these changes.

Pega Workforce Intelligence captures insights at the desktop. It gets you the details of how work gets done. It uses real-time AI to tell you what systems and processes are getting in the way of employee productivity.

Because once you know the details, you can act. And that makes all the difference.

Anthem VideoAnthem Video

Whitepaper

Anthem: Service Desktop

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

The Last Mile of Integration

Mainframes without APIs? CRM and other mission critical apps? You can’t automate if you can’t connect to the systems that matter. Pega gives you the tools you need to bridge the last mile of integration. It’s everything you need to wrap and renew your enterprise applications.

Productivity bots collaborate with your employees to bridge systems and process siloes. They do work like tabbing, searching, and copying and pasting – so your people can focus on your customers.

Leveraging productivity bots that simplify the employee experience injects instant ROI into your business. In just two to three weeks you'll turn all your service agents, back-office workers, or front-line sellers into productivity ninjas. They’ll be happier. You’ll be happier. And your customers will be happier.

Anthem VideoAnthem Video

Whitepaper

Anthem: Service Desktop

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

Ensure Governance and Oversight

As organizations continue to collect software robots, the speed of application updates accelerates, and the application of artificial intelligence broadens. Sooner or later, you’ll get caught up in a management nightmare if you have not considered how to provide consistent oversight and governance over bots, cognitive or not.

Pega’s enterprise process transformation platform helps orchestrate complex processes, and the Pega Customer Decision Hub supports deterministic rules in addition to advanced adaptive analytics. Rest assured regulatory compliance is maintained across the enterprise.

Capabilities such as auto self-documentation ensure an audit trail is maintained of all activities so compliance risk is minimized and required reporting is streamlined and automated.

Anthem VideoAnthem Video

Whitepaper

Anthem: Service Desktop

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

blog homepage

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

Future Proof

The next best ideas in digital transformation.

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Challenge

Functional Area

Topic

Industry

Matthew Nolan

A one-to-one approach to managing customer lifetime value

Gerry McCool

Why smart factories need digital prescriptive maintenance

Gerry McCool

Is Lean still relevant in the Digital Age?

Kate Fowler

3 capabilities insurers need for outstanding customer engagement

Anthony Abdulla

7 reasons why you should embrace low-code development right now

Baruch Sachs and Leanne Russell

Pega Catalyst™: Applying design thinking principles to speed digital transformation

Kate Fowler

3 capabilities insurers need for outstanding customer engagement

Anthony Abdulla

7 reasons why you should embrace low-code development right now

Baruch Sachs and Leanne Russell

Pega Catalyst™: Applying design thinking principles to speed digital transformation

Kate Fowler

3 capabilities insurers need for outstanding customer engagement

Anthony Abdulla

7 reasons why you should embrace low-code development right now

Baruch Sachs and Leanne Russell

Pega Catalyst™: Applying design thinking principles to speed digital transformation

blog post

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search
3 Capabilities Insurers Need for Outstanding Customer Engagement 3 Capabilities Insurers Need for Outstanding Customer Engagement

3 Capabilities Insurers Need for Outstanding Customer Engagement

By Kate Fowler, Sep 25 2018

Digital technology is changing how clients engage with insurers.

Remember the old days when customers could only conduct business either in person or over the phone? Now insurers need to be able to engage via the internet, mobile devices, email, call center, customer service agents, virtual voice assistants, chatbots, and whatever devices come next. Channels are evolving constantly and customers expect insurers to keep up. They expect you to meet them on their channel of choice and not the other way around.

Why are expectations so high? Insurance consumers, both retail and commercial, are already experiencing real-time service across multiple channels from their banks, retailers, suppliers, third-party information services, etc. They are looking at the insurance industry and asking, "Why can’t my insurer do this?" They are expecting an informed and personalized experience every time they engage with you.

The reality is, customer service is not about how many channels you have – it’s about how you service your customers across those channels.

Most insurers have implemented the ability to connect with clients and agents over many of the above-mentioned channels, but a customer’s experience often varies from channel to channel. If a customer switches channels, they likely have to start from scratch and must repeat their problem and information again. This can be frustrating for both the consumer and the insurance provider.

However, this problem can’t be fixed with the old method of just "throwing more people at it." Instead, to provide real-time, contextual service that meets and exceeds customers' expectations, insurers should leverage strategic investments in digital technology that connect their channels and data, plus core functionality that's leveraged across all channels.

There are three changes insurers need to make right now to create a proactive, digital, client-focused platform for customer engagement.

1. Empower 1-to-1 engagement with real-time AI: Artificial Intelligence can help provide the personalized engagement that insurance consumers value. By analyzing and applying machine learning to each customer’s historical, cross-channel data you will be able to anticipate client needs, provide proactive service, and grow the value of your relationship with each client. Two of the most effective applications of AI in the insurance industry are powering intelligent virtual assistants, like chatbots, or providing guided next best actions to call center agents. AI helps insurers provide consistency with established internal policies and guidelines, and personalized service.

2. Connect the front and back office with end-to-end robotic automation and case management: Bridge the gap between your back-end legacy systems and your digital front end by connecting data and workers using robotic process automation (RPA) and case management. RPA automates data integrations and eliminates the tedious search / copy / paste of a customer’s history across process silos that typically slow down productivity. Case management orchestrates this data with your processes, people, robots, and applications to adaptively manage customer journeys to completion.

3. Unite experiences across channels: Engage with customers and maintain the context of a conversation across a variety of channels and devices by making omni-channel access a priority. This means integrating multi-channel systems with case management and re-using functionality across channels to create a single, connected conversation with customers.

Change doesn’t have to take multiple years or costs millions of dollars.

These three changes can significantly increase the opportunity for consumer retention by providing a frictionless, digital consumer experience. To start, plan for and focus on customer journeys and outcomes. Then combine out-of-the-box product capabilities with an agile methodology.

Insurers are already realizing tremendous business value and return on investment from engaging with customers on their preferred channel, connecting conversations across digital ecosystems with case management, robotics, and end-to-end automation, and using AI as a guide for personalized, client-centric, outcome-driven experiences.

Learn More

Category

About the Author

In her role as Director and Insurance Industry Principal, Kate Fowler, helps Pega’s clients optimize their operations, solve business challenges, and leverage digital technology to drive business strategy.

careers homepage

Powerful software. Powered by you.

Powerful software. Powered by you.

Placeholder for rest of the page

Anthem VideoAnthem Video

Eyebrow

Headline

Anthem VideoAnthem Video

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

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

wysiwyg kitchen sink

Logo Placeholder
Placeholder for helper text and did-you-mean text.
Close search

WYSIWYG Elements to Bolt Components

Ideal CKEditor Config

Bolt needs to create an example of CKEditor that can map to web components, and all the related Bolt components need to become web components.

  ClassicEditor
  .create( document.querySelector( '#editor' ), {
    heading: {
      options: [
        { model: 'paragraph', view: 'bolt-text', title: 'Paragraph' },
        { model: 'headline1', view: 'bolt-text', title: 'Headline xxxlarge h1', attributes: { headline: true, font-size: 'xxxlarge', tag: 'h1' } },
        { model: 'headline2', view: 'bolt-text', title: 'Headline xxlarge h2', attributes: { headline: true, font-size: 'xxlarge', tag: 'h2' } },
        { model: 'headline3', view: 'bolt-text', title: 'Headline xlarge h3', attributes: { headline: true, font-size: 'xlarge', tag: 'h3' } },
        { model: 'headline4', view: 'bolt-text', title: 'Headline large h4', attributes: { headline: true, font-size: 'large', tag: 'h4' } },
        { model: 'headline5', view: 'bolt-text', title: 'Headline small h5', attributes: { headline: true, font-size: 'small', tag: 'h5' } },
        { model: 'headline6', view: 'bolt-text', title: 'Headline xsmall h6', attributes: { headline: true, font-size: 'xsmall', tag: 'h6' } },
        { model: 'subheadline1', view: 'bolt-text', title: 'Subheadline xxlarge', attributes: { subheadline: true, font-size: 'xxlarge', tag: 'p' } },
        { model: 'subheadline2', view: 'bolt-text', title: 'Subheadline xlarge', attributes: { subheadline: true, font-size: 'xlarge', tag: 'p' } },
        { model: 'subheadline3', view: 'bolt-text', title: 'Subheadline large', attributes: { subheadline: true, font-size: 'large', tag: 'p' } },
        { model: 'eyebrow', view: 'bolt-text', title: 'Eyebrow', attributes: { eyebrow: true, tag: 'p' } },
        { model: 'link', view: 'bolt-text', title: 'Link', attributes: { eyebrow: true, tag: 'a' } },
        { model: 'blockquote', view: 'bolt-blockquote', title: 'Blockquote' },
        { model: 'ordered-list', view: 'bolt-ordered-list', title: 'Ordered list' },
        { model: 'unordered-list', view: 'bolt-unordered-list', title: 'Unordered list' },
        { model: 'code', view: 'bolt-code-snippet', title: 'Code snippet' },
      ]
    }
  } )
  .then( ... )
  .catch( ... );
    

CKEditor Docs

The docs show that mapping each style option to a specific tag and class is possible, but we need to figure out if it can do attributes as well. Otherwise, we'd have to make sure our web components can work without any attributes.

https://github.com/ckeditor/ckeditor-dev/tree/major/plugins
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-protectedSource

Headlines

Headline 1 is XXLarge Headline

Headline 2 is XLarge Headline

Headline 3 is Large Headline

Text

Body text is medium sized text.

Italic text is emphasized.

Bold text is strong.

Superscript text is sup.

Subscript text is sub.

Link

Link is link component with default settings.

Blockquote

Blockquote is blockquote component with default settings.

Ordered List

  1. Ordered list is
  2. Ordered list component
  3. with default settings

Unordered List

  • Unordered list is
  • Unordered list component
  • with default settings

Code

  Code text is the Code Snippet component with default settings.

Table

Column 1 Column 2 Column 3
Row 1 Table is the Table component with default settings. R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

Missing in Bolt

  1. Figure (Image and Video): the figure component needs to be styled.
  2. All existing components other than the code snippet are not yet web components

animate docs

2.17.0

Animate

Animations for Bolt Design System

Published

History
View changes
Install
yarn add @bolt/components-animate
Source code
View on Github
Dependencies

The Bolt Animate Component

  <bolt-animate in="fade-in"> ...</bolt-animate>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
InitialAppearance string hidden
  • default or hidden
In string none
  • none, fade-in, slide-down, fade-in-slide-up, fade-in-slide-down, fade-in-slide-left, fade-in-slide-right, fade-in-fade-out
InDuration

Set in milliseconds

number 500
InDelay

Set in milliseconds

number 0
InEasing string ease
  • ease, ease-in, ease-out, ease-in-out, linear
InOrder number 1
Idle string none
  • none, pulse, spin, heart-beat
IdleDuration

Set in milliseconds

number 500
IdleDelay

Set in milliseconds

number 0
Out string none
  • none, fade-out, fade-out-slide-up, slide-up, fade-out-slide-down, fade-out-slide-left, fade-out-slide-right
OutDuration

Set in milliseconds

number 350
OutDelay

Set in milliseconds

number 0
OutEasing string ease
  • ease, ease-in, ease-out, ease-in-out, linear
OutOrder number 1
ShowMeta boolean false

Slots

Name Required? Description
default No wrapped content to animate

Methods

Name Description
triggerAnimIn() => boolean start the in animation, will go to idle animation after
triggerAnimOut() => boolean start the out animation

Events

Name Detail Description
bolt-animate:end:in {} Indicates when the in animation concluded
bolt-animate:end:out {} Indicates when the out animation concluded

animate

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

animate build stages

Build Ins

in="none"

none


in="fade-in"

fade-in


in="slide-down"

slide-down


in="fade-in-slide-up"

fade-in-slide-up


in="fade-in-slide-down"

fade-in-slide-down


in="fade-in-slide-left"

fade-in-slide-left


in="fade-in-slide-right"

fade-in-slide-right


in="fade-in-fade-out"

fade-in-fade-out


Build Outs

out="none"

none


out="fade-out"

fade-out


out="fade-out-slide-up"

fade-out-slide-up


out="slide-up"

slide-up


out="fade-out-slide-down"

fade-out-slide-down


out="fade-out-slide-left"

fade-out-slide-left


out="fade-out-slide-right"

fade-out-slide-right


editor docs

2.17.0

Editor

Next Generation live editor for Bolt Web Components

Bolt Editor

  {% set content %}
  <bolt-text>Hello World!</bolt-text>
{% endset %}

{% include '@bolt-components-editor/editor.twig' with {
  styles: ['/build/bolt-global.css'],
  scripts: ['/build/bolt-global.js'],
  content: content,
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Content *

HTML content to edit

string
Styles *

URL paths to CSS files that the editable content requires

array
Scripts *

URL paths to JS files that the editable content requires

array
Id

ID for this content. Useful for saving back to a data store like Drupal by passing in the paragraph ID. ID emitted in save event.

string

editor simple

Edit
This is a Button; click "Edit" above to edit me

editor blockquote

Edit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

editor modal

Edit
This is a Button triggering an on-page Modal This is a Link triggering an on-page Modal CTA Text
Edit
How Pega technology resolves Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

micro journey docs

Micro Journeys

A collection of Web Components for animated storytelling

See a demo of the Micro Journeys with Editor in a full page

character docs

Character Docs

Usage

  <bolt-character size="small"></bolt-character>

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Size *

Character Size.

string small
  • small, medium, large
CharacterImage

Pre-defined package image.

string customer-happy
  • customer-happy, customer-neutral, customer-sad, customer-surprise, pega-rep, u-comm-plus, custom
CharacterCustomUrl

URL of a custom image.

string https://www.fillmurray.com/g/200/200
UseIcon

Use a bolt-icon in place of an image Url.

boolean false
ConstrainBottomSlot

Constrain the bottom slot to the width of the character. Used when right or left slots overflow character height and encroach on bottom slot.

boolean false
AddBackgroundPadding

Add padding around the character equalling the width/height of the background. Collapses on mobile.

boolean false

Slots

Name Requred? Description
top No
right No
bottom No
left No

character

Edit
Slot: top Slot: left Slot: right Slot: bottom

character kitchen sink

Toggle light/dark theme Trigger Characters Animate In

Official Editor Starters

Company CTA Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Uh oh!

To avoid costly calls to your service center (and keeping customers happy), you ned to stay one step ahead. That's why Pega's real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It's not mind-reading. It's signals

Why is my bill so high? Let me check.

Customer billing view I am text

Uh oh!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi atque consectetur delectus deserunt eaque exercitationem fugiat mollitia nobis nostrum, odit placeat, quae repudiandae, saepe sequi sint tempore ut velit. CTA text

Test constrainBottomSlot, overlapping bottom and right content can't overlap

Very long. Lorem ipsem text not too long.

Bill is due!

Bill is due!

Bill is due!

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

I'm a small character

Slot: left Slot: right Slot: bottom

I'm a medium character

I'm a medium character

I'm a medium character

I'm a large character

Bill is due!

I'm a large character. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Bill is due! Lots more text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

I'm a large character

Bill is due!

lorem

Bill is due!

Bill is due!

Bill is due!

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Why is my bill so high? Let me check.

Customer billing view

Corporis expedita labore

Lorem ipsum dolor sit amet
Company

You are about to reach your monthly data limit...

Customer

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer
Company CTA Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Uh oh!

To avoid costly calls to your service center (and keeping customers happy), you ned to stay one step ahead. That's why Pega's real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It's not mind-reading. It's signals

Why is my bill so high? Let me check.

Customer billing view I am text

Uh oh!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi atque consectetur delectus deserunt eaque exercitationem fugiat mollitia nobis nostrum, odit placeat, quae repudiandae, saepe sequi sint tempore ut velit. CTA text lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Short text.

Customer

Not very long. Lorem ipsum dolor.

lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer
lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer
lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

connection docs

Connection Docs

<bolt-connection size="small"></bolt-connection>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Speed

Speed of the animation, typically rotation.

string 1000
AnimType

Type of predefined animated SVG to use.

string connectionBand
  • connectionBand or tripleConnectionBand
Direction

Direction of animation, currently only available on Connection Band

string left
  • left or right

connection

Edit
top bottom

Status Dialogue Bar Docs

<bolt-status-dialolgue-bar size="small"></bolt-status-dialolgue-bar>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
IconName

Icon name.

string mobility
  • -none-, academy, add, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-atom, brand-meteor, brand-molecule, brand-operations, brand-orbit, brand-rocket, brand-satelite, brand-triangle, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, collaboration, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, discussions, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, file-small, filter, financial, full-screen, github, global, government, healthcare, heart, hospitality, ideas, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, list, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, questions, refresh, reply, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, thumbs-up-open, time-open, training, transportation, trash, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, world-open, youtube-solid
IsAlertMessage

Is this an alert message? Changes it to error red.

boolean false
DialogueArrowDirection

Direction of the dialogue arrow direction.

string none
  • up, down, left, right, none
BoxFloatDirection

The direction in which the dialog box should be floated given extra space in container if no arrow dialog arrow direction is given.

string center
  • left, right, up, down, center

status dialogue bar

Edit

Hey now!

Bill almost due

Bill almost due

Bill almost due!! Take action now before this text wraps to another line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolores fuga in ipsum minus modi nihil nulla odit recusandae sapiente! Aspernatur inventore minima nobis odio reprehenderit? Aliquam laudantium quos repudiandae.

Up Arrow

Down Arrow

Left Arrow

Right Arrow

icon group docs

Icon Group Docs

<bolt-icon-group icon-one-name="eye" icon-two-name="eye" icon-three-name="eye" icon-color="teal"></bolt-icon-group>

icon group

Edit
Horizontal Icon Group Vertical Icon Group

micro journeys solo

Toggle light/dark theme
Edit
How Pega technology resolves

Simple Steps


Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

micro journeys

Toggle light/dark theme
Edit
How Pega technology resolves Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.
Toggle light/dark theme
Edit
How Pega technology resolves Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.
How Pega technology resolves Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

step 1 demo

Toggle light/dark theme
Edit
Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

step 2 demo

Toggle light/dark theme
Edit

Why is my bill so high? Let me check.

Customer billing view
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

step 3 demo

Toggle light/dark theme
Edit

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

step 4 demo

Toggle light/dark theme
Edit

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

step 5 demo

Toggle light/dark theme
Edit

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

svg animations docs

svg animations

SVG Animations

Triple Band, Left

Triple Band, Right

Connection Band, Right

Radar

Orbit

Automation

SVG Animations- Dark Versions

Automation

Orbit

Radar Dark

Connection Band Left

Debug Panel