brand colors

indigo, xdark #091734
indigo, dark #0b1d41
(base)
indigo #001f5f
indigo, light #3e67bb
indigo, xlight #abc2f2
navy, xdark #091734
navy, dark #0b1d41
(base)
navy #001f5f
navy, light #3e67bb
navy, xlight #abc2f2
yellow, xdark #664a00
yellow, dark #e8af17
(base)
yellow #ffc836
yellow, light #ffe399
yellow, xlight #fff1cc
teal, xdark #005154
teal, dark #0a6266
(base)
teal #10a5ac
teal, light #86cac6
teal, xlight #b7e4e6
orange, xdark #662200
orange, dark #b54812
(base)
orange #f76923
orange, light #ff9866
orange, xlight #ffccb3
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 #004880
(base)
blue #0076d1
blue, light #d6edff
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 — xdark
    Aa
    Aa
  • White (17.74)
    pass
    pass
  • Black (1.18)
    fail
    fail
  • indigo — dark
    Aa
    Aa
  • White (16.58)
    pass
    pass
  • Black (1.27)
    fail
    fail
  • indigo — base
    Aa
    Aa
  • White (15.43)
    pass
    pass
  • Black (1.36)
    fail
    fail
  • indigo — light
    Aa
    Aa
  • White (5.44)
    pass
    pass
  • Black (3.86)
    pass
    fail
  • indigo — xlight
    Aa
    Aa
  • White (1.79)
    fail
    fail
  • Black (11.73)
    pass
    pass
  • navy — xdark
    Aa
    Aa
  • White (17.74)
    pass
    pass
  • Black (1.18)
    fail
    fail
  • navy — dark
    Aa
    Aa
  • White (16.58)
    pass
    pass
  • Black (1.27)
    fail
    fail
  • navy — base
    Aa
    Aa
  • White (15.43)
    pass
    pass
  • Black (1.36)
    fail
    fail
  • navy — light
    Aa
    Aa
  • White (5.44)
    pass
    pass
  • Black (3.86)
    pass
    fail
  • navy — xlight
    Aa
    Aa
  • White (1.79)
    fail
    fail
  • Black (11.73)
    pass
    pass
  • yellow — xdark
    Aa
    Aa
  • White (8.25)
    pass
    pass
  • Black (2.54)
    fail
    fail
  • yellow — dark
    Aa
    Aa
  • White (1.99)
    fail
    fail
  • Black (10.58)
    pass
    pass
  • yellow — base
    Aa
    Aa
  • White (1.55)
    fail
    fail
  • Black (13.57)
    pass
    pass
  • yellow — light
    Aa
    Aa
  • White (1.26)
    fail
    fail
  • Black (16.7)
    pass
    pass
  • yellow — xlight
    Aa
    Aa
  • White (1.12)
    fail
    fail
  • Black (18.71)
    pass
    pass
  • teal — xdark
    Aa
    Aa
  • White (9.11)
    pass
    pass
  • Black (2.3)
    fail
    fail
  • teal — dark
    Aa
    Aa
  • White (7.11)
    pass
    pass
  • Black (2.95)
    fail
    fail
  • teal — base
    Aa
    Aa
  • White (3)
    pass
    fail
  • Black (7)
    pass
    pass
  • teal — light
    Aa
    Aa
  • White (1.86)
    fail
    fail
  • Black (11.28)
    pass
    pass
  • teal — xlight
    Aa
    Aa
  • White (1.38)
    fail
    fail
  • Black (15.25)
    pass
    pass
  • orange — xdark
    Aa
    Aa
  • White (11.71)
    pass
    pass
  • Black (1.79)
    fail
    fail
  • orange — dark
    Aa
    Aa
  • White (5.38)
    pass
    pass
  • Black (3.9)
    pass
    fail
  • orange — base
    Aa
    Aa
  • White (3)
    pass
    fail
  • Black (7)
    pass
    pass
  • orange — light
    Aa
    Aa
  • White (2.11)
    fail
    fail
  • Black (9.94)
    pass
    pass
  • orange — xlight
    Aa
    Aa
  • White (1.44)
    fail
    fail
  • Black (14.54)
    pass
    pass
  • gray — xdark
    Aa
    Aa
  • White (13.51)
    pass
    pass
  • Black (1.55)
    fail
    fail
  • gray — dark
    Aa
    Aa
  • White (6.54)
    pass
    pass
  • Black (3.21)
    pass
    fail
  • gray — base
    Aa
    Aa
  • White (3.25)
    pass
    fail
  • Black (6.46)
    pass
    pass
  • gray — light
    Aa
    Aa
  • White (1.29)
    fail
    fail
  • Black (16.25)
    pass
    pass
  • gray — xlight
    Aa
    Aa
  • White (1.08)
    fail
    fail
  • Black (19.47)
    pass
    pass
  • 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 — dark
    Aa
    Aa
  • White (9.38)
    pass
    pass
  • Black (2.24)
    fail
    fail
  • blue — base
    Aa
    Aa
  • White (4.65)
    pass
    pass
  • Black (4.51)
    pass
    pass
  • blue — light
    Aa
    Aa
  • White (1.21)
    fail
    fail
  • Black (17.42)
    pass
    pass
  • success — dark
    Aa
    Aa
  • White (6.62)
    pass
    pass
  • Black (3.17)
    pass
    fail
  • success — base
    Aa
    Aa
  • White (5.01)
    pass
    pass
  • Black (4.19)
    pass
    fail
  • success — light
    Aa
    Aa
  • White (1.2)
    fail
    fail
  • Black (17.51)
    pass
    pass
  • error — dark
    Aa
    Aa
  • White (7.82)
    pass
    pass
  • Black (2.68)
    fail
    fail
  • error — base
    Aa
    Aa
  • White (6.45)
    pass
    pass
  • Black (3.26)
    pass
    fail
  • error — light
    Aa
    Aa
  • White (1.35)
    fail
    fail
  • Black (15.5)
    pass
    pass
  • warning — dark
    Aa
    Aa
  • White (2.08)
    fail
    fail
  • Black (10.11)
    pass
    pass
  • warning — base
    Aa
    Aa
  • White (1.59)
    fail
    fail
  • Black (13.21)
    pass
    pass
  • warning — light
    Aa
    Aa
  • White (1.11)
    fail
    fail
  • Black (18.93)
    pass
    pass
  • social — facebook
    Aa
    Aa
  • White (6.95)
    pass
    pass
  • Black (3.02)
    pass
    fail
  • social — twitter
    Aa
    Aa
  • White (2.59)
    fail
    fail
  • Black (8.1)
    pass
    pass
  • social — linkedin
    Aa
    Aa
  • White (4.93)
    pass
    pass
  • Black (4.26)
    pass
    fail

theming

Theme Color Tokens

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

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary

Theme Color Tokens

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

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary

spacing overview

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

typography overview

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

breakpoints

  • xxsmall:
    320px
  • xsmall:
    400px
  • small:
    600px
  • medium:
    800px
  • large:
    1000px
  • xlarge:
    1200px
  • xxlarge:
    1400px
  • xxxlarge:
    1600px
  • xxxxlarge:
    1920px
  • iPhone Portrait: 320px
  • Galaxy Nexus Portrait: 360px
  • iPhone 6 Portrait: 375px
  • iPhone 6 Plus Portrait: 414px
  • Galaxy Note 3 Portrait: 540px
  • iPhone Landscape: 568px
  • Google Nexus 7 Portrait: 604px
  • Galaxy Nexus Landscape: 640px
  • iPhone 6 Landscape: 667px
  • iPhone 6 Plus Landscape: 738px
  • iPad Portrait: 768px
  • Galaxy Note 3 Landscape: 960px
  • Google Nexus 7 Landscape: 966px
  • iPad Landscape: 1024px
  • 11" MacBook Air: 1366px
  • 13" MacBook Air: 1440px
  • 21.5" iMac: 1980px

How to use

  .c-component-name {
  // Setting a min (mobile first)
  @include bolt-mq(xsmall) {
    background-color: red;
  }

  // Setting a max (desktop first)
  @include bolt-mq($until: xsmall) {
    background-color: blue;
  }

  // Setting a range (adaptive)
  @include bolt-mq($from: medium, $until: xlarge) {
    background-color: yellow;
  }

  // Setting orientation or other media queries
  @include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
    background-color: green;
  }
}

clearfix

Bolt Clearfix

Utility Description

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

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

Demo

Without Parent Clear Fix

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

With Parent Clear Fix

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

color

Bolt Colors

Utility Description

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

Demo

Social Colors
SOCIAL LINKEDIN

.u-bolt-color-social-linkedin

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

.u-bolt-color-blue-dark

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

BLUE BASE

.u-bolt-color-blue

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

BLUE LIGHT

.u-bolt-color-blue-light

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

.u-bolt-color-success-dark

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

SUCCESS BASE

.u-bolt-color-success

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

SUCCESS LIGHT

.u-bolt-color-success-light

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

.u-bolt-color-error-dark

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

ERROR BASE

.u-bolt-color-error

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

ERROR LIGHT

.u-bolt-color-error-light

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

.u-bolt-color-warning-dark

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

WARNING BASE

.u-bolt-color-warning

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

WARNING LIGHT

.u-bolt-color-warning-light

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

.u-bolt-color-indigo-xdark

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

INDIGO DARK

.u-bolt-color-indigo-dark

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

INDIGO BASE

.u-bolt-color-indigo

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

INDIGO LIGHT

.u-bolt-color-indigo-light

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

INDIGO XLIGHT

.u-bolt-color-indigo-xlight

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

.u-bolt-color-navy-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.

NAVY DARK

.u-bolt-color-navy-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.

NAVY BASE

.u-bolt-color-navy

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.

NAVY LIGHT

.u-bolt-color-navy-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.

NAVY XLIGHT

.u-bolt-color-navy-xlight

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

.u-bolt-color-yellow-xdark

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

YELLOW DARK

.u-bolt-color-yellow-dark

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

YELLOW BASE

.u-bolt-color-yellow

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

YELLOW LIGHT

.u-bolt-color-yellow-light

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

YELLOW XLIGHT

.u-bolt-color-yellow-xlight

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

.u-bolt-color-teal-xdark

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

TEAL DARK

.u-bolt-color-teal-dark

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

TEAL BASE

.u-bolt-color-teal

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

TEAL LIGHT

.u-bolt-color-teal-light

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

TEAL XLIGHT

.u-bolt-color-teal-xlight

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

.u-bolt-color-orange-xdark

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

ORANGE DARK

.u-bolt-color-orange-dark

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

ORANGE BASE

.u-bolt-color-orange

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

ORANGE LIGHT

.u-bolt-color-orange-light

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

ORANGE XLIGHT

.u-bolt-color-orange-xlight

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

.u-bolt-color-gray-xdark

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

GRAY DARK

.u-bolt-color-gray-dark

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

GRAY BASE

.u-bolt-color-gray

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

GRAY LIGHT

.u-bolt-color-gray-light

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

GRAY XLIGHT

.u-bolt-color-gray-xlight

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

.u-bolt-color-black

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

.u-bolt-color-white

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

displays

Bolt Display

Utility Description

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

Possible values include:

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

Demo

Display: block

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

Display: inline-block

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

Display: inline

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

Display: table

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

Display: table-row

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

Display: table-cell

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

Display: hidden

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

Display: flex

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

Display: inline-flex

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

flex

Bolt Flex

Utility Description

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

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

All demos below are resizable!

Demo

Flex items: Default

DEFAULT
DEFAULT
DEFAULT
DEFAULT
DEFAULT

Flex items: .u-bolt-flex-grow

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

Flex items: .u-bolt-flex-shrink

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

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

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

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

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

height

Bolt Height

Utility Description

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

Possible values include:

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

Demo

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

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-xsmall (0.3875rem)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-small (0.775rem)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-medium (1.55rem)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-large (3.1rem)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-xlarge (6.2rem)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-xxlarge (12.4rem)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-none (0)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-auto (auto)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-full (100%)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

.u-bolt-height-screen (100vh)

Begin Nisi amet elit blandit pellentesque pulvinar per facilisis id, taciti ante etiam iaculis ut eget porta nec vivamus, aliquet malesuada bibendum lorem morbi egestas duis. Platea fames nulla venenatis commodo inceptos convallis mollis sem, pretium duis ante porta cras amet erat litora posuere, elementum in accumsan parturient vel suspendisse hendrerit. Lorem tincidunt id suscipit dui parturient nascetur gravida ridiculus fames malesuada, netus cras potenti pellentesque facilisis sagittis euismod consequat nostra, dis faucibus ut duis nam accumsan montes eu cum. In sem facilisi quis odio cursus ridiculus, egestas urna purus vitae sit, laoreet convallis himenaeos proin feugiat. A nostra nec rhoncus libero habitasse senectus laoreet nisi ultricies mattis lectus odio, euismod inceptos venenatis magna dapibus sagittis nibh lobortis fermentum massa aliquet et, gravida cubilia class pretium mollis litora penatibus cursus adipiscing elit natoque. Mi sed aliquam pretium blandit euismod consequat suspendisse lobortis, dignissim taciti tempor iaculis ultrices ligula quam, maecenas donec vitae cursus dis cras ante.

Nisl gravida nibh iaculis inceptos netus senectus augue, ante velit dui praesent sodales dapibus cum facilisi, tempor integer nunc pellentesque primis fringilla. Conubia nunc egestas condimentum nostra magna neque himenaeos, sociis penatibus tellus non accumsan pellentesque est, montes nisl platea convallis fermentum eget.

Placerat dui cubilia dictum lacus natoque turpis integer penatibus posuere suspendisse, congue sit lectus elit per dictumst gravida duis sociis. Habitasse dictumst sapien volutpat suscipit diam viverra amet imperdiet sodales, sit cubilia mus libero ornare himenaeos lacinia sem natoque, eu ullamcorper nunc consectetur torquent gravida massa elementum. Nam dapibus rutrum tempus turpis magna porttitor massa eros class, varius platea eleifend tincidunt enim habitant facilisis ipsum aliquet nisi, convallis quis ultricies pellentesque fermentum fringilla magnis justo.

Dignissim velit at felis posuere consequat magnis facilisi vel non nascetur sociis, praesent malesuada molestie penatibus taciti lacus natoque venenatis luctus urna, quisque aliquam mus aliquet varius etiam facilisis blandit pretium hendrerit. Vehicula nunc fusce pharetra tempor vitae dolor potenti sollicitudin varius, lectus praesent fringilla morbi aenean massa nullam leo, duis elementum porta dignissim nascetur risus elit etiam. Aliquet senectus porta fames felis elit hendrerit praesent ante, vulputate consequat ultricies risus cum suscipit viverra bibendum laoreet, molestie facilisi lacus massa vel nunc sapien. Morbi aenean cursus sem sit nostra luctus vulputate dis justo maecenas, eros nibh aliquet dolor scelerisque tempus mauris cum curae duis, lobortis eleifend fermentum in ut viverra gravida condimentum tincidunt. Molestie mollis velit phasellus donec odio diam leo faucibus egestas neque convallis, congue curae pellentesque eleifend conubia natoque magnis posuere aenean a primis consequat, dictumst sagittis nisl sapien amet accumsan proin vivamus sed nullam. Cursus aptent gravida euismod nisl habitasse sociis ornare convallis at, suscipit ac quam nam sem inceptos vehicula magnis blandit, rutrum tincidunt elit hac amet vestibulum suspendisse primis. Sem iaculis imperdiet varius vel diam at senectus, facilisis nisl purus fermentum hendrerit natoque, aliquam ante turpis luctus habitasse cum End.

opacity

Bolt Opacity

Utility Description

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

Possible values include:

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

Demo

Opacity class: .u-bolt-opacity-100

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

Opacity class: .u-bolt-opacity-80

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

Opacity class: .u-bolt-opacity-60

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

Opacity class: .u-bolt-opacity-40

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

Opacity class: .u-bolt-opacity-20

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

Opacity class: .u-bolt-opacity-0

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

shadow

Bolt Shadows

Utility Description

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

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

Demo

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

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

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

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

spacings

Bolt Spacing

Utility Description

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

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

(xx) Possible property values include:

  • padding
  • margin

(yy) Possible direction values include:

  • top
  • right
  • bottom
  • left

(zz) Possible size values include:

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

Demo

.u-bolt-margin-left

margin-left: 1.55rem

.u-bolt-margin-left-large

margin-left: 3.1rem

.u-bolt-margin-left-xxlarge

margin-left: 12.4rem

.u-bolt-padding

padding: 1.55rem

.u-bolt-padding-large

padding: 3.1rem

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

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

text align

Bolt Text Align

Utility Description

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

Possible values include:

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

Demo

.u-bolt-text-align-right

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

.u-bolt-text-align-left

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

.u-bolt-text-align-center

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

.u-bolt-text-align-justify

Diam a ad vel fermentum maecenas ipsum

Convallis habitasse mattis natoque himenaeos conubia tincidunt.

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

text decoration

Bolt Text Decoration

Utility Description

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

Possible values include:

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

Demo

.u-bolt-text-decoration-none

Erat sit dolor enim placerat sodales cubilia

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

.u-bolt-text-decoration-underline

Erat sit dolor enim placerat sodales cubilia

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

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

Erat sit dolor enim placerat sodales cubilia

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

visually hidden

Bolt Visually Hidden

Utility Description

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

Demo

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

Visibility toggle

[ Item to hide ]
SassDoc references

z index

Bolt Z-index

Utility Description

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

For example: .fab

Demo

Z-Index: fab: 300
Utility Class: fab

Z-Index: modal: 200
Utility Class: modal

Z-Index: modalBG: 180
Utility Class: modalBG

Z-Index: navFixed: 160
Utility Class: navFixed

Z-Index: tooltip: 140
Utility Class: tooltip

Z-Index: popover: 120
Utility Class: popover

Z-Index: nav: 100
Utility Class: nav

Z-Index: contentTop: 80
Utility Class: contentTop

Z-Index: content: 60
Utility Class: content

Z-Index: contentBottom: 40
Utility Class: contentBottom

Z-Index: backgroundTop: 20
Utility Class: backgroundTop

Z-Index: background: 0
Utility Class: background

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

SassDoc references

accordion docs

Accordion

A vertical list of items, each of which can be expanded or collapsed to show more content.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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)
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
Install Install 
  npm install @bolt/components-accordion
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue handorgel

accordion

Open Accordion Close Accordion
This is the accordion content.
Open Accordion Close Accordion
This is the accordion content.
Open Accordion Close Accordion
This is the accordion content.

accordion single variations

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

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

Multiple open items (default)

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

accordion separator variations

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

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

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

accordion box shadow variations

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

Box shadow

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

Box shadow, no separator

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

No box shadow

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

accordion spacing variations

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

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

Spacing: xsmall

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

Spacing: small

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

Spacing: medium

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

Spacing: large

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

accordion icon valign variations

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

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

accordion inactive variations

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.

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

accordion theme variations

Accordion inside various themes

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

Accordion with shadow inside various themes

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

accordion content variations

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.

Get the presentation Watch video

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.

Get the presentation Watch video
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.

Get the presentation Watch video

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.

Share this page LinkedIn
Copied!
Open Accordion Close Accordion
Open Accordion Close Accordion
Open Accordion Close Accordion
This is the accordion content.
Open Accordion Close Accordion
This is the accordion content.
Open Accordion Close Accordion
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?

accordion trigger and content spacing variations

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.

Open Accordion Close Accordion
This entire accordion has the spacing prop defined.
Open Accordion Close Accordion
This entire accordion has the spacing prop defined.
Open Accordion Close Accordion
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.

Open Accordion Close Accordion
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.

Open Accordion Close Accordion
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.

accordion web component

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

Action blocks

A grid layout of actions consist of icon and text.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
spacing

Spacing surrounding each action block.

 string medium
  • xsmall , small , medium
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
(deprecated)

Use max_items_per_row prop instead.

 — —
  • —
align
(deprecated)

Use valign prop instead.

 — —
  • —
border
(deprecated)

Use borderless prop instead.

 — —
  • —
Install Install 
  npm install @bolt/components-action-blocks
Dependencies @bolt/components-icon @bolt/core-v3.x

action blocks

action blocks valign variations

Vertical alignment: start

Vertical alignment: center

Vertical alignment: end

action blocks borderless variations

Borderless: true

Borderless: false

action blocks theme variations

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

action blocks max items per row

Max items per row: 2

Max items per row: 3

Max items per row: 4

Max items per row: 5

Max items per row: 6

Max items per row: 7

Max items per row: 8

Max items per row: 9

Max items per row: 10

Max items per row: 11

Max items per row: 12

action blocks spacing variations

Spacing: xsmall

Spacing: small

Spacing: medium

background docs

Bolt Background

An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
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
contentItems

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

 array —
  • [items]:
    • Type:any
Install Install 
  npm install @bolt/components-background
Dependencies @bolt/components-background-shapes @bolt/core-v3.x

background

background opacity variations

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.

background focal variations

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 variations

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.

background fill variations

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.

background without overlay

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

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

Background shapes

Pega branded shapes, for use with background component.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-background-shapes/background-shapes.twig" with {
  shapeGroup: "B"
} only %}
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)
shapeGroup

The shapeGroup to use to build the shapes layout.

 string A
  • A or B
Install Install 
  npm install @bolt/components-background-shapes
Dependencies @bolt/core-v3.x

background shapes

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

background shapes shapegroup variation

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

Band

A general content container with spacing and background options.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-band/band.twig" with {
  content: "This is a band.",
} only %}
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 —
  • —
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
(deprecated)

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

 — —
  • —
content_row_start
(deprecated)

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

 — —
  • —
items
(deprecated)

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

 — —
  • —
fullBleed
(deprecated)

This prop has been renamed. Please use full_bleed.

 — —
  • —
contentTag
(deprecated)

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

 — —
  • —
Install Install 
  npm install @bolt/components-band
Dependencies @bolt/components-background @bolt/components-grid @bolt/core-v3.x @bolt/element @bolt/lazy-queue

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.

band full bleed variations

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.

band with pinned content

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
Share this page LinkedIn
Copied!

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)

Share this page LinkedIn
Copied!

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.

Block List Item 1 Block List Item 2 Block List Item 3

band collection

Image descriptionImage description

Collection 1

This is a button
Image descriptionImage description

Collection 2

This is a button
Image descriptionImage description

Collection 3

This is a button

banner docs

Banner

A content container that delivers important messages to the user.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-banner/banner.twig" with {
  content: "This is the banner content."
} only %}
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 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
  • —
Install Install 
  npm install @bolt/components-banner
Dependencies @bolt/core-v3.x @bolt/lazy-queue

banner

This is a banner

banner status variations

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

banner align variations

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

banner use case status report

Academy Challenge Status
You passed this challenge on May 21, 2020. View Details
You failed this challenge on May 21, 2020. View Details

banner with web component

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

Block List

A vertical list with separators.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
items

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

 array —
  • [items]:
    • Type:string, object, array

      Renderable content (i.e. a string, render array, or included pattern) for a single list item
Install Install 
  npm install @bolt/components-block-list
Dependencies @bolt/core-v3.x @bolt/lazy-queue

block list

block list theme variation

Theme: xlight


Theme: light


Theme: medium


Theme: dark


Theme: xdark


blockquote docs

Blockquote

Pullquote layout with author info.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "<p>The greater danger for most of us lies not in ... achieving our mark.</p>"
} only %}
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 —
  • —
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
weight

Text weight.

 string semibold
  • semibold or bold
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 —
author

Author of the quote.

 object —
Install Install 
  npm install @bolt/components-blockquote
Dependencies @bolt/components-headline @bolt/components-image @bolt/components-logo @bolt/components-text @bolt/core-v3.x @bolt/lazy-queue

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

blockquote alignItems variation

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

blockquote indent variation

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

blockquote border variation

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

blockquote quote variation

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

blockquote multiple paragraphs variation

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

blockquote language specific quotation marks

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

blockquote theme variation

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

blockquote weight variation

weight: semibold

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

weight: bold

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

blockquote size variation

size: large

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

size: xlarge

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

size: xxlarge

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

blockquote web component

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

Breadcrumb

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

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
contentItems

Breadcrumb pieces.

 array —
  • [items]:
    • Type:string, object, array

      Renderable content (i.e. a string, render array, or included pattern) for a single breadcrumb
Install Install 
  npm install @bolt/components-breadcrumb
Dependencies @bolt/core-v3.x

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.

breadcrumb use case popover

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 use case band

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

Bolt Button

A Pega branded call to action.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-button/button.twig" with {
  text: "This is a button"
} only %}
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 —
  • —
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 , tertiary , 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 link.

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

If present, users will be directed to this URL when clicking this element.

 string —
  • —
target

A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.

 string _self
  • _blank , _self , _parent , _top , framename
disabled

Whether the click action should be disabled for this element.

 boolean false
  • —
onClick

When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked.

 string —
  • —
onClickTarget

Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked.

 string —
  • —
itemAlignment
(deprecated)

Use the align parameter instead.

 — —
  • —
rounded
(deprecated)

Use the border_radius parameter instead.

 — —
  • —
tag
(deprecated)

Switch to using the new type prop instead.

 string button
  • a , link , button , submit , reset
Install Install 
  npm install @bolt/components-button
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/element @bolt/lazy-queue

button

button size variations

Note: medium is the default size.

button style variations

button theme variations

Buttons inside a xdark theme

Buttons inside a dark theme

Buttons inside a light theme

Buttons inside a xlight theme

button width variations

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

button border radius variations

button align variations

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

button transform variations

button type variations

button with text and icon

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

button with 3rd party js

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

button with web component

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

Button Group

An inline list of buttons.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% set button_1 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "Learn More",
    style: "primary"
  } only %}
{% endset %}

{% set button_2 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "About Pega",
    style: "secondary"
  } only %}
{% endset %}

{% include "@bolt-components-button-group/button-group.twig" with {
  buttons: [
    button_1,
    button_2
  ]
} %}
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)
tag

Html tag to wrap the button group.

 string —
  • ul or ol
buttons

An array of buttons.

 array —
  • [items]:
    • Type:string, object, array

      A single bolt button, which should be passed as renderable content (i.e. a string, render array, or included pattern). Passing anything besides a bolt button is not supported.
contentItems

An array of bolt objects.

 array —
  • [items]:
    • Type:object

      Bolt component information.
content

A string of content to place in the button group.

 string —
  • —
Install Install 
  npm install @bolt/components-button-group
Dependencies @bolt/components-button @bolt/components-headline @bolt/core-v3.x

button group

button group icon only

button group quantity variations

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)

button group contentItems

This is text with the tags stripped.

card docs

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

For all docs and demos of the old (deprecated) Card component, please refer to the Bolt docs for the v2.13.2 release or older.

The new Card component replaces all functionality previously handled by the old Card component.

card replacement docs

Card

A content container with drop shadows (temporarily renamed as 'Card Replacement' on Bolt v2.x to avoid naming collisions)

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  // 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 section 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 %}

// Custom overall content
{% 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 %}
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 —
  • —
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
borderRadius

Controls the border-radius of the card-replacement.

 string small
  • small or large
spacing

Controls the spacing of the card-replacement.

 string medium
  • small or medium
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 —
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 —
  • —
Advanced Schema Options
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 —
  • —
Install Install 
  npm install @bolt/components-card-replacement
Dependencies @bolt/components-background @bolt/components-button @bolt/components-list @bolt/components-teaser @bolt/components-video @bolt/core-v3.x @bolt/lazy-queue

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

Default horizontal card Image alt. Image alt.

This is an eyebrow

This Is a Headline

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
The media container will crop the image and video is not supported.
Advanced usage: manually override horizontal media size To finely control the width of the card media based on your use case, set inline style of min-width to the card media. Please use your best judgment when doing this, because absolute units such as px, em, and rem will break responsive layouts. % is the recommended unit to use. media: { image: image, attributes: { style: "min-width: 25%", } } Image alt. Image alt.

This card's media is 80px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
Image alt. Image alt.

This card's media is 150px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
Image alt. Image alt.

This card's media is 25% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
Image alt. Image alt.

This card's media is 50% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

 This is a button
DIY horizontal card Utilize the custom body content to create a custom card that has horizontal content. A grid is used to create the content with an image on the side. body: { content: customContentWithGrid, } Design recommendations: 1) use a square image or video; 2) make the headline and/or the whole card clickable; 3) set spacing prop to small.
Visit the Pega website
Image alt Image alt

This card's media is 80px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Visit the Pega website
Image alt Image alt

This card's media is 150px wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Visit the Pega website
Image alt Image alt

This card's media is 25% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Visit the Pega website
Image alt Image alt

This card's media is 50% wide

This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.

Card - Internal & External Actions

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

Card - With Two Actions

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.

Card - Freeform Content

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.

Card - With Teaser Content

Eyebrow

This is teaser 1

Eyebrow

This is teaser 2

Eyebrow

This is teaser 3
Image alt. Image alt.

This is an eyebrow

This is a headline.

This is body text.

 This is a button

Card - Border Radius

Image alt. Image alt.

This card has large border radius

This is a paragraph.

 This is a button
Image alt. Image alt.

This card has large border radius

This is a paragraph.

 This is a button

Card - Spacing

Image alt. Image alt.

This card has small spacing

This is a paragraph.

 This is a button
Image alt. Image alt.

This card has medium spacing

This is a paragraph.

 This is a button

Card - Web Component Usage

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

Chip

Pill like container for displaying meta data text.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} only %}
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 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 —
tag

DEPRECATED - tag is automatically determined by URL.

 — —
  • —
iconOnly

Display only the icon and hide the text. For accessibility purposes you are still required to provide text.

 boolean false,
  • —
Advanced Schema Options
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 —
  • —
Install Install 
  npm install @bolt/components-chip
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

chip

Chip

chip url variations

URL No URL Has URL Target Open link in current tab Open link in new tab

chip size variations

Size xsmall small medium

chip icon variations

Icon Icon before Icon after Show more

chip with web component

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

Chip List

An inline list of chips.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-chip-list/chip-list.twig" with {
  items: [
    {
      text: "Chip 1",
      url: "#!"
    },
    {
      text: "Chip 2",
      url: "#!"
    },
    {
      text: "Chip 3",
      url: "#!"
    }
  ]
} only %}
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)
items

An array of Chips.

 array —
  • [items]:
    • Type:object
size

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

 string —
  • xsmall , small , medium
truncate

Sets the max number of chips to show before truncating, 0 or greater

 number —
  • —
collapsible

Allows users to collapse items after expanding by clicking a close button.

 boolean false
  • —
id

Unique ID for Chip List, randomly generated if not provided (required for no-JS functionality).

 string —
  • —
contentItems
(deprecated)

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

 array —
  • [items]:
    • Type:object

      Chip.
Advanced Schema Options
expanded

Shows truncated items.

 boolean false
  • —
Install Install 
  npm install @bolt/components-chip-list
Dependencies @bolt/components-chip @bolt/components-list @bolt/core-v3.x

chip list

Chip list with links

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

Chip list with size set on parent

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 truncate

Truncated chip list

Beginner User Interface Reporting Mobile Pega Platform Application Development Case Management Robotic Process Automation Data Integration

chip list collapsible

Truncated chip list that can collapse after expanding

Beginner User Interface Reporting Mobile Pega Platform Application Development Case Management Robotic Process Automation Data Integration

code snippet docs

Code Snippet

Text container in a style that is best fit for a monospace font.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-code-snippet/code-snippet.twig" with {
  display: "block",
  lang: "html",
  content: "Some code snippet"
} only %}
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)
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
Install Install 
  npm install @bolt/components-code-snippet
Dependencies @bolt/core-v3.x @bolt/lazy-queue prismjs

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.

code snippet display variation

block:

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

inline:

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

code snippet language variation

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

code snippet syntax variation

light:

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

dark:

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

none:

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

code snippet web component

Web Component Usage Bolt Code Snippet is a web component, you can simply use <bolt-code-snippet> in the markup to make it render.

Headline
<bolt-code-snippet lang="html"> <header> <h1>Headline</h1> </header> </bolt-code-snippet>
Prop Usage Configure the code snippet with the properties specified in the schema.
.my-scss { @include my-mixin; }
<bolt-code-snippet lang="scss" display="block" syntax="light"> .my-scss { @include my-mixin; } </bolt-code-snippet>

copy to clipboard docs

Copy to Clipboard

A function to copy a string to the clipboard.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
  text_to_copy: "https://boltdesignsystem.com"
} only %}
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 —
  • —
text
(deprecated)

This property has been renamed trigger_text

 string Copy Link
  • —
copiedText
(deprecated)

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

 string Copied!
  • —
iconSize
(deprecated)

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

 string medium
  • —
url
(deprecated)

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 —
  • —
Install Install 
  npm install @bolt/components-copy-to-clipboard
Dependencies @bolt/components-icon @bolt/components-link @bolt/core-v3.x @bolt/lazy-queue clipboard

copy to clipboard

Copied!

copy to clipboard multiple instances

Copied!
Copied!

copy to clipboard custom content

Copied!
Custom transition
Copied!
Copied!
Custom transition

Custom confirmation

device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% set content %}
  {% include "@bolt-components-image/image.twig" with {
    src: "/images/sample/product-device-screenshot--phone.jpg"
  } only %}
{% endset %}

{% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  content: content,
} only %}
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)
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.

      • —
Install Install 
  npm install @bolt/components-device-viewer
Dependencies @bolt/components-icon @bolt/components-image @bolt/core-v3.x @bolt/lazy-queue drift-zoom

device viewer

device viewer ipad variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

device viewer iphone8 variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

device viewer macbook variation

device viewer video

device viewer content magnifier modal

dropdown docs

Dropdown

A responsive menu.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  // 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>
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)
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 —
  • —
Install Install 
  npm install @bolt/components-dropdown
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue classnames ev-emitter handorgel

dropdown

Open Dropdown Close Dropdown

dropdown center

Open Dropdown Close Dropdown

dropdown collapse

Open Dropdown Close Dropdown

dropdown collapse center

Open Dropdown Close Dropdown

dropdown theme variations

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

dropdown custom element demo collection

Default Dropdown

Center

Collapse

Collapse and Center

Theme Variations

Extra Long Header

figure docs

Figure

A media container for a complimentary graphic within an article.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
media

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

 object —
caption

Caption for the figure.

 string , object , array —
  • —
content

Figure contains no content. Only media and caption.

 — —
  • —
Install Install 
  npm install @bolt/components-figure
Dependencies @bolt/components-icon @bolt/components-image @bolt/components-table @bolt/components-video @bolt/core-v3.x @bolt/element @bolt/lazy-queue

figure

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

figure media variations

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.

figure with web component

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

Form

A collection of fieldset and inputs.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% extends "@bolt-components-form/form.twig" %}
{% set children %}
  {% set form_field %}
    {% include "@pl/10-form-element-demo-input-element.twig" with {
      title: "Email Address",
      inputAttributes: {
        placeholder: "Enter Email Address",
        required: true,
        type: "email"
      },
      labelDisplayType: "floating"
    } only %}
  {% endset %}
  {% set submit_button %}
    {% include "@bolt-components-form/form-button.twig" with {
      text: "Sign up now",
      tag: "submit"
    } only %}
  {% endset %}
{% endset %}
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)
icon_size

Customize the size of the input icon used

 — medium
  • —
Install Install 
  npm install @bolt/components-form
Dependencies @bolt/components-button @bolt/components-headline @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

form element demo input element

form element demo input element disabled

form element demo input element email

We promise not to sell your email address

form element demo input element password

form element demo input element server errors

The username you entered is already taken.

form element demo radio

form element demo radio fieldset

Select an alignment

form element demo checkbox

form element demo checkbox fieldset

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

form element demo select

form element demo textarea

form full campaign landing

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.

form card theme variations

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

Bolt Grid

A flexible 12-column grid with responsive breakpoint options.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
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.

      • —
Install Install 
  npm install @bolt/components-grid
Dependencies @bolt/core-v3.x

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

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

grid row gutter variations

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

grid item column span variations

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

grid item row span variations

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

grid item responsive breakpoints

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

grid item align variations

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

grid item valign variations

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

grid traditional columns and rows

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

Headline

Specific combinations of typographic styles for displaying text.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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)
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 —
  • —
numberText

Text that displays in a small circle to the left of the main Headline text. Providing content will trigger the bullet to appear.

 string , number —
  • —
numberColor

The optional background color of the Headline bullet. Uses inherited theme colors if unspecified.

 string —
  • teal , indigo , orange , purple
Install Install 
  npm install @bolt/components-headline
Dependencies @bolt/components-icon @bolt/components-link @bolt/core-v3.x

headline

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

headline tag variations

This headline is <h1> and xxxlarge size

This headline is <h2> and xxlarge size

This headline is <h3> and xlarge size

This headline is <h4> and large size

This headline is <h5> and small size
This headline is <h6> and xsmall size

This text is <p> and medium size.

Medium is the body font-size, it should never be used for headlines.

headline align variations

This headline is aligned left

This headline is aligned center

This headline is aligned right

headline style and weight variations

This is light weight and normal text

This is light weight and italic text

This is bold weight and normal text

This is bold weight and italic text

This is regular weight and normal text

This is regular weight and italic text

This is semibold weight and normal text

This is semibold weight and italic text

 Headline and subheadline have predefined weights, do not modify them without consulting a designer.

headline icon variations

Headline w/ Icon Position before

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!
What we do at Pega is brilliant!
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!

 Left and right options are deprecated, please stop using these.

(Deprecated) Headline w/ Left Icon Position

What we do at Pega is brilliant!

(Deprecated) Headline w/ Right Icon Position

What we do at Pega is brilliant!

headline quoted variation

What we do at Pega is brilliant!

headline numbered

Numbered Headline

Basic Usage

7 Example numbered headline (w/o numberColor)

  {% include "@bolt-components-headline/headline.twig" with {
  text: "Example numbered headline (w/o numberColor)",
  numberText: 7,
} only %}

42 Example numbered headline (w/ numberColor)

  {% include "@bolt-components-headline/headline.twig" with {
  text: "Example numbered headline (w/ numberColor)",
  numberText: 42,
  numberColor: "orange"
} only %}

Up to 3 digits supported

7 Single-digit

42 Double-digit

123 Triple-digit

Icons Supported

1Numbered Headline With Left Icon

2Numbered Headline With Right Icons

Align Support

1 Numbered Headline - Left

2 Numbered Headline - Center

3 Numbered Headline - Right

4 Numbered Eyebrow

1 Numbered Headline (xxxlarge)

2 Numbered Subheadline (xxlarge)

3 Numbered Text

1 Numbered Headline (xxsmall)

2 Numbered Headline (xsmall)

3 Numbered Headline (small)

5 Numbered Headline (large)

6 Numbered Headline (xlarge)

7 Numbered Headline (xxlarge)

8 Numbered Headline (xxxlarge)

numberColor

By setting the numberColor prop to indigo, purple, teal, or orange, you can choose the background color of the Headline Number.

1 Numbered Headline w/ Number

2 Numbered Headline w/ Number

3 Numbered Headline w/ Number

4 Numbered Headline w/ Number

A Numbered Headline w/ Letter

B Numbered Headline w/ Letter

C Numbered Headline w/ Letter

D Numbered Headline w/ Letter

Theming

If you don't specify a numberColor, the current theme's colors will be used instead.

1 Without numberColor

2 Without numberColor

3 Without numberColor

4 Without numberColor

hero docs

Bolt Hero

A pre-defined band featuring a headline, call to action, and prominent imagery.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-hero/hero.twig" with {
  content: "Hero content goes here",
  background: "/images/heros/hero-background--yellow.svg",
  image: "/images/heros/hero-foreground--yellow.png",
  theme: "dark",
} only %}
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)
content

The content to display in the Hero

 string , array , object —
  • —
theme

Color theme to use within the Hero.

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

The path to a background image that displays underneath the content / foreground image in the Hero.

 string —
  • —
image

The path to a foreground image that displays along-side the other Hero content.

 string —
  • —
imageAlign

Adjusts the Hero Image's horizontal alignment

 string center
  • left , center , right
imageValign

Adjusts the Hero Image's vertical alignment

 string middle
  • top , middle , bottom
imageMinWidth

Customizes the min width of the Hero Image

 string none
  • —
imageMaxWidth

Customizes the maximum width of the Hero Image

 string 450px
  • —
reverseOrder

Reverses the order on larger screens (desktop) so the image comes first (left column) and the content comes second (right column).

 boolean false
  • —
Install Install 
  npm install @bolt/components-hero
Dependencies @bolt/components-band @bolt/components-image @bolt/core-v3.x @bolt/global

Basic Usage

This simple Hero demo only sets four props: the Hero content the image path the image's vertical alignment (set to bottom via the imageValign prop) and the theme color (light)

Hero Title

Reverse Desktop Order

This demo uses the reverseOrder prop to reverse the Hero's default column order so that on larger screens, the Image shows up on the left and the Content shows up on the right.
PegaWorld iNspire logo

Boston Convention & Exhibition Center May 31 - June 2, 2020

Reverse Desktop Order (No Image)

This demo shows that the reverseOrder prop still swaps the column order of Image / Content on larger screens, even if a Hero doesn't contain an image!

While Heros don't require an image...

Perhaps a Band would be a better fit for these types of use-cases?

Band Component Docs

Image Minimum Width

This demo creatively uses the imageMinWidth prop to "pin" the image to the right side of the screen on larger devices.

A Prominent Headline Certainly Helps

This one even includes a tagline.

Image Horizontal Alignment

This Hero demo sets the imageAlign prop so the image is right-aligned within it's Grid column instead of being center (default) or left aligned. This horizonal alignment is especially visible on smaller screens or when using smaller-width images.

It's show time.

Please join us for PegaWorld 2019 event at MGM Grand in Las Vegas

Monday, June 3rd, 2019
10AM - 3PM EST

Image Vertical Alignment (Top)

This demo sets the imageValign prop to top so the image is always flush with the top-edge of the Hero container.
PegaWorld iNspire logo

Boston Convention & Exhibition Center May 31 - June 2, 2020

Image Vertical Alignment (Bottom)

This demo sets the imageValign prop to bottom so the image is always flush with the bottom-edge of the Hero container.

Note: this automatically adjusts the content order on smaller (mobile) screens so the Image displays after the main content instead of before.

Pega is one of the key technologies that we are using to rebuild our application landscape.

Oliver Zeeb Team Lead, Application Development
W&W-Gruppe

icon docs

Icon

Pega branded icon system.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}
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 —
  • —
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
Install Install 
  npm install @bolt/components-icon
Dependencies @bolt/core-v3.x @bolt/lazy-queue svg-baker-runtime

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

icon adding custom icons

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

  • brand-molecule

  • brand-operations

  • brand-orbit

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

  • brand-molecule

  • brand-operations

  • brand-orbit

  • 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

icon with web component

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

Image

A container for displaying responsive image.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-image/image.twig' with {
  src: "/src/images/turtle.jpg",
  alt: "A Turtle"
} only %}
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 —
  • —
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
(deprecated)

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
(deprecated)

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

 —
  • —
height
(deprecated)

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

 —
  • —
cover

Set an image to fill its container.

 boolean false
  • true or false
imageAttributes
(deprecated)

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
  • —
Install Install 
  npm install @bolt/components-image
Dependencies @bolt/components-ratio @bolt/core-v3.x @bolt/element @bolt/lazy-queue lazysizes

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

image source variations

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

image lazyload variations

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

image custom width height variations

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 with web components

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

List

Minimal layout container for displaying a group of items.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
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
Install Install 
  npm install @bolt/components-list
Dependencies @bolt/core-v3.x @bolt/lazy-queue

list

Item 1
Item 2
Item 3

list item variations

Inline list of different items

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

Inline list of chips

Item 1 Item 2 Item 3

Inline list of buttons

Item 1 Item 2 Item 3

list display variations

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.

list spacing variations

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

list separator variations

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

list regular vs inset spacing

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.

Item 1 Item 2 Item 3

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

Item 1 Item 2 Item 3

ol

Item 1 Item 2 Item 3

div

Item 1 Item 2 Item 3

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

list with web component

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

Logo

A container for displaying responsive logo.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-logo/logo.twig" with {
  src: "/images/content/logos/logo-paypal.svg"
} only %}
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)
invert

Set to true to invert the logo colors.

 boolean —
  • —
Install Install 
  npm install @bolt/components-logo
Dependencies @bolt/components-image @bolt/core-v3.x

logo invert variation

menu docs

Menu

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

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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 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
Install Install 
  npm install @bolt/components-menu
Dependencies @bolt/components-trigger @bolt/core @bolt/lazy-queue wc-context

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.

menu spacing variations

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

menu use case theming

Menu inside a xdark theme
Menu inside a dark theme
Menu inside a light theme
Menu inside a xlight theme

menu with web component

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

Modal

A content container that usually presents users with a short task or gathered information without losing context of the underlying page.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 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.

      • —
Advanced Schema Options
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 —
  • —
Install Install 
  npm install @bolt/components-modal
Dependencies @a11y/focus-trap @bolt/components-button @bolt/components-text @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue a11y-dialog focus-trap tabbable

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

modal spacing variations

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

modal scroll variations

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

modal trigger variations

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>

modal usage image and caption

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)

modal with web component

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 docs

Nav Priority

Priority plus navigation system.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-nav-priority/nav-priority.twig" with {
  links: [
    {
      text: "Real-Time AI",
      url: "#!"
    },
    {
      text: "End-to-end Automation",
      url: "#!"
    },
    {
      text: "Journey-centric Delivery",
      url: "#!"
    },
    {
      text: "Low Code",
      url: "#!"
    },
    {
      text: "Multi-dimensional Power",
      url: "#!"
    },
    {
      text: "Cloud Choice",
      url: "#!"
    }
  ]
} only %}
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)
links

Array of Priority Nav links.

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

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 —
  • —
Install Install 
  npm install @bolt/components-nav-priority
Dependencies @bolt/components-navlink @bolt/core-v3.x @bolt/lazy-queue

nav priority

nav priority multiple sticky navbars

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

Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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)
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 —
  • —
Install Install 
  npm install @bolt/components-navbar
Dependencies @bolt/components-nav-indicator @bolt/components-nav-priority @bolt/components-navlink @bolt/core-v3.x

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

Theme: xlight

Theme: light

Theme: dark

Theme: xdark

Theme: none

navbar linked title

Activate linked title by passing in an url

navbar transparent

Remove theme and gradient for a transparent option

navbar no links

ol docs

Ordered List

Vertical list of numbered items.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
contentItems
(deprecated)

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 —
  • [items]:
    • Type:string, object, array

      Renderable content (i.e. a string, render array, or included pattern) for a single list item.
Install Install 
  npm install @bolt/components-ol
Dependencies @bolt/components-li @bolt/core-v3.x @bolt/lazy-queue

ol

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.

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

Theme: medium

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.

ol 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.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.
Answer questions authoritatively and concisely.
Item 1
Item 2
Item 3
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 footer

page footer docs

This is a placeholder element only used in Pattern Lab demos.

page header

page header docs

This is a placeholder element only used in Pattern Lab demos.

pagination docs

Bolt Pagination

A navigation system for browsing search results.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
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
  • —
Install Install 
  npm install @bolt/components-pagination
Dependencies @bolt/core-v3.x

pagination

pagination theme variations

pagination count variations

1 of 3

1 of 6

1 of 7

4 of 5

4 of 6

4 of 10

5 of 7

6 of 6

5 of 10

100 of 100

pagination align variations

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.

Something on the right

placeholder docs

Bolt Placeholder

Placeholder element only used in Pattern Lab demos.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-placeholder/placeholder.twig" with {
  text: "Bolt Placeholder Example",
  size: "large",
  animated: true
} only %}
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)
size

How large is this placeholder?

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

Should this placeholder have an animated border?

 boolean false
  • —
Install Install 
  npm install @bolt/components-placeholder
Dependencies @bolt/core-v3.x @bolt/lazy-queue

placeholder

Bolt Placeholder Example

placeholder animated variations

Bolt Placeholder Example

placeholder sizes variations

xsmall Placeholder
small Placeholder
medium Placeholder
large Placeholder
xlarge Placeholder

popover docs

Popover

A small overlay that opens on demand.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-popover/popover.twig" with {
  trigger: "This is the popover trigger",
  content: "This is the popover content."
} only %}
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 attributes object. Applies extra HTML attributes to the outer <bolt-popover> tag.

 object —
  • —
trigger

Renders the trigger of the popover. Usually a link or button is used.

 object —
  • —
content

Renders the content of the popover, which can be structured content that may contain calls to action.

 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
theme

Applies a Bolt color theme to the bubble that contains the main Popover content.

 string none
  • none , xlight , light , dark , xdark
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 —
  • —
Install Install 
  npm install @bolt/components-popover
Dependencies @bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue @popperjs/core mousetrap

popover

Close popover This is the content of the popover with a call to action.

popover placement variations

Preferred placement
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Auto placement
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.

popover spacing variations

Content spacing Adjust the inset spacing of the content by using the spacing prop.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.

popover use case menu

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

popover theme variations

Content theme Adjust the Bolt color theme of the content by using the theme prop.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.
Close popover This is the content of the popover with a call to action.

popover with web component

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>

progress bar docs

Progress Bar

Visual indicator for the progression of an activity.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-progress-bar/progress-bar.twig" with {
  value: 65,
} only %}
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 attributes object. Applies extra HTML attributes to the outer <bolt-progress-bar> tag.

 object —
  • —
value *

The current value.

 number —
  • —
valueFormat

The data format that the current value should display.

 string percent
  • percent or step
max
- Minimum is 1

The maximum value.

 number 100
  • —
animated

Enables the animated background to better indicate active progress. Note: this will also automatically add a striped design to the bar when enabled.

 boolean false
  • —
Advanced Schema Options
min

The minimum value. Note: this prop is reserved for advanced usage.

 number 0
  • —
Install Install 
  npm install @bolt/components-progress-bar
Dependencies @bolt/core-v3.x

progress bar basic usage

0%
65%
100%

progress bar value format

Percent format
65%
Step format
65 / 100

progress bar max

Set max to 100 When using percent format for value.
65%
Set max to any positive number When using step format for value.
7 / 12

progress bar animated

Animated
75%

progress bar theming

Progress bar in xdark theme
65%
Progress bar in dark theme
65%
Progress bar in light theme
65%
Progress bar in xlight theme
65%

progress bar in toolbar

Progress bar in toolbar
65%
65%
65%

progress bar use case stepper

Stepper progress
1 / 5
 Custom JavaScript <script type="text/javascript"> window.addEventListener('load', function() { const progressBar = document.querySelector('.js-bolt-progress-bar-stepper'); const progressBarBackward = document.querySelector( '.js-bolt-progress-bar-stepper-back', ); const progressBarForward = document.querySelector( '.js-bolt-progress-bar-stepper-forward', ); if (progressBarBackward) { progressBarBackward.addEventListener('click', () => { if (progressBar.value > 0) { progressBar.value -= 1; } }); } if (progressBarForward) { progressBarForward.addEventListener('click', () => { if (progressBar.value < progressBar.max) { progressBar.value += 1; } }); } if (progressBar) { progressBar.addEventListener('rendered', function() { if (progressBar.value === 1) { progressBarBackward.setAttribute('disabled', ''); } if (progressBar.value === progressBar.max) { progressBarForward.setAttribute('disabled', ''); } if (progressBar.value > 1) { progressBarBackward.removeAttribute('disabled'); } if (progressBar.value < progressBar.max) { progressBarForward.removeAttribute('disabled'); } }); } }); </script>

progress bar use case loading animation

Loading animation
50%
 Custom JavaScript <script type="text/javascript"> window.addEventListener('load', function() { const progressBar = document.querySelector('.js-bolt-progress-bar-loading'); const progressBarReset = document.querySelector( '.js-bolt-progress-bar-loading-reset', ); let progressBarInitialValue; function autoIncrementProgressBar() { progressBarInitialValue = progressBar.value; const myVar = setInterval(myTimer, 250); function myTimer() { progressBar.value += 1; if (progressBar.value >= progressBar.max) { clearInterval(myVar); progressBar.animated = false; progressBarReset.removeAttribute('disabled'); progressBarReset.textContent = 'Click to reset'; } } } if (progressBar) { autoIncrementProgressBar(); } if (progressBarReset && progressBar) { progressBarReset.addEventListener('click', () => { progressBar.value = progressBarInitialValue; progressBar.animated = true; progressBarReset.setAttribute('disabled', ''); progressBarReset.textContent = 'Hang tight before resetting...'; autoIncrementProgressBar(); }); } }); </script>

progress bar with web component

Web Component Usage Bolt progress-bar is a web component, you can simply use <bolt-progress-bar> in the markup to make it render.
<bolt-progress-bar value=65></bolt-progress-bar>
Prop Usage Configure the <bolt-progress-bar> with the properties specified in the schema.
<bolt-progress-bar value=7 value-format="step" max=12 animated></bolt-progress-bar>

ratio docs

Bolt Ratio

A small helper-component that displays image or video children at a specific aspect ratio.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-ratio/ratio.twig" with {
  children: '<img src="https://via.placeholder.com/350x150">',
  ratio: "350/150",
  attributes: {
    style: [
      "max-width: 400px;",
      "margin: 0 auto;",
    ]
  }
} only %}
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 attributes object. Used to apply with extra HTML attributes to the outer <bolt-ratio> tag.

 object —
  • —
children

Nested content to nest inside the <bolt-ratio> component when used in a Twig template.

 string , object , array —
  • —
ratio

Set the aspect ratio for the ratio object via slash-separated width and height values, e.g. 4/3, 16/9, 1/1, etc.

 string —
  • —
aspectRatioWidth
(deprecated)

Twig-specific prop for setting the width portion of the component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

 number —
  • —
aspect-ratio-width
(deprecated)

Web component-specific prop for setting the width portion of the bolt-ratio web component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

 number —
  • —
aspectRatioHeight
(deprecated)

Twig-specific prop for setting the height portion of the component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

 number —
  • —
aspect-ratio-height
(deprecated)

Web component-specific prop for setting the height portion of the bolt-ratio web component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

 number —
  • —
Advanced Schema Options
no_css_vars

Manually disables CSS Variable-based rendering for <bolt-ratio> in Twig templates. Useful for testing cross browser functionality. By default this is automatically enabled / disabled based on browser support for CSS Vars.

 boolean —
  • —
no-css-vars

Manually disables CSS Variable-based rendering on the <bolt-ratio> custom element. Useful for testing cross browser functionality. By default this is automatically enabled / disabled based on browser support for CSS Vars.

 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 enabled / disabled 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 enabled / disabled based on browser support.

 boolean —
  • —
Install Install 
  npm install @bolt/components-ratio
Dependencies @bolt/core-v3.x @bolt/element @bolt/lazy-queue

ratio no shadow no css vars

ratio no shadow

ratio 1x1

ratio 21x9 web component

ratio 4x3

ratio 8x1 web component legacy

ratio

search filter docs

This is a placeholder element only used in Pattern Lab demos.

share docs

Share

A list of share-to-social-media actions.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
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 —
inline

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

 — —
  • —
copyToClipboard

Please use copy_to_clipboard.

 — —
  • —
Install Install 
  npm install @bolt/components-share
Dependencies @bolt/components-copy-to-clipboard @bolt/components-icon @bolt/components-list @bolt/core-v3.x

share

Share this page LinkedIn
Copied!

share size variations

Small Size

Share this page LinkedIn
Copied!

Medium Size

Share this page LinkedIn
Copied!

share opacity variations

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

Share this page LinkedIn
Copied!

Opacity: 80

Share this page LinkedIn
Copied!

Opacity: 60

Share this page LinkedIn
Copied!

Opacity: 40

Share this page LinkedIn
Copied!

Opacity: 20

Share this page LinkedIn
Copied!

share align variations

Align: start

Share this page LinkedIn
Copied!

Align: center

Share this page LinkedIn
Copied!

Align: end

Share this page LinkedIn
Copied!

share custom label

This is a custom label LinkedIn
Copied!

share theme variations

xdark

Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!

dark

Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!

light

Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!

xlight

Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!
Share this page LinkedIn
Copied!

stack docs

Stack

A content container that defines spacing between elements vertically.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-stack/stack.twig" with {
  content: "This is one stack."
} only %}
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 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 —
  • —
Advanced Schema Options
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 —
  • —
Install Install 
  npm install @bolt/components-stack
Dependencies @bolt/core-v3.x @bolt/lazy-queue

stack

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

stack spacing variations

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

Sticky

A content container that enables content to be sticky.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% embed "@bolt-components-sticky/sticky.twig" %}
  {% block sticky_content %}

    // Sticky content

  {% endblock %}
{% endembed %}
Install Install 
  npm install @bolt/components-sticky
Dependencies @bolt/core-v3.x @bolt/lazy-queue stickyfilljs

table docs

Table

Content container for tabular content.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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 —
  • —
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
Install Install 
  npm install @bolt/components-table
Dependencies @bolt/core-v3.x @bolt/lazy-queue himalaya

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

table format variations

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

table first column fixed width

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

table with web component

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

Tabs

Content containers organized in multiple panels, allowing users to view one panel at a time.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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)
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
      • id

        Unique identifier for each tab label, may be used for deep linking.

        • Type: string
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
  • —
scrollOffsetSelector

Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector.

 string —
  • —
scrollOffset

Additional offset for smooth scrolling, integer converted to pixel value.

 integer —
  • —
Install Install 
  npm install @bolt/components-tabs
Dependencies @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue @ungap/url-search-params

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

tabs label and content spacing

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
Open Accordion Close Accordion
This is the accordion content.
Open Accordion Close Accordion
This is the accordion content.
Open Accordion Close Accordion
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

tabs use case tabbed band

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

Deep link to a tab by adding a query string to the URL with "selected-tab" as the name and the tab ID as the value. For example: ?selected-tab=tab-3.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs deep linking with scroll offset

Placeholder "fixed" element, should not overlap tabs when page first loads.
Deep linking will auto-scroll to your selected tab. If there is a "fixed" element on the page, it may overlap your tabs. To fix this, use scrollOffsetSelector to select the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scrollOffset for any additional adjstments. See a demo: ?selected-tab=tab-3.
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

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

Teaser

Text lockup for teasing larger content.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% 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 %}
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)
eyebrow

Eyebrow text component

 object —
headlines

An array of headline component objects

 array —
  • [items]:
    • Type:object

      Headline text components
logo

Bolt logo component

 object —
content

Body text of teaser

 string —
  • —
contentItems

Array of content item objects

 array —
  • [items]:
    • Type:object
buttons

An array of button component objects

 array —
  • [items]:
    • Type:object

      A button
Install Install 
  npm install @bolt/components-teaser
Dependencies @bolt/components-headline @bolt/components-logo @bolt/core-v3.x

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

text docs

Text

Pega branded typography system.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  <bolt-text>
  This is text.
</bolt-text>
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 —
  • —
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 —
  • —
Install Install 
  npm install @bolt/components-text
Dependencies @bolt/components-link @bolt/core-v3.x @bolt/lazy-queue

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>

text typographic recipes

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>

text display variations

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>

text opacity variations

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>

text line height variations

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>

text letter spacing variations

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 variations

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>

text font family variations

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>

text font size variations

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>

text font style variations

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>

text font weight variations

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>

text ssr with twig filter

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

Table of Contents

A navigation list, usually found on an article page, of its section titles.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-toc/toc.twig" with {
  items: [
    {
      text: "Section 1",
      url: "#section-1"
    },
    {
      text: "Section 2",
      url: "#section-2"
    },
  ]
} only %}
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 attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.

 object —
  • —
sticky

When enabled, TOC will automatically use sticky positioning + add a top offset style based on the height of the scrollOffsetSelector plus the scrollOffset (if defined),

 boolean —
  • —
scrollOffsetSelector

Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector.

 string —
  • —
scrollOffset

Additional offset for smooth scrolling, integer converted to pixel value.

 integer —
  • —
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 —
  • —
Install Install 
  npm install @bolt/components-toc
Dependencies @bolt/components-smooth-scroll @bolt/core-v3.x @bolt/lazy-queue wc-context

toc

toc item active variations

Manually set an item as active Any item can be set to active to indicate that the page is anchored to the respective section.

toc header variations

Visible header A header for table of contents can be created by passing plain text into the header prop.

toc use case sticky

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 use case sticky and scroll offset 

  
{% include "@bolt-components-toc/toc.twig" with {
  sticky: true,
  scrollOffsetSelector: ".js-sticky-offset",
  scrollOffset: 16,
} %}
Ex. Sticky Element

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

Tooltip

Floating label that briefly describes an element.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: "This is the tooltip trigger",
  content: "This is the tooltip content."
} only %}
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 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
(deprecated)

This prop is deprecated. Please use placement instead.

 any —
  • —
noWrap
(deprecated)

This prop is deprecated. Please stop using it.

 any —
  • —
spacing
(deprecated)

This prop is deprecated. Please stop using it.

 any —
  • —
Install Install 
  npm install @bolt/components-tooltip
Dependencies @bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue @popperjs/core

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.

tooltip placement variations

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

tooltip with web component

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

Bolt Trigger

An call to action with no styles.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-trigger/trigger.twig" with {
  content: "This is a trigger"
} only %}
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 —
  • —
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
  • —
Install Install 
  npm install @bolt/components-trigger
Dependencies @bolt/core-v3.x @bolt/lazy-queue

trigger

trigger tag variations

Trigger with a tag

trigger cursor variations

trigger display variations

trigger outline variations

This <a> has no outline on focus

trigger disabled variations

This <a> is disabled

trigger advanced usage

Trigger Image

Click on the thumbnail to open a modal with an enlarged image.

trigger with web component

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

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.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-typeahead/typeahead.twig" %}
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 —
  • —
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
  • —
Install Install 
  npm install @bolt/components-typeahead
Dependencies @bolt/components-button @bolt/components-form @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue fuse.js mousetrap react-autosuggest react-html-parser

typeahead dynamically fetch data

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();
    }
  });
}

typeahead navigate to exact result

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();
    }
  });
}

typeahead navigate to search results

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

Component Name

Vertical list of bulleted items.

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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.",
    "Be honest, respectful, trustworthy and helpful.",
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} only %}
Install Install 
  npm install @bolt/components-ul
Dependencies @bolt/components-li @bolt/core-v3.x @bolt/lazy-queue

ul

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
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

Video

Pega branded Brightcove video player.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-video/video.twig" with {
  videoId: "5609376179001",
  accountId: "1900410236",
  playerId: "r1CAdLzTW",
  showMeta: true,
  showMetaTitle: false
} only %}
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 —
  • —
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, nd cue. For examp: <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 re enabled by default (ex. the playback plugin). For examp: <bolt-video disabled-plugins="playback">.

 string —
  • —
errorMessage

A custom message to be display upon a brigthcove error, will default to 'This video didnt load correctly. Refresh page to view.' is this field is left blank.

 string —
  • —
isBackgroundVideo
(deprecated)

Background video feature will be removed with Bolt v3.0

 — —
  • —
Advanced Schema Options
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
Install Install 
  npm install @bolt/components-video
Dependencies @bolt/components-button @bolt/components-ratio @bolt/core-v3.x @bolt/lazy-queue dasherize lodash.isequal mousetrap

video

This video has showMeta set to true and showMetaTitle set to true.

video hide meta title and duration

This video has showMeta set to false.

video hide meta title only

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:

video with external controls

This video has external controls:

video with inline script and 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.

video with custom share text

This video has share_description set to Share me!.

video with cue points

This video has a cue point defined inside the Brightcove interface.

video with external title

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

video with default error message

This is an example of a Brightcove video with the default error message displayed.

video with custom error message

This is an example of a Brightcove video with a custom error message displayed.

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.

external plugins script

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

Organism - Hero - Dashboard Page Hero

Page Subtitle

Page Title Goes Here Test

A short description goes here test.

Organism - Hero - Details Page Hero

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

Beginner Pega Platform 8.3 Application Development Case Management Other

Organism - Hero - Landing Page Hero

Page Subtitle

Page Title Goes Here Test

Organism - Hero - Search Results Hero (Archived)

Main Search

Archived Search Results

Looking for instructor-led training?

search results hero

Search Results

Looking for instructor-led training?

Page - Completed Training

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Dashboard

Completed Training

Upload Print
Sort by: Latest Activity Created on: Oldest to Newest Created on: Newest to Oldest

Business Process Modeling

MODULE

Completed: August 1, 2019

Last Updated: July 12, 2019

Configuring a Case Type

CHALLENGE

Passed: Score 85%: July 31, 2019

Last Updated: July 12, 2019

Archived

System Architect Essentials

MISSION

Completed: August 1, 2019

Last Updated: August 11, 2019

This mission has been updated. Please recomplete to earn the mission badge again.

Introduction to Business Architecture

MODULE

Completed: July 1, 2019

Last Updated: July 12, 2019

Configuring a Case Type

CHALLENGE

Passed: Score 85%: July 31, 2019

Last Updated: July 12, 2019

Archived

Business Process Modeling

MODULE

Completed: August 1, 2019

Last Updated: July 12, 2019

Page - Dashboard (My Favorite Training)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Dashboard

My Favorite Training

Close popover

Module

Business Process Modeling - Advanced Topics

6 Topics

40 mins remaining

Sint quia placeat esse autem vel soluta quod. Eos eaque blanditiis et explicabo iure.
Close popover

Challenge

Configuring a case type

14 Steps

In progress

Expedita dolorem voluptatem dolorem ea. In blanditiis repellat harum aliquam ab et.
Close popover

Module

Ad adipisci et architecto.

8 Topics

40 mins remaining

Repellendus impedit et similique quasi. Rerum quia eos iusto quo quia aut corporis. Rerum dolorem consequatur aut voluptatem aut.

 Previous Next

Page - Dashboard (My Missions)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Dashboard

My Missions (12)

Close popover

Mission

Voluptatibus tenetur corporis consequatur.

7 Modules

1 Challenge

25% complete

Architecto molestiae ad nihil est. Est consequuntur qui error numquam sit unde fugiat sit.

Last activity: 3 days ago
Close popover

Mission

Et et.

9 Modules

1 Challenge

10% complete

Et quaerat dolor sequi maiores tempora. Sapiente reprehenderit pariatur similique corporis a.

Last activity: 12/21/19

Assigned
Close popover

Mission

Et incidunt voluptate mollitia.

10 Modules

1 Challenge

10% complete

Illo quia dolores aliquam magni quam. Et hic ea est et et praesentium sunt. Debitis sed laboriosam doloremque impedit.

Last activity: 12/21/19
Close popover

Mission

Sit exercitationem molestiae.

8 Modules

1 Challenge

25% complete

Sint soluta accusamus dolore est culpa. Molestiae voluptatum repellendus qui et eius molestias veritatis.

Last activity: 3 days ago
Close popover

Mission

Et nemo autem rerum.

5 Modules

1 Challenge

10% complete

Vel pariatur at et id in. Quibusdam tenetur qui totam qui.

Last activity: 12/21/19

Assigned
Close popover

Mission

Enim fuga aperiam.

9 Modules

1 Challenge

10% complete

Pariatur id quisquam incidunt recusandae fugit ipsa inventore. Rerum commodi harum ea quibusdam nihil. Et numquam aperiam nihil ea est consequatur nesciunt.

Last activity: 12/21/19
Close popover

Mission

Mollitia totam pariatur sit atque.

8 Modules

1 Challenge

25% complete

Nihil voluptas quo autem consequatur et sit. Deleniti cumque inventore delectus fugit odit ex possimus cum.

Last activity: 3 days ago
Close popover

Mission

Sit ut non.

7 Modules

1 Challenge

10% complete

Similique ea sunt ex. Id et tempora provident praesentium distinctio. Ut minus sit sed maiores voluptatibus.

Last activity: 12/21/19

Assigned
Close popover

Mission

Velit assumenda et aut saepe.

6 Modules

1 Challenge

10% complete

Veritatis asperiores consectetur consectetur vel doloribus minima. Fuga totam sed nisi tempora ipsam voluptas.

Last activity: 12/21/19
Close popover

Mission

Sit accusantium optio.

6 Modules

1 Challenge

25% complete

Recusandae reprehenderit repellendus sequi quae. Voluptate iure dolores dolore. Consequatur ipsum praesentium veritatis rerum nihil inventore ut.

Last activity: 3 days ago
Close popover

Mission

Reprehenderit ab commodi beatae.

7 Modules

1 Challenge

10% complete

In saepe possimus sunt vero distinctio eos quam minima. Doloribus eos vitae repellat ducimus nesciunt quis voluptatibus.

Last activity: 12/21/19

Assigned
Close popover

Mission

Quia sit.

10 Modules

1 Challenge

10% complete

Rerum dolorum ut qui ipsam perspiciatis et fuga dignissimos. Ut sed eum commodi quod omnis.

Last activity: 12/21/19

Page - Dashboard (Add Mission)

Logo Placeholder
Try Pega
Contact
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

Close popover

Module

Aperiam id a.

9 Topics

40 mins remaining

Veritatis eos doloremque enim sit odit id et. A accusamus culpa rerum nulla unde minus corrupti corporis.

Last activity: 3 days ago
Close popover

Module

Corrupti quas.

9 Topics

In progress

Rerum et exercitationem similique cumque omnis esse libero. Numquam molestiae dolores incidunt minima architecto. Quia voluptatem ut explicabo est voluptate neque.

Last activity: 12/21/19

 Previous Next

Recommended Missions

Close popover

Mission

Est dicta qui.

5 Modules

1 Challenge

25% complete

Alias aliquid accusantium sunt. Voluptatem corporis ullam officia autem minus eum illo.
Close popover

Mission

Ea maiores dolor repellat.

9 Modules

1 Challenge

25% complete

Ea non veritatis illum. Maxime omnis deleniti saepe explicabo. Voluptatum libero molestiae aliquam animi repellat quis illum.
Close popover

Mission

Fugiat voluptatem explicabo.

9 Modules

1 Challenge

25% complete

Beatae error et officiis sunt quos. Mollitia alias quo repellendus est cum nobis. Blanditiis dolores doloremque aut architecto maxime.

 Previous Next

New Training

Close popover

Mission

Enim sit quo quibusdam.

8 Modules

1 Challenge

25% complete

Aut quia dolor et et. Assumenda sequi eaque temporibus impedit possimus. Aut odit voluptas voluptatem dicta explicabo suscipit qui adipisci.
Close popover

Module

Repellendus ipsam eum.

4 Topics

In progress

Qui aut officia non cumque. Rerum occaecati neque architecto rerum voluptate eum ut. Incidunt sit dignissimos magni deleniti eum magnam.
Close popover

Module

Blanditiis et tempore sed.

2 Topics

40 mins remaining

In maxime exercitationem minus voluptas porro fuga. Esse possimus iure ab exercitationem cupiditate asperiores minus ex. Neque quis enim minima tenetur ad.

 Previous Next

Page - Dashboard

Logo Placeholder
Try Pega
Contact
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

Close popover

Mission

Et adipisci.

6 Modules

1 Challenge

25% complete

Rerum nesciunt quam voluptates voluptatibus officia sequi natus. Quis suscipit libero velit minima rem odio itaque. Ut rerum rerum laudantium distinctio.

Last activity: 3 days ago
Close popover

Mission

Molestiae voluptate aut reprehenderit.

6 Modules

1 Challenge

10% complete

Quia ut et autem et veniam velit. Incidunt rerum consequuntur non possimus ullam est qui. Est facilis veniam a.

Last activity: 12/21/19

Assigned
Close popover

Mission

Eum perferendis.

8 Modules

1 Challenge

10% complete

Est velit soluta ullam voluptates quos sunt. Distinctio repellendus et natus.

Last activity: 12/21/19
Close popover

Mission

Quam tempore quas.

8 Modules

1 Challenge

25% complete

Quis sed aspernatur dolore fugit modi fuga. Sequi doloremque reiciendis doloribus ab sed.

Last activity: 3 days ago
Close popover

Mission

Adipisci tempora distinctio aut.

7 Modules

1 Challenge

10% complete

Tempore et deserunt ut necessitatibus. Fugit rem quaerat est. Voluptas exercitationem necessitatibus sit atque delectus.

Last activity: 12/21/19

Assigned
Close popover

Mission

Aut fugit praesentium.

7 Modules

1 Challenge

10% complete

Similique ut cupiditate sit et. Molestiae labore sit ducimus omnis tenetur minima eaque temporibus.

Last activity: 12/21/19
Close popover

Mission

Velit voluptatem distinctio quia ea.

10 Modules

1 Challenge

25% complete

Blanditiis et et aliquam qui tempore. Dignissimos iure perferendis nihil. Natus maiores sed sit numquam neque.

Last activity: 3 days ago
Close popover

Mission

Quia fuga possimus qui.

8 Modules

1 Challenge

10% complete

Magni error asperiores praesentium quidem. Dolore laboriosam natus necessitatibus qui est deleniti mollitia.

Last activity: 12/21/19

Assigned
Close popover

Mission

Blanditiis sit autem.

8 Modules

1 Challenge

10% complete

Nisi earum minus eligendi corrupti error dolor veniam numquam. Eum aliquam minus et repellendus. Quod quia maxime voluptatem libero asperiores iure ullam.

Last activity: 12/21/19
Close popover

Mission

Facere et voluptatem et.

5 Modules

1 Challenge

25% complete

Aut est optio quibusdam ut. Totam voluptates cumque quibusdam molestiae sint.

Last activity: 3 days ago
Close popover

Mission

Quam incidunt voluptatem.

4 Modules

1 Challenge

10% complete

Quo recusandae earum molestias modi et. Debitis et ut expedita qui.

Last activity: 12/21/19

Assigned
Close popover

Mission

Commodi sit laudantium quo.

7 Modules

1 Challenge

10% complete

Neque necessitatibus ut quibusdam quibusdam et. Ut molestiae pariatur rem a quae quidem voluptates. Qui autem minima inventore officia.

Last activity: 12/21/19

 Previous Next

In Progress

Close popover

Module

Deleniti neque.

7 Topics

40 mins remaining

Qui fugiat ab facere dolorem doloremque omnis. Dicta in itaque maiores eveniet veniam placeat quas. Odio nostrum atque laboriosam dicta.

Last activity: 3 days ago
Close popover

Module

Quo nemo magnam nemo consequuntur.

10 Topics

In progress

Ipsum ipsa dolores ducimus officiis non consequuntur. Quam rem eveniet aut quidem repellendus.

Last activity: 12/21/19

 Previous Next

Recommended Missions

Close popover

Mission

Mollitia quos voluptatum quidem.

2 Modules

1 Challenge

25% complete

Autem exercitationem laboriosam omnis officia a voluptas enim. Animi eos ipsa odio. Praesentium dignissimos quia quis odit aut consequatur.
Close popover

Mission

Sed quod et.

3 Modules

1 Challenge

25% complete

Ullam voluptates eos blanditiis rerum voluptates qui nihil. Optio saepe sed dolore magni qui.
Close popover

Mission

Perferendis officiis sunt consequatur.

3 Modules

1 Challenge

25% complete

Dolor eum autem excepturi voluptatem ducimus est. Sint et doloremque et laboriosam rerum similique.

 Previous Next

New Training

Close popover

Mission

Ad nesciunt est praesentium.

10 Modules

1 Challenge

25% complete

Iusto rerum deserunt ratione enim. Repellendus error facilis omnis rem vel unde. Aspernatur id numquam quia non.
Close popover

Module

Recusandae veritatis et.

9 Topics

In progress

Dolorem enim cupiditate earum ut beatae. A quas quo dignissimos dolores officiis.
Close popover

Module

Culpa dolore in.

5 Topics

40 mins remaining

Vel a nobis in. Dolor est unde dolorem tenetur reprehenderit quis odit.

 Previous Next

Page - Homepage

Logo Placeholder
Try Pega
Contact
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

Browse Missions by Product

Pega Platform

Marketing

Customer Service

Sales Automation

Browse Missions by Industry

Communications

Healthcare

Energy & Utilities

Life Sciences

Financial Services

Manufacturing & High Technology

Government

Insurance

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.

Page - Search Results (Archived)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Main Search

Archived Search Results

Looking for instructor-led training?

This content has been archived.

Type

Skill Level
View archived training

Mission

Distinctio pariatur quo exercitationem.

8 topics

Completed

Quae sed asperiores deserunt consequatur accusamus et libero. Porro consequatur voluptatem est. Eum sunt sapiente qui ex asperiores doloremque rerum suscipit.

Module

Optio eligendi quod tempora.

Cumque dolores explicabo natus nihil quam sed. Nemo ut fuga ut tempore tenetur. Qui beatae veniam exercitationem iste sed. Labore aut laboriosam nulla blanditiis et aliquam est.

Certification

Et omnis assumenda.

Repellendus sint amet reprehenderit nulla fugiat omnis. Ad est omnis ab ea. Accusamus expedita consequatur non.

Module

Name of module that will take up two lines of text

Non nobis repellat accusamus quis. Quidem id porro officiis et non beatae ut. Et rerum iste ut error aspernatur odit amet.

Mission Test

Perferendis atque mollitia nihil.

Architecto at ducimus nisi nobis nostrum. Unde similique veritatis itaque odio a illum. Aliquid magnam at fugit fugit voluptas animi velit laboriosam.

Mission Exercise

Vero quia amet veritatis omnis.

Vel atque cupiditate quia amet quis. In et nemo repudiandae quasi numquam voluptatem rerum et. Cumque ab tempore consequatur.

Challenge

Fugiat beatae iure.

Rerum blanditiis numquam aut consequuntur nemo repellat architecto. Exercitationem quo repudiandae exercitationem eligendi qui.

Mission

Velit ea sed.

Repellat autem beatae et rem quasi. Reiciendis et aut nihil porro neque magnam maiores. Laboriosam sed sed et culpa doloremque. Dolorem temporibus ut tempora eum et et.

Module

Est et sit hic.

Beatae harum molestiae illum nihil consequatur aut. Distinctio mollitia nulla quis a. Voluptates fugiat sit non.

Instructor-led Training

View the class schedule to see the latest in person training

Page - Search Results (Filtered)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Search Results

Looking for instructor-led training?
Challenge ()

Type

Skill Level
View archived training

Mission

Eum fugit est vitae.

9 topics

Completed

Voluptatem cumque placeat dolorum quibusdam omnis laudantium. Quae dignissimos ullam eum est et. Rerum saepe harum temporibus voluptatem. Consectetur ut ab voluptate in sed ut.

Module

Omnis fugit consequatur.

Voluptates eligendi aut distinctio ratione reprehenderit. Commodi odio ducimus quae asperiores nulla. Dignissimos iure non pariatur.

Certification

Atque non qui eum.

Ut molestiae sunt veritatis voluptatibus quibusdam. Hic aut fugiat et et. Quasi culpa quia qui culpa labore voluptatibus.

Module

Name of module that will take up two lines of text

Rerum sequi ut fuga consequuntur magni et ab. Ad deleniti suscipit accusantium voluptas qui.

Mission Test

Sit occaecati doloremque fuga.

Laborum ut et itaque omnis ut consequatur sint. Dolore inventore quod voluptas esse atque autem. Voluptatem harum nobis ducimus eveniet sed aut. Soluta eius ea beatae dicta.

Mission Exercise

Omnis voluptatem quisquam.

Numquam aut est nulla eos. Quasi officia facere repudiandae non architecto nihil quo animi. Recusandae ea expedita a provident blanditiis et. Omnis enim ipsam nostrum doloribus et atque.

Challenge

Doloribus aspernatur et.

Vel quia iusto nemo rem exercitationem exercitationem aut. Officiis aperiam rem molestias dolorum sunt nobis quos. Eveniet esse id provident sunt. Culpa qui beatae eveniet aut excepturi consequatur ipsum.

Mission

Aut odit non.

Laudantium nulla qui ut quia tenetur iure aut nam. Ab nostrum autem ducimus explicabo amet aut. Enim cum hic veritatis dolores. Earum consequatur sed vero voluptatem delectus aut nesciunt.

Module

Maiores eos odit praesentium.

Facere consectetur mollitia et aut adipisci cumque. Voluptatem nesciunt ea voluptas commodi perspiciatis explicabo. Et iusto adipisci recusandae.

Instructor-led Training

View the class schedule to see the latest in person training

Page - Search Results

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Search Results

Looking for instructor-led training?

Type

Skill Level
View archived training

Mission

Aut qui deleniti repellendus.

7 topics

Completed

Aspernatur quaerat esse officia et distinctio sed eum. Rerum qui unde necessitatibus voluptatem. Nisi dolore suscipit accusamus hic aut. Porro quisquam aut non.

Module

Blanditiis magnam eos.

Et est delectus et magni qui eaque. Dolores placeat voluptas numquam architecto temporibus sequi. Vitae cumque molestiae reiciendis natus aut commodi.

Certification

Iusto ratione rerum consequatur.

Ea non quod omnis suscipit enim iusto. Et perferendis esse ratione dolores.

Module

Name of module that will take up two lines of text

Dicta dolorem eligendi velit atque reiciendis dolores. Et blanditiis distinctio facilis reiciendis doloremque cumque. Ea illo nobis fugit quod. Repellendus sunt odio pariatur qui nemo.

Mission Test

Fuga totam perferendis ab.

Asperiores temporibus numquam velit sed nemo quas nulla. Rerum nobis voluptatem eos quaerat blanditiis atque vero. Quis nesciunt exercitationem quia nihil quo nam. Qui aperiam et earum.

Mission Exercise

Veritatis sunt minima.

Facere facilis amet ratione aut. Est facere fugiat provident tenetur inventore ut. Rem cumque velit vero maiores earum non et. Natus suscipit sunt quam aut.

Challenge

Deleniti alias aliquid.

Nulla facilis voluptate consequatur qui rerum quis et. Sunt enim inventore dolores optio animi velit placeat. Adipisci perferendis optio totam.

Mission

Veritatis voluptates illum.

Odit aut consequatur est omnis saepe ut molestiae. Tempora officia eaque dolore natus. Iste exercitationem natus tempora sunt cumque sit debitis. Odio nostrum soluta itaque pariatur.

Module

Voluptatem culpa suscipit itaque.

Mollitia accusantium sit et itaque reprehenderit qui alias. Id omnis temporibus quasi numquam. Animi voluptatum error voluptates dolorum aut aut. Expedita eos quo architecto sit.

Instructor-led Training

View the class schedule to see the latest in person training

Page - T1 Landing - Certification Exam

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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.

First Tag Second Tag

Prerequisites:

Name of Mission will go here

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).
Create Pearson VUE Account

Did you find this content helpful?

28% found this useful

Want to help us improve this content?

Page - T1 Landing - Mission Test w/ Modal (Before Submit)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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.

First Tag Second Tag
H5P Placeholder
Return to mission

Congratulations Justin!

You’ve completed the Low-Code Application Mission and earned a new badge!

NOTE: Please allow 24-48 hours for the badge to appear on your Achievements page.
Return to Mission View your Achievements

How likely are you to recommend this mission to a friend or colleague?

Not very likely
Extremely likely

Page - T1 Landing - Mission Test w/ Modal (After Submit)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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.

First Tag Second Tag
H5P Placeholder
Return to mission

Congratulations Justin!

You’ve completed the Low-Code Application Mission and earned a new badge!

NOTE: Please allow 24-48 hours for the badge to appear on your Achievements page.
Return to Mission View your Achievements

Thank You!

We appreciate your feedback.

Page - T1 Landing - Mission Test (H5P Example)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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.

First Tag Second Tag
H5P Goes Here
Return to mission

Page - T1 Landing - Mission Test

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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.

First Tag Second Tag
H5P Placeholder
Return to mission

Page - T1 Landing - Mission Landing (Hide Completed)

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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

Beginner Pega Platform 8.3 Application Development Case Management Other

Mission

Dolores sunt aut optio.

2 topics

Completed

Reiciendis ullam quia itaque provident. Consequatur omnis consequatur ipsum consequatur impedit. Occaecati recusandae accusamus quos cumque et neque.

Module

Consequatur cupiditate et nulla.

Assumenda ut placeat et dolorem. Aut iusto quis quod dolorem perferendis aut omnis. Quo ut voluptas vel veniam officiis. Atque eaque ullam laboriosam blanditiis soluta.

Module

Name of module that will take up two lines of text

Natus est eveniet et tempore. Dolorem ea pariatur illo qui.

Mission Test

Quis et quod debitis illo.

Accusamus odio voluptatem vel cumque. Rerum aut hic sit aut. Nihil error similique non mollitia reiciendis ut. Aut officiis voluptatem voluptatem omnis.

Mission Exercise

Asperiores rem dolorum veniam.

Qui omnis nihil voluptas consequatur dicta. Exercitationem inventore nemo quo et. Quia sunt accusantium veritatis est quia et. Quidem consequuntur et mollitia aperiam ut expedita aut velit.

Challenge

Fugit est non.

Magnam temporibus magnam qui et nostrum vel nisi aut. Mollitia voluptatem consequatur qui alias. Nisi sed hic suscipit delectus molestiae.

Mission

Officia asperiores occaecati.

Consectetur vel quas eum sint est assumenda eaque aut. Perspiciatis omnis deleniti sed eligendi consequatur. Qui ducimus qui officia voluptas qui occaecati. Modi consectetur aspernatur natus.

Module

Pariatur harum delectus delectus.

Expedita dolor dolores perferendis totam voluptas. Odit neque fuga quis sed rerum. Voluptate provident quasi numquam a.

Page - T1 Landing - Mission Landing

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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

Beginner Pega Platform 8.3 Application Development Case Management Other

Mission

Iste enim.

22 topics

Completed

Vitae dolore sit dolores aut rerum non. Magni iusto aspernatur aut occaecati. Nostrum nostrum rerum distinctio eius expedita.

Module

Earum optio molestiae.

Accusamus cupiditate neque quis voluptas in qui commodi. Accusamus explicabo quo minima illum. Excepturi officia et ratione veritatis. Ut nihil perspiciatis rem quae ab.

Module

Name of module that will take up two lines of text

Perferendis eum neque culpa laudantium. Ut et quo dolorum possimus quia. Quaerat nemo assumenda quis itaque eos officia. Sunt sint officia aspernatur hic repudiandae rerum.

Mission Test

Eum illo eius vel.

Ut minus enim voluptas maxime eos consequatur dicta. Velit qui rerum quia voluptatum autem debitis. Harum dolor aliquam iusto ut autem sed sunt nam.

Mission Exercise

Velit ut ratione.

Fugit quibusdam quam culpa impedit quia illum. Modi neque ea assumenda vero ab. Aliquid praesentium quod eos et non. Cum nobis pariatur nisi doloremque.

Challenge

Aut odit eligendi modi.

Est esse voluptate assumenda minima eum. A eaque debitis sunt architecto. Est perspiciatis ipsum qui. Architecto sit autem voluptatem est est libero aut.

Mission

Consectetur consequatur harum.

Id impedit sapiente ea. Sit commodi illo dignissimos enim aut aut. Dolorem aperiam dignissimos nemo rerum iure eligendi. Est consequatur minus id facere nesciunt quo.

Module

Inventore vitae laborum tenetur omnis.

Provident sint et possimus sit eum magnam sit. Optio ullam aut vero.

Page - T1 Landing - Module Landing

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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.

Data Integration Pega Platform

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:

Name of Mission will go here Name of Mission Adding another mission here

Topics

Data types

10 mins

Low-code application development in consectetuer turpis

10 mins

Creating a data type

5 mins

Creating a data type with a really long title donec quam felis

5 mins

Module Quiz

3 Questions

Module Quiz

3 Questions

Module Quiz

3 Questions

Page - T2 Details - Challenge

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

Challenge

Configuring a case type

14 Steps

2 hr 10 mins

 First Tag Second Tag

1 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

Page - T2 Details - Topic

Logo Placeholder
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search
Close popover

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

Did you find this content helpful?

28% found this useful

Want to help us improve this content?

https://pega.invisionapp.com/d/main#/console/18904689/393795334/preview

https://pega.invisionapp.com/d/main#/console/18904689/393795334/preview

full page theming

full page theming xlight

Logo Placeholder
Try Pega
Contact
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

    Personalized. Not Creepy.

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

Learn More
About Pega

Headline #3

Simplify and automate to reduce costs and improve agility.

Learn More About Pega 7

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 light

Logo Placeholder
Try Pega
Contact
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

    Personalized. Not Creepy.

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

Learn More
About Pega

Headline #3

Simplify and automate to reduce costs and improve agility.

Learn More About Pega 7

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
Try Pega
Contact
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

    Personalized. Not Creepy.

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

Learn More
About Pega

Headline #3

Simplify and automate to reduce costs and improve agility.

Learn More About Pega 7

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 xdark

Logo Placeholder
Try Pega
Contact
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

    Personalized. Not Creepy.

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

Learn More
About Pega

Headline #3

Simplify and automate to reduce costs and improve agility.

Learn More About Pega 7

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
Try Pega
Contact
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

    Personalized. Not Creepy.

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

Learn More
About Pega

Headline #3

Simplify and automate to reduce costs and improve agility.

Learn More About Pega 7

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
Try Pega
Contact
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

    Personalized. Not Creepy.

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

Learn More
About Pega

Headline #3

Simplify and automate to reduce costs and improve agility.

Learn More About Pega 7

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
Contact

営業効率

「ペガは管理者が、すぐ目の前にあるかもしれないオポチュニティーについて代理店と話せるようにします。」

最高販売配信責任者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
Try Pega
Contact
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.

Marketing

Engage customers with real-time 1:1 marketing on any channel.

Sales Automation

Intelligently guide sales professionals and automate the sales process.

Customer Service

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

See all analyst reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

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
Try Pega
Contact
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.

Get to know Pega Marketing

Download the data Sheet

Download the Overview document

View Pricing for Pega Marketing

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

See all analyst reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

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

Logo Placeholder
Try Pega
Contact
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.

Get to know Pega Marketing

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.
Product feature 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.
Product feature 2
Maximize Value with Next Best Action Intelligence

zzzBlow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.
Product feature 3
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.
Product feature 4
Maximize Value with Next Best Action Intelligence

zzzBlow 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

See all analyst reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Learn More

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.

resource details page long title

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.

resource details page extra long title

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.

resource details page short title

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
Try Pega
Contact
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.
Share this page LinkedIn

Featured Press Releases

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

Read more

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

Read more

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

Read more

Featured Media Coverage

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

MARTECH ADVISOR

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.

CMS WIRE

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.

CIO AUSTRALIA

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.

First CTA
Optional CTA

Third resource

Simplify and automate to reduce costs and improve agility.

Learn more

d8 browse page

Logo Placeholder
Try Pega
Contact
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

Read more

Jan 18 2018

6 Customer Experience Trends to Watch in 2018

Read more

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Read more
Share this page LinkedIn

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Close search filters

Date

Topic

Industry

Close search filters

June 5, 2018

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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
Try Pega
Contact
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

Read more

Jan 18 2018

6 Customer Experience Trends to Watch in 2018

Read more

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Read more
Share this page LinkedIn

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Close search filters

Date

Topic

Industry

Close search filters

June 5, 2018

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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
Try Pega
Contact
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

Read more

Jan 18 2018

6 Customer Experience Trends to Watch in 2018

Read more

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Read more
Share this page LinkedIn

Showing 210 results in Case Management Cloud CRM Healthcare "search term" (Clear all)

Close search filters

Date

Topic

Industry

Close search filters

June 5, 2018

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

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

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

6 Customer Experience Trends to Watch in 2018

Pega's Don Schuerman previews customer experience questions and trends for the New Year.

Jan 18 2018

3 Reasons Your AI-Driven Customer Experiences are Falling Short

Pega's Jeff Nicholson examines the state of AI in today's customer experiences.

Date

Article Headline

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
Try Pega
Contact
Placeholder for helper text and did-you-mean text.
Close search

Press Releases

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, 2018 – Pegasystems 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.

Share this page LinkedIn

Press Kit

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

d8 agenda manager details

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

Topics

Analytics BPM Customer Onboarding Sales Efficiency Case Management Cloud CRM Customer Loyalty

Industries

Healthcare Hospitality Government

Products

Marketing Field Service

Related Sessions

Spark Talk

What Aflac is learning about consumer expectations through monitoring tech disruptions

Spark Talk

Leverage Mobile and Collaboration to Increase Revenue and Decrease Order-to-Cash Cycle Time

Spark Talk

PayPal Delivers World Class Customer Service, Worldwide

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

d8 agenda manager details alan keynote

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

Topics

Analytics BPM Customer Onboarding Sales Efficiency Case Management Cloud CRM Customer Loyalty

Industries

Healthcare Hospitality Government

Products

Marketing Field Service

Related Sessions

Spark Talk

What Aflac is learning about consumer expectations through monitoring tech disruptions

Spark Talk

Leverage Mobile and Collaboration to Increase Revenue and Decrease Order-to-Cash Cycle Time

Spark Talk

PayPal Delivers World Class Customer Service, Worldwide

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

d8 agenda manager details aflac

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

Topics

Analytics BPM Customer Onboarding Sales Efficiency Case Management Cloud CRM Customer Loyalty

Industries

Healthcare Hospitality Government

Products

Marketing Field Service

Related Sessions

Spark Talk

What Aflac is learning about consumer expectations through monitoring tech disruptions

Spark Talk

Leverage Mobile and Collaboration to Increase Revenue and Decrease Order-to-Cash Cycle Time

Spark Talk

PayPal Delivers World Class Customer Service, Worldwide

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
Try Pega
Contact
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!

Find Us Here Also

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.

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.

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.

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.

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.

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.

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
Try Pega
Contact
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)

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.

Call to action

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Call to action

Article

Headline #3

Simplify and automate to reduce costs and improve agility.

Call to action

Event Sponsors

Related Resources

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Call to action

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Call to action

Article

Headline #3

Simplify and automate to reduce costs and improve agility.

Call to action

event form example

Register now

(all fields are required)

d8 content hub

sticky navbar

Logo Placeholder
Try Pega
Contact
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.
Custom label LinkedIn
Share this page LinkedIn

blog homepage

Logo Placeholder
Try Pega
Contact
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)
Close search filters

Challenge

Functional Area

Topic

Industry

Close search filters

Matthew Nolan

A one-to-one approach to managing customer lifetime value

Continue Reading

Gerry McCool

Why smart factories need digital prescriptive maintenance

Continue Reading

Gerry McCool

Is Lean still relevant in the Digital Age?

Continue Reading

Kate Fowler

3 capabilities insurers need for outstanding customer engagement

Continue Reading

Anthony Abdulla

7 reasons why you should embrace low-code development right now

Continue Reading

Baruch Sachs and Leanne Russell

Pega Catalyst™: Applying design thinking principles to speed digital transformation

Continue Reading

Kate Fowler

3 capabilities insurers need for outstanding customer engagement

Continue Reading

Anthony Abdulla

7 reasons why you should embrace low-code development right now

Continue Reading

Baruch Sachs and Leanne Russell

Pega Catalyst™: Applying design thinking principles to speed digital transformation

Continue Reading

Kate Fowler

3 capabilities insurers need for outstanding customer engagement

Continue Reading

Anthony Abdulla

7 reasons why you should embrace low-code development right now

Continue Reading

Baruch Sachs and Leanne Russell

Pega Catalyst™: Applying design thinking principles to speed digital transformation

Continue Reading

blog post

Logo Placeholder
Try Pega
Contact
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
Share LinkedIn
Copied!

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

Tag Tag Tag Tag Tag

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.

Share this post LinkedIn
Copied!

careers homepage

Powerful software. Powered by you.

Powerful software. Powered by you.

Placeholder for rest of the page

Anthem VideoAnthem Video

Eyebrow

Headline

Button
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
Try Pega
Contact
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

Ordered list is
Ordered list component
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

Figure (Image and Video): the figure component needs to be styled.
All existing components other than the code snippet are not yet web components

animate docs

Animate

Animations for Bolt Design System

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  <bolt-animate in="fade-in"> ...</bolt-animate>
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)
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
  • —
Install Install 
  npm install @bolt/components-animate
Dependencies @bolt/core-v3.x @bolt/lazy-queue

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

Editor

Next Generation live editor for Bolt Web Components

Published Last updated: 2.24.0 Change log Github NPM
Twig Usage 
  {% 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 %}
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)
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 —
  • —
Install Install 
  npm install @bolt/components-editor
Dependencies @bolt/core-v3.x @bolt/lazy-queue detect-browser grapesjs param-case

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

editor with two character layout

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

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-meteor , brand-molecule , brand-operations , brand-orbit , 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!

status dialogue bar kitchen sink

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.

micro journeys intersection observer

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.

micro journeys single step with two character layout

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