color system

Color System The color foundation of Bolt, based on Pega’s branding. Brand Colors
  • Navy, xdark
    #091734
  • var(--bolt-color-navy-xdark)
  • Text size
    Aa
    Aa
  • White (17.74)
    pass
    pass
  • Black (1.18)
    fail
    fail
  • Navy, dark
    #081c45
  • var(--bolt-color-navy-dark)
  • Text size
    Aa
    Aa
  • White (16.64)
    pass
    pass
  • Black (1.26)
    fail
    fail
  • Navy
    #001f5f
  • var(--bolt-color-navy)
  • Text size
    Aa
    Aa
  • White (15.43)
    pass
    pass
  • Black (1.36)
    fail
    fail
  • Navy, light
    #3e67bb
  • var(--bolt-color-navy-light)
  • Text size
    Aa
    Aa
  • White (5.44)
    pass
    pass
  • Black (3.86)
    pass
    fail
  • Navy, xlight
    #abc2f2
  • var(--bolt-color-navy-xlight)
  • Text size
    Aa
    Aa
  • White (1.79)
    fail
    fail
  • Black (11.73)
    pass
    pass
  • Teal, xdark
    #005154
  • var(--bolt-color-teal-xdark)
  • Text size
    Aa
    Aa
  • White (9.11)
    pass
    pass
  • Black (2.3)
    fail
    fail
  • Teal, dark
    #0a6266
  • var(--bolt-color-teal-dark)
  • Text size
    Aa
    Aa
  • White (7.11)
    pass
    pass
  • Black (2.95)
    fail
    fail
  • Teal
    #10a5ac
  • var(--bolt-color-teal)
  • Text size
    Aa
    Aa
  • White (3)
    pass
    fail
  • Black (7)
    pass
    pass
  • Teal, light
    #86cac6
  • var(--bolt-color-teal-light)
  • Text size
    Aa
    Aa
  • White (1.86)
    fail
    fail
  • Black (11.28)
    pass
    pass
  • Teal, xlight
    #b7e4e6
  • var(--bolt-color-teal-xlight)
  • Text size
    Aa
    Aa
  • White (1.38)
    fail
    fail
  • Black (15.25)
    pass
    pass
  • Orange, dark
    #c74200
  • var(--bolt-color-orange-dark)
  • Text size
    Aa
    Aa
  • White (4.99)
    pass
    pass
  • Black (4.21)
    pass
    fail
  • Orange
    #f76923
  • var(--bolt-color-orange)
  • Text size
    Aa
    Aa
  • White (3)
    pass
    fail
  • Black (7)
    pass
    pass
  • Orange, light
    #ff9866
  • var(--bolt-color-orange-light)
  • Text size
    Aa
    Aa
  • White (2.11)
    fail
    fail
  • Black (9.94)
    pass
    pass
  • Yellow, dark
    #e8af17
  • var(--bolt-color-yellow-dark)
  • Text size
    Aa
    Aa
  • White (1.99)
    fail
    fail
  • Black (10.58)
    pass
    pass
  • Yellow
    #ffc836
  • var(--bolt-color-yellow)
  • Text size
    Aa
    Aa
  • White (1.55)
    fail
    fail
  • Black (13.57)
    pass
    pass
  • Yellow, light
    #ffe399
  • var(--bolt-color-yellow-light)
  • Text size
    Aa
    Aa
  • White (1.26)
    fail
    fail
  • Black (16.7)
    pass
    pass
  • Wine
    #661d34
  • var(--bolt-color-wine)
  • Text size
    Aa
    Aa
  • White (11.73)
    pass
    pass
  • Black (1.79)
    fail
    fail
  • Pink
    #e63690
  • var(--bolt-color-pink)
  • Text size
    Aa
    Aa
  • White (3.97)
    pass
    fail
  • Black (5.29)
    pass
    pass
  • Berry
    #ac1361
  • var(--bolt-color-berry)
  • Text size
    Aa
    Aa
  • White (6.95)
    pass
    pass
  • Black (3.02)
    pass
    fail
  • Violet
    #5f67b9
  • var(--bolt-color-violet)
  • Text size
    Aa
    Aa
  • White (5.09)
    pass
    pass
  • Black (4.13)
    pass
    fail
  • Gray, xdark
    #2e2e33
  • var(--bolt-color-gray-xdark)
  • Text size
    Aa
    Aa
  • White (13.51)
    pass
    pass
  • Black (1.55)
    fail
    fail
  • Gray, dark
    #5c5d66
  • var(--bolt-color-gray-dark)
  • Text size
    Aa
    Aa
  • White (6.54)
    pass
    pass
  • Black (3.21)
    pass
    fail
  • Gray
    #8d8e99
  • var(--bolt-color-gray)
  • Text size
    Aa
    Aa
  • White (3.25)
    pass
    fail
  • Black (6.46)
    pass
    pass
  • Gray, light
    #e0e2eb
  • var(--bolt-color-gray-light)
  • Text size
    Aa
    Aa
  • White (1.29)
    fail
    fail
  • Black (16.25)
    pass
    pass
  • Gray, xlight
    #f6f6f9
  • var(--bolt-color-gray-xlight)
  • Text size
    Aa
    Aa
  • White (1.08)
    fail
    fail
  • Black (19.47)
    pass
    pass
  • Black
    #151619
  • var(--bolt-color-black)
  • Text size
    Aa
    Aa
  • White (18.09)
    pass
    pass
  • Black (1.16)
    fail
    fail
  • White
    #ffffff
  • var(--bolt-color-white)
  • Text size
    Aa
    Aa
  • White (1)
    fail
    fail
  • Black (21)
    pass
    pass
Status Colors
  • Info, dark
    #004880
  • var(--bolt-color-info-dark)
  • Text size
    Aa
    Aa
  • White (9.38)
    pass
    pass
  • Black (2.24)
    fail
    fail
  • Info
    #0076d1
  • var(--bolt-color-info)
  • Text size
    Aa
    Aa
  • White (4.65)
    pass
    pass
  • Black (4.51)
    pass
    pass
  • Info, light
    #d6edff
  • var(--bolt-color-info-light)
  • Text size
    Aa
    Aa
  • White (1.21)
    fail
    fail
  • Black (17.42)
    pass
    pass
  • Success, dark
    #256940
  • var(--bolt-color-success-dark)
  • Text size
    Aa
    Aa
  • White (6.62)
    pass
    pass
  • Black (3.17)
    pass
    fail
  • Success
    #357e38
  • var(--bolt-color-success)
  • Text size
    Aa
    Aa
  • White (5.01)
    pass
    pass
  • Black (4.19)
    pass
    fail
  • Success, light
    #dbf0dc
  • var(--bolt-color-success-light)
  • Text size
    Aa
    Aa
  • White (1.2)
    fail
    fail
  • Black (17.51)
    pass
    pass
  • Error, dark
    #9d2315
  • var(--bolt-color-error-dark)
  • Text size
    Aa
    Aa
  • White (7.82)
    pass
    pass
  • Black (2.68)
    fail
    fail
  • Error
    #b42818
  • var(--bolt-color-error)
  • Text size
    Aa
    Aa
  • White (6.45)
    pass
    pass
  • Black (3.26)
    pass
    fail
  • Error, light
    #fad5d1
  • var(--bolt-color-error-light)
  • Text size
    Aa
    Aa
  • White (1.35)
    fail
    fail
  • Black (15.5)
    pass
    pass
  • Warning, dark
    #cfb317
  • var(--bolt-color-warning-dark)
  • Text size
    Aa
    Aa
  • White (2.08)
    fail
    fail
  • Black (10.11)
    pass
    pass
  • Warning
    #e8cd30
  • var(--bolt-color-warning)
  • Text size
    Aa
    Aa
  • White (1.59)
    fail
    fail
  • Black (13.21)
    pass
    pass
  • Warning, light
    #faf4d1
  • var(--bolt-color-warning-light)
  • Text size
    Aa
    Aa
  • White (1.11)
    fail
    fail
  • Black (18.93)
    pass
    pass

color tokens

Color Tokens Design tokens for Bolt’s color system, available as CSS custom properties. Brand Colors Navy
CSS custom property Value
Navy, xdark var(--bolt-color-navy-xdark)   #091734
Navy, dark var(--bolt-color-navy-dark)   #081c45
Navy var(--bolt-color-navy)   #001f5f
Navy, light var(--bolt-color-navy-light)   #3e67bb
Navy, xlight var(--bolt-color-navy-xlight)   #abc2f2
Teal
CSS custom property Value
Teal, xdark var(--bolt-color-teal-xdark)   #005154
Teal, dark var(--bolt-color-teal-dark)   #0a6266
Teal var(--bolt-color-teal)   #10a5ac
Teal, light var(--bolt-color-teal-light)   #86cac6
Teal, xlight var(--bolt-color-teal-xlight)   #b7e4e6
Orange
CSS custom property Value
Orange, dark var(--bolt-color-orange-dark)   #c74200
Orange var(--bolt-color-orange)   #f76923
Orange, light var(--bolt-color-orange-light)   #ff9866
Yellow
CSS custom property Value
Yellow, dark var(--bolt-color-yellow-dark)   #e8af17
Yellow var(--bolt-color-yellow)   #ffc836
Yellow, light var(--bolt-color-yellow-light)   #ffe399
Wine
CSS custom property Value
Wine var(--bolt-color-wine)   #661d34
Pink
CSS custom property Value
Pink var(--bolt-color-pink)   #e63690
Berry
CSS custom property Value
Berry var(--bolt-color-berry)   #ac1361
Violet
CSS custom property Value
Violet var(--bolt-color-violet)   #5f67b9
Gray
CSS custom property Value
Gray, xdark var(--bolt-color-gray-xdark)   #2e2e33
Gray, dark var(--bolt-color-gray-dark)   #5c5d66
Gray var(--bolt-color-gray)   #8d8e99
Gray, light var(--bolt-color-gray-light)   #e0e2eb
Gray, xlight var(--bolt-color-gray-xlight)   #f6f6f9
Black
CSS custom property Value
Black var(--bolt-color-black)   #151619
White
CSS custom property Value
White var(--bolt-color-white)   #ffffff
Status Colors Info
CSS custom property Value
Info, dark var(--bolt-color-info-dark)   #004880
Info var(--bolt-color-info)   #0076d1
Info, light var(--bolt-color-info-light)   #d6edff
Success
CSS custom property Value
Success, dark var(--bolt-color-success-dark)   #256940
Success var(--bolt-color-success)   #357e38
Success, light var(--bolt-color-success-light)   #dbf0dc
Error
CSS custom property Value
Error, dark var(--bolt-color-error-dark)   #9d2315
Error var(--bolt-color-error)   #b42818
Error, light var(--bolt-color-error-light)   #fad5d1
Warning
CSS custom property Value
Warning, dark var(--bolt-color-warning-dark)   #cfb317
Warning var(--bolt-color-warning)   #e8cd30
Warning, light var(--bolt-color-warning-light)   #faf4d1

theming system

Theming System The color theming foundation of Bolt. White

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-white class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Black

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-black class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Gray-xlight

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-gray-xlight class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy-dark

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-dark class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy-light

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-light class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Teal

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-teal class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Yellow

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-yellow class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Orange

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-orange class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Pink

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-pink class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Wine

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-wine class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Berry

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-berry class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Violet

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-violet class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

text color utilities

Text Color Utilities Utility classes based on Bolt’s color system. Brand Colors Navy
Class name CSS value
.u-bolt-color-navy-xdark   #091734
.u-bolt-color-navy-dark   #081c45
.u-bolt-color-navy   #001f5f
.u-bolt-color-navy-light   #3e67bb
.u-bolt-color-navy-xlight   #abc2f2
Teal
Class name CSS value
.u-bolt-color-teal-xdark   #005154
.u-bolt-color-teal-dark   #0a6266
.u-bolt-color-teal   #10a5ac
.u-bolt-color-teal-light   #86cac6
.u-bolt-color-teal-xlight   #b7e4e6
Orange
Class name CSS value
.u-bolt-color-orange-dark   #c74200
.u-bolt-color-orange   #f76923
.u-bolt-color-orange-light   #ff9866
Yellow
Class name CSS value
.u-bolt-color-yellow-dark   #e8af17
.u-bolt-color-yellow   #ffc836
.u-bolt-color-yellow-light   #ffe399
Wine
Class name CSS value
.u-bolt-color-wine   #661d34
Pink
Class name CSS value
.u-bolt-color-pink   #e63690
Berry
Class name CSS value
.u-bolt-color-berry   #ac1361
Violet
Class name CSS value
.u-bolt-color-violet   #5f67b9
Gray
Class name CSS value
.u-bolt-color-gray-xdark   #2e2e33
.u-bolt-color-gray-dark   #5c5d66
.u-bolt-color-gray   #8d8e99
.u-bolt-color-gray-light   #e0e2eb
.u-bolt-color-gray-xlight   #f6f6f9
Black
Class name CSS value
.u-bolt-color-black   #151619
White
Class name CSS value
.u-bolt-color-white   #ffffff
Status Colors Info
Class name CSS value
.u-bolt-color-info-dark   #004880
.u-bolt-color-info   #0076d1
.u-bolt-color-info-light   #d6edff
Success
Class name CSS value
.u-bolt-color-success-dark   #256940
.u-bolt-color-success   #357e38
.u-bolt-color-success-light   #dbf0dc
Error
Class name CSS value
.u-bolt-color-error-dark   #9d2315
.u-bolt-color-error   #b42818
.u-bolt-color-error-light   #fad5d1
Warning
Class name CSS value
.u-bolt-color-warning-dark   #cfb317
.u-bolt-color-warning   #e8cd30
.u-bolt-color-warning-light   #faf4d1

spacing system

Spacing System The spacing foundation of Bolt. Horizontal
xxsmall: 0.2015rem
xsmall: 0.3875rem
small: 0.775rem
medium: 1.55rem
large: 3.1rem
xlarge: 6.2rem
xxlarge: 12.4rem
xxxlarge: 24.8rem Vertical
xxsmall: 0.1755rem
xsmall: 0.3375rem
small: 0.675rem
medium: 1.35rem
large: 2.7rem
xlarge: 5.4rem
xxlarge: 10.8rem
xxxlarge: 21.6rem

spacing tokens

Spacing Tokens Design tokens for Bolt’s spacing system, available as CSS custom properties. Horizontal
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-x-xxsmall) 0.2015rem 3px scales from 3px to 4px
xsmall var(--bolt-spacing-x-xsmall) 0.3875rem 6px scales from 6px to 7px
small var(--bolt-spacing-x-small) 0.775rem 12px scales from 11px to 13px
medium var(--bolt-spacing-x-medium) 1.55rem 24px scales from 22px to 25px
large var(--bolt-spacing-x-large) 3.1rem 47px scales from 44px to 50px
xlarge var(--bolt-spacing-x-xlarge) 6.2rem 93px scales from 87px to 100px
xxlarge var(--bolt-spacing-x-xxlarge) 12.4rem 186px scales from 174px to 199px
xxxlarge var(--bolt-spacing-x-xxxlarge) 24.8rem 372px scales from 348px to 397px
Vertical
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-y-xxsmall) 0.1755rem 3px scales from 3px to 3px
xsmall var(--bolt-spacing-y-xsmall) 0.3375rem 6px scales from 5px to 6px
small var(--bolt-spacing-y-small) 0.675rem 11px scales from 10px to 11px
medium var(--bolt-spacing-y-medium) 1.35rem 21px scales from 19px to 22px
large var(--bolt-spacing-y-large) 2.7rem 41px scales from 38px to 44px
xlarge var(--bolt-spacing-y-xlarge) 5.4rem 81px scales from 76px to 87px
xxlarge var(--bolt-spacing-y-xxlarge) 10.8rem 162px scales from 152px to 173px
xxxlarge var(--bolt-spacing-y-xxxlarge) 21.6rem 324px scales from 303px to 346px
*Spacing sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System

spacing utilities

Spacing Utilities Utility classes based on Bolt’s spacing system. Margin All directions
Class name CSS value
.u-bolt-margin-xxsmall margin: 0.2015rem 0.1755rem
.u-bolt-margin-xsmall margin: 0.3875rem 0.3375rem
.u-bolt-margin-small margin: 0.775rem 0.675rem
.u-bolt-margin-medium margin: 1.55rem 1.35rem
.u-bolt-margin-large margin: 3.1rem 2.7rem
.u-bolt-margin-xlarge margin: 6.2rem 5.4rem
.u-bolt-margin-xxlarge margin: 12.4rem 10.8rem
.u-bolt-margin-xxxlarge margin: 24.8rem 21.6rem
Top
Class name CSS value
.u-bolt-margin-top-xxsmall margin-top: 0.1755rem
.u-bolt-margin-top-xsmall margin-top: 0.3375rem
.u-bolt-margin-top-small margin-top: 0.675rem
.u-bolt-margin-top-medium margin-top: 1.35rem
.u-bolt-margin-top-large margin-top: 2.7rem
.u-bolt-margin-top-xlarge margin-top: 5.4rem
.u-bolt-margin-top-xxlarge margin-top: 10.8rem
.u-bolt-margin-top-xxxlarge margin-top: 21.6rem
Right
Class name CSS value
.u-bolt-margin-right-xxsmall margin-right: 0.2015rem
.u-bolt-margin-right-xsmall margin-right: 0.3875rem
.u-bolt-margin-right-small margin-right: 0.775rem
.u-bolt-margin-right-medium margin-right: 1.55rem
.u-bolt-margin-right-large margin-right: 3.1rem
.u-bolt-margin-right-xlarge margin-right: 6.2rem
.u-bolt-margin-right-xxlarge margin-right: 12.4rem
.u-bolt-margin-right-xxxlarge margin-right: 24.8rem
Bottom
Class name CSS value
.u-bolt-margin-bottom-xxsmall margin-bottom: 0.1755rem
.u-bolt-margin-bottom-xsmall margin-bottom: 0.3375rem
.u-bolt-margin-bottom-small margin-bottom: 0.675rem
.u-bolt-margin-bottom-medium margin-bottom: 1.35rem
.u-bolt-margin-bottom-large margin-bottom: 2.7rem
.u-bolt-margin-bottom-xlarge margin-bottom: 5.4rem
.u-bolt-margin-bottom-xxlarge margin-bottom: 10.8rem
.u-bolt-margin-bottom-xxxlarge margin-bottom: 21.6rem
Left
Class name CSS value
.u-bolt-margin-left-xxsmall margin-left: 0.2015rem
.u-bolt-margin-left-xsmall margin-left: 0.3875rem
.u-bolt-margin-left-small margin-left: 0.775rem
.u-bolt-margin-left-medium margin-left: 1.55rem
.u-bolt-margin-left-large margin-left: 3.1rem
.u-bolt-margin-left-xlarge margin-left: 6.2rem
.u-bolt-margin-left-xxlarge margin-left: 12.4rem
.u-bolt-margin-left-xxxlarge margin-left: 24.8rem
Padding All directions
Class name CSS value
.u-bolt-padding-xxsmall padding: 0.2015rem 0.1755rem
.u-bolt-padding-xsmall padding: 0.3875rem 0.3375rem
.u-bolt-padding-small padding: 0.775rem 0.675rem
.u-bolt-padding-medium padding: 1.55rem 1.35rem
.u-bolt-padding-large padding: 3.1rem 2.7rem
.u-bolt-padding-xlarge padding: 6.2rem 5.4rem
.u-bolt-padding-xxlarge padding: 12.4rem 10.8rem
.u-bolt-padding-xxxlarge padding: 24.8rem 21.6rem
Top
Class name CSS value
.u-bolt-padding-top-xxsmall padding-top: 0.1755rem
.u-bolt-padding-top-xsmall padding-top: 0.3375rem
.u-bolt-padding-top-small padding-top: 0.675rem
.u-bolt-padding-top-medium padding-top: 1.35rem
.u-bolt-padding-top-large padding-top: 2.7rem
.u-bolt-padding-top-xlarge padding-top: 5.4rem
.u-bolt-padding-top-xxlarge padding-top: 10.8rem
.u-bolt-padding-top-xxxlarge padding-top: 21.6rem
Right
Class name CSS value
.u-bolt-padding-right-xxsmall padding-right: 0.2015rem
.u-bolt-padding-right-xsmall padding-right: 0.3875rem
.u-bolt-padding-right-small padding-right: 0.775rem
.u-bolt-padding-right-medium padding-right: 1.55rem
.u-bolt-padding-right-large padding-right: 3.1rem
.u-bolt-padding-right-xlarge padding-right: 6.2rem
.u-bolt-padding-right-xxlarge padding-right: 12.4rem
.u-bolt-padding-right-xxxlarge padding-right: 24.8rem
Bottom
Class name CSS value
.u-bolt-padding-bottom-xxsmall padding-bottom: 0.1755rem
.u-bolt-padding-bottom-xsmall padding-bottom: 0.3375rem
.u-bolt-padding-bottom-small padding-bottom: 0.675rem
.u-bolt-padding-bottom-medium padding-bottom: 1.35rem
.u-bolt-padding-bottom-large padding-bottom: 2.7rem
.u-bolt-padding-bottom-xlarge padding-bottom: 5.4rem
.u-bolt-padding-bottom-xxlarge padding-bottom: 10.8rem
.u-bolt-padding-bottom-xxxlarge padding-bottom: 21.6rem
Left
Class name CSS value
.u-bolt-padding-left-xxsmall padding-left: 0.2015rem
.u-bolt-padding-left-xsmall padding-left: 0.3875rem
.u-bolt-padding-left-small padding-left: 0.775rem
.u-bolt-padding-left-medium padding-left: 1.55rem
.u-bolt-padding-left-large padding-left: 3.1rem
.u-bolt-padding-left-xlarge padding-left: 6.2rem
.u-bolt-padding-left-xxlarge padding-left: 12.4rem
.u-bolt-padding-left-xxxlarge padding-left: 24.8rem

typography system

Typography System 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 Headline: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, 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. Size Scales Body Scale Text
medium: Every second he kept glancing at the clock. small: Every second he kept glancing at the clock. xsmall: Every second he kept glancing at the clock. Heading Scale Headline
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: Every second he kept glancing at the clock. Subheadline
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. Eyebrow
xsmall (only option): Every second he kept glancing at the clock. *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

typography tokens

Typography Tokens Design tokens for Bolt’s typography system, available as CSS custom properties. Font-family
CSS custom property Value
body var(--bolt-type-font-family-body) Open Sans
headline var(--bolt-type-font-family-headline) Open Sans
code var(--bolt-type-font-family-code) 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fallback var(--bolt-type-font-family-fallback) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif
Font-size
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxxlarge var(--bolt-type-font-size-xxxlarge) 2.35rem 36px scales from 33px to 38px
xxlarge var(--bolt-type-font-size-xxlarge) 1.75rem 27px scales from 25px to 28px
xlarge var(--bolt-type-font-size-xlarge) 1.4rem 21px scales from 20px to 23px
large var(--bolt-type-font-size-large) 1.15rem 18px scales from 17px to 19px
medium var(--bolt-type-font-size-medium) 1rem 15px scales from 14px to 16px
small var(--bolt-type-font-size-small) 0.9rem 14px scales from 13px to 15px
xsmall var(--bolt-type-font-size-xsmall) 0.8rem 12px scales from 12px to 13px
xxsmall var(--bolt-type-font-size-xxsmall) 0.7rem 11px scales from 10px to 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System Font-weight
CSS custom property Value
light var(--bolt-type-font-weight-light) 300
regular var(--bolt-type-font-weight-regular) 400
semibold var(--bolt-type-font-weight-semibold) 600
bold var(--bolt-type-font-weight-bold) 800
Line-height
CSS custom property Value
xxxlarge var(--bolt-type-font-weight-xxxlarge) 1.25
xxlarge var(--bolt-type-font-weight-xxlarge) 1.35
xlarge var(--bolt-type-font-weight-xlarge) 1.4
large var(--bolt-type-font-weight-large) 1.5
medium var(--bolt-type-font-weight-medium) 1.55
small var(--bolt-type-font-weight-small) 1.45
xsmall var(--bolt-type-font-weight-xsmall) 1.4
xxsmall var(--bolt-type-font-weight-xxsmall) 1.4
Letter-spacing
CSS custom property Value in rem Value in px
narrow var(--bolt-type-font-weight-narrow) -0.025rem -0.375px scales from -0.35px to -0.4px
regular var(--bolt-type-font-weight-regular) 0 0px scales from 0px to 0px
wide var(--bolt-type-font-weight-wide) 0.05rem 0.75px scales from 0.7001px to 0.8px

breakpoint system

Breakpoint System The responsive breakpoint foundation of Bolt. Overview
  • 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
SCSS mixin 
  .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;
  }
}

information density system

Information Density System Various spacing and typography configurations based on information density.
Data attribute* Note Demo
Comfortable data-bolt-info-density="comfortable" The comfortable density increases font-size and spacing. View
Regular data-bolt-info-density="regular" The default density. View
Compact data-bolt-info-density="compact" The compact density decreases font-size and spacing. View
*The data attribute can only be used on the <html> element of a page.

comfortable density

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "comfortable".

Robotic Automation

Comfortable Information Density

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.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

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.

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 ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

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

 Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

 Call to action
Image alt. Image alt.

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

 Call to action
Image alt. Image alt.

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

 Call to action

regular density

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "regular". Data attribute is not needed.

Robotic Automation

Regular Information Density

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.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

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.

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 ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

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

 Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

 Call to action
Image alt. Image alt.

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

 Call to action
Image alt. Image alt.

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

 Call to action

compact density

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "compact".

Robotic Automation

Compact Information Density

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.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

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.

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 ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

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

 Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

 Call to action
Image alt. Image alt.

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

 Call to action
Image alt. Image alt.

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

 Call to action

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

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:

  • none: 0
  • auto: auto
  • full: 100%
  • fullscreen: 100vh

Demo

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

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

article

article docs

Article

An editorial container that styles children HTML elements.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-elements-article/article.twig' with {
  content: 'This is an article.',
} 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 *

Content of the article.

 any —
  • —
tag

Set the HTML tag for the content container.

 string article
  • article or div
Install Install 
  npm install @bolt/elements-article
Dependencies @bolt/core-v3.x

article

Basic Article An Article element can be used for any free-form content areas where a WYSIWYG editor is enabled. Basic HTML elements are styled within the Article element. Important Notes: Even though plain <table> elements are styled, they are not responsive. Please wrap all <table> elements with <bolt-table> web component to enable responsive styles (JavaScript required). View Table Component As for <pre> and <code> elements, they do not have syntax highlighting. To enable syntax highlighting, please use <bolt-code-snippet> web component instead (JavaScript required). View Code Snippet Component Demo

The is a list of all supported plain HTML elements:

  • p
  • dl
  • ol
  • ul
  • header
  • section
  • h1 ~ h6
  • blockquote
  • details
  • figure
  • small
  • table
  • code
  • kbd
  • pre
  • hr

The following is a kitchen sink of all supported plain HTML elements:

H1 heading text

H2 heading text

H3 heading text

H4 heading text

H5 heading text
H6 heading text

Text: bold, italic, linked, code, kbd, small, superscript, subscript.

  • First level unordered item
  • First level unordered item
    1. Second level ordered item
      • Third level unordered item
      • Third level unordered item
    2. Second level ordered item
  • First level unordered item
  1. First level ordered item
  2. First level ordered item
    • Second level unordered item
      1. Third level ordered item
      2. Third level ordered item
    • Second level unordered item
  3. First level ordered item
Summary sums up the details

Details elaborate on the summary.

Definition list
A list of text and description.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
pre {
  padding: .5em 1em; color: black; border-left: 5px solid; background-color: white;
}

Pull Quote. Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.

The time is always right to do what is right.

Figure caption
Col1 Col2 Col3
Row1 Row1 Row1
Row2 Row2 Row2
Twig
// Render content {% set article_content %} <h1> H1 heading text </h1> <h2> H2 heading text </h2> <h3> H3 heading text </h3> <h4> H4 heading text </h4> <h5> H5 heading text </h5> <h6> H6 heading text </h6> <p> Text: <strong>bold</strong>, <em>italic</em>, <a href="#!">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>, super<sup>script</sup>, sub<sub>script</sub>. </p> {% endset %} // Pass content to the component and set proper HTML tag {% include '@bolt-elements-article/article.twig' with { content: article_content, tag: 'article', } only %}
HTML
<article class="e-bolt-article"> <h1> H1 heading text </h1> <h2> H2 heading text </h2> <h3> H3 heading text </h3> <h4> H4 heading text </h4> <h5> H5 heading text </h5> <h6> H6 heading text </h6> <p> Text: <strong>bold</strong>, <em>italic</em>, <a href="#!">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>, super<sup>script</sup>, sub<sub>script</sub>. </p> </article>

button docs

Button

A graphical element that indicates interactivity.

Published Last updated: 4.2.1 Change log NPM
Twig Usage 
  {% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button',
  attributes: {
    type: 'submit'
  }
} 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 *

Content of the button.

 any —
  • —
icon_before

Append an icon before the button content. Icon component is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_after

Append an icon after the button content. Icon component is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_only

Append an icon to the button content and visually hide the text content. This prop trumps icon_before and icon_after.

 any —
  • —
hierarchy

Style the button appropriately based on information hierarchy.

 string primary
  • primary, secondary, tertiary, transparent
size

Control the font-size and padding of the button.

 string medium
  • xsmall, small, medium, large
border_radius

Control the border radius of the button.

 string small
  • small, large, full
display

Control the display of the button.

 string inline
  • inline, block, inline@from-small
Install Install 
  npm install @bolt/elements-button
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

button

Basic Button A button is generally an inline interactive graphical element. Its main purpose is to help the user perform a function (sometimes navigate). <button class="e-bolt-button"> is acceptable at rendering a button, though the Twig template is the recommended usage for Drupal. Important Notes: Only text should be passed to the content prop. However, <span>, <em>, and <strong> elements can be used. Button element is a replacement for the Button component. Demo
Light
Dark
Twig
{% include '@bolt-elements-button/button.twig' with { content: 'This is a button', attributes: { type: 'button' } } only %}
HTML
<button type="button" class="e-bolt-button">This is a button</button>

button attributes

HTML Attributes for Button Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed. Important Notes: <a> requires the href attribute. <button> requires the type attribute. Demo This button has the "href", "target", and "id" attributes
Twig
// <button> {% include '@bolt-elements-button/button.twig' with { content: 'This button has the "type" attribute', attributes: { type: 'submit', } } only %} // <a> {% include '@bolt-elements-button/button.twig' with { content: 'This button has the "href", "target", and "id" attributes', attributes: { href: 'https://pega.com', target: '_blank', id: 'js-bolt-some-unique-id' } } only %}
HTML
<a href="https://pega.com" target="_blank" id="js-bolt-some-unique-id" class="e-bolt-button">This button has the "href", "target", and "id" attributes</a>

button with icon

Button with Icon Icons can be used in tandem with a button. An icon can be placed before and/or after the button text. The icon component is recommended for appending icons. However, an <img> element is also acceptable. Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size and background props for the icon component are not well supported in this scenario. When writing in plain HTML, all white space must be eliminated to have the icon display correctly next to text (in terms of spacing and wrapping). The markup must be written all in one line and spaces between HTML elements must be removed. When writing in plain HTML, <span class="e-bolt-button__icon-before"> and <span class="e-bolt-button__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own. Demo

Twig
// Icon vars {% set icon_custom %} <img src="/images/placeholders/500x500.jpg"> {% endset %} {% set icon_chevron_down %} {% include '@bolt-components-icon/icon.twig' with { name: 'chevron-down', } only %} {% endset %} // Button include {% include '@bolt-elements-button/button.twig' with { content: 'This is a button with icons before and after', icon_before: icon_custom, icon_after: icon_chevron_down, attributes: { type: 'button' } } only %}
HTML
<button type="button" class="e-bolt-button"><span class="e-bolt-button__icon-before"><img src="/images/placeholders/500x500.jpg"></span>This is a button with icons before and after<span class="e-bolt-button__icon-after"><bolt-icon name="chevron-down"></bolt-icon></span></button>

button with icon only

Icon Only Button Icon only button visually hides the text content of the button. Such a button should be used sparingly and only in places where screen real estate is a concern. Important Notes: It is recommended that icon only buttons to be used in tandem with tooltip to give the user more context about the button’s function. When writing in plain HTML, aria-label is required to render the button text. For example: <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download">. Text should not be used inside the button when using aria-label. When writing in plain HTML, <span class="e-bolt-button__icon-center"> is required to wrap around the icon markup. The wrapper ensures that the icon will always center within the button. Demo File size: 25MB Add another row
Twig
// Icon only button combined with tooltip {% set icon_download %} {% include '@bolt-components-icon/icon.twig' with { name: 'download', } only %} {% endset %} {% set tooltip_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'Download', icon_only: icon_download, attributes: { type: 'button' } } only %} {% endset %} {% include '@bolt-components-tooltip/tooltip.twig' with { trigger: tooltip_trigger, content: 'File size: 25MB', } only %}
HTML
// Icon only button combined with tooltip <bolt-tooltip> <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download"> <span class="e-bolt-button__icon-center"><bolt-icon name="download"></bolt-icon></span> </button> <span slot="content">File size: 25MB</span> </bolt-tooltip>

button hierarchy

Button Hierarchy A button can be assigned to various levels of the content hierarchy based on the information architecture of the layout. Important Notes: Transparent button is the lowest in the hierarchy level. This style has the lowest affordances and it should NEVER be used alone. Always pair it with a primary, secondary, or tertiary button. Demo
Light
Dark
Twig
{% include '@bolt-elements-button/button.twig' with { content: 'This is a secondary button', hierarchy: 'secondary', attributes: { type: 'button' } } only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--secondary">This is a secondary button</button>

button size

Button Size A button’s size can be modified per use case. Demo
Twig
{% include '@bolt-elements-button/button.twig' with { content: 'This is a small button', size: 'small', attributes: { type: 'button' } } only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--small">This is a small button</button>

button border radius

Button Border Radius Rounded buttons are possible with the border_radius prop. Demo
Twig
{% include '@bolt-elements-button/button.twig' with { content: 'This is a fully rounded button', border_radius: 'full', attributes: { type: 'button' } } only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--border-radius-full">This is a fully rounded button</button>

button display

Button Display The display of a button can be changed from inline to block (full width), and there is an extra option to make it transform from inline to block at the small breakpoint. Important Notes: When display prop is set to inline@from-small, it means the button is block display below the small breakpoint, and transform to inline display from small breakpoint and up. Resize the browser to see the demo below. Demo
Twig
{% include '@bolt-elements-button/button.twig' with { content: 'This is a full width button', display: 'block', attributes: { type: 'button' } } only %}
HTML
<button type="button" class="e-bolt-button e-bolt-button--block">This is a full width button</button>

button upload

Upload Button The button classes can also be used on a file input. Important Notes: This is an advanced use case and the Twig template does not support this. Hierarchy should be set to tertiary. Size should be set to small. Demo
Twig
Not available in Twig. Please use plain HTML.
HTML
<input id="unique-file-id" type="file" class="e-bolt-button e-bolt-button--small e-bolt-button--tertiary">

image docs

Image

A responsive image embed.

In Progress (Unreleased)
Twig Usage 
  {% include '@bolt-elements-image/image.twig' with {
  fill: true,
  attributes: {
    alt: 'Image alt text',
    src: 'path/image.jpg',
    width: 500,
    height: 500,
  },
} 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 element.

 object —
  • —
fill

Render the image 100% wide, filling up the full width of its parent container.

 boolean —
  • —
background

Render the image as a background image. This sets the image to be absolute positioned, only use this prop if the image is inside a non-static container.

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

image

Basic Image An image element embeds a responsive graphic on the page. Important Notes: To make an image accessible to screen readers and other assistive technology, make sure to include text description via the alt attribute. To indicate an image as decoration, leave the alt attribute blank, do not remove it. For example: alt="". It is best practice to always define the width and height attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts. If responsiveness is not needed, please use a plain <img> element instead. Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with { attributes: { alt: 'Alt text.', src: 'path/image.jpg', width: 400, height: 225, }, } only %}
HTML
<img alt="Alt text." src="path/image.jpg" width=400 height=225 class="e-bolt-image">

image srcset and sizes

Responsive Resolutions Use the srcset and sizes attributes to render various resolutions of the same image at specific breakpoints. Important Notes: The srcset attribute accepts one or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of a URL to an image and a width descriptor. For example, srcset="image/400x300.jpg 400w, image/800x600.jpg 800w, image/1600x1200.jpg 1600w". The sizes attribute should contain a number value with the vw unit. The number should be determined by the largest size which the image could take up relative to screen size. For example, a large image taking up full width of a page should use something around 96vw to 100vw; a small image taking up 1 column of a 3-column layout should use 33vw. For more advanced use cases, reference the MDN article on responsive images. Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with { attributes: { alt: 'Alt text.', src: 'path/image-800.jpg', srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w', sizes: '50vw', width: 800, height: 450, }, } only %}
HTML
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="50vw" width=800 height=450 class="e-bolt-image">

image fill

Fill Image The fill prop will stretch the image to fill up 100% width of its parent container, ignoring the image’s true width and height. Important Notes: Even though they are ignored, it is best practice to always define the width and height attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts. Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with { fill: true, attributes: { alt: 'Alt text.', src: 'path/image-800.jpg', srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w', sizes: '96vw', width: 800, height: 450, }, } only %}
HTML
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="96vw" width=800 height=450 class="e-bolt-image e-bolt-image--fill">

image background

Simple Background Image The background prop will transform the image into a background image. Important Notes: The image must be placed into a container that is not positioned static (e.g. absolute, fixed, relative, or sticky). It must be the first child of said container. All foreground content of said container must be positioned relative. Most background images are decorative, it is reasonable to leave the alt attribute blank for such case. It is recommended to use the srcset and sizes attributes for better performance. Demo
This is a non-static container
Twig
<div style="position:relative;"> // This image will fill up the non-static parent container {% include '@bolt-elements-image/image.twig' with { background: true, attributes: { src: 'path/image-1600.jpg', srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w, path/image-1600.jpg 1600w', sizes: '100vw', width: 1600, height: 900, }, } only %} <div style="position:relative;"> // Content goes here after the image </div> </div>
HTML
<div style="position:relative;"> // This image will fill up the non-static parent container <img src="path/image-1600.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w, path/image-1600.jpg 1600w" sizes="100vw" width=1600 height=900 class="e-bolt-image e-bolt-image--bg" alt=""> <div style="position:relative;"> // Content goes here after the image </div> </div>

image use case background fit and position

Use Case: Advanced Background Image In addition to the background prop, there are 2 CSS custom properties available for use to further customize background image(s). They are commonly used when multiple decorative background images are required. Important Notes: --e-bolt-image-fit Setting this to none will allow the background image to stay exactly at its specified width and height. Setting this to contain will allow the background image to be contained within its parent container. No cropping will happen to the image. By default, this is set to cover. More advanced options are supported, reference the CSS property object-fit. --e-bolt-image-position This custom property accepts pair values: x-axis and y-axis position tokens (e.g. top left, top center, top right, bottom left, bottom center, bottom right, left center, right center, center center). By default, this is set to center center. More advanced options are supported, reference the CSS property object-position. Demo Setting fit to contain
Setting fit to none and position to exact directions
Twig
<div style="position:relative;"> // This background image will not be cropped and it is positioned to center of the non-static parent container. {% include '@bolt-elements-image/image.twig' with { background: true, attributes: { src: 'path/image.jpg', width: 500, height: 500, style: '--e-bolt-image-fit: contain; --e-bolt-image-position: center center;', }, } only %} // This background image will not stretch and it is positioned to top left of the non-static parent container. {% include '@bolt-elements-image/image.twig' with { background: true, attributes: { src: 'path/image.jpg', width: 150, height: 150, style: '--e-bolt-image-fit: none; --e-bolt-image-position: top left;', }, } only %} </div>
HTML
<div style="position:relative;"> // This background image will not be cropped and it is positioned to center of the non-static parent container. <img src="path/image.jpg" width=500 height=500 style="--e-bolt-image-fit: contain; --e-bolt-image-position: center center;" class="e-bolt-image e-bolt-image--bg" alt=""> // This background image will not stretch and it is positioned to top left of the non-static parent container. <img src="path/image.jpg" width=150 height=150 style="--e-bolt-image-fit: none; --e-bolt-image-position: top left;" class="e-bolt-image e-bolt-image--bg" alt=""> </div>

image use case art direction

Use Case: Art Direction The <picture> HTML element can help with art directing a particular graphical area of a page. Important Notes: When to use just the image element: loading different resolutions of the same image based on screen size. When to use the <picture> HTML element: loading completely different images altogether based on screen size. The srcset attribute should be used. The x descriptor should be used after the image file URL. This helps with loading higher resolution images for monitors with higher DPI. The media attribute should be used to indicate multiple breakpoints. For more advanced use cases, reference the MDN article on responsive images. Demo
Alt text.

Completely different images are loaded via the <picture> HTML element, resize this page to see the image on the left change.
Twig
<picture> // Set the image sources <source srcset="path/image-2x.jpg 2x, path/image.jpg" media="(min-width: 1000px)"> <source srcset="path/image-b-1200.jpg 2x, path/image-b-600.jpg" media="(min-width: 600px)"> <source srcset="path/image-a-600.jpg 2x, path/image-a-300.jpg" media="(min-width: 300px)"> // Set the fallback image {% include '@bolt-elements-image/image.twig' with { attributes: { alt: 'Alt text.', src: 'path/image.jpg', srcset: 'path/image-2x.jpg 2x', width: 1000, height: 500, }, } only %} </picture>
HTML
<picture> // Set the image sources <source srcset="path/image-2x.jpg 2x, path/image.jpg" media="(min-width: 1000px)"> <source srcset="path/image-b-1200.jpg 2x, path/image-b-600.jpg" media="(min-width: 600px)"> <source srcset="path/image-a-600.jpg 2x, path/image-a-300.jpg" media="(min-width: 300px)"> // Set the fallback image <img src="path/image.jpg" srcset="path/image-2x.jpg 2x" width=1000 height=500 class="e-bolt-image" alt="Alt text."> </picture>

printable docs

Printable

An media container that styles children HTML elements for print.

Published Last updated: 4.2.0 Change log Github NPM
Install Install 
  npm install @bolt/elements-printable
Dependencies @bolt/core-v3.x

printable

Basic Printable A Printable element can be used for any content you wish to be visible and styled in print mode. Important Notes: You must add the e-bolt-printable class to the <body> element. It will hide everything on the page in print mode. Then add the the e-bolt-printable__article class to the article container. This class will make the article visible in print mode. Additionally, print specific styles are set for many plain HTML elements. To see an example of this in action, please go to this Academy Topic Details Page (click “Open in new tab” to view it outside of Pattern Lab) and start the print process. Demo

This is an example of an element to be printed

Only the heading and this paragraph will be shown in print mode. Click “Open in new tab” to view it outside of Pattern Lab, then in the browser menu click “Print”.
Twig
Not available in Twig. Please use plain HTML.
HTML
<body class="e-bolt-printable"> <article class="e-bolt-printable__article"> <h2>This is an example of an article to be printed</h2> <p>Only the heading and this paragraph will be shown in print mode.</p> </article> </body>

text link

text link docs

Text Link

Underlined text that indicates interactivity.

Published Last updated: 4.2.0 Change log NPM
Twig Usage 
  {% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a text link',
  attributes: {
    href: 'https://pega.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 —
  • —
content *

Content of the text link.

 any —
  • —
icon_before

Append an icon before the text. Icon component is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_after

Append an icon after the text. Icon component is recommended. However, <img> elements are also acceptable.

 any —
  • —
reversed_underline

Set the underline style to appear on hover instead of being always visible.

 boolean false
  • —
expand_click_target

Expand the click target to cover up the entire area of its closest container that is not positioned static.

 boolean false
  • —
Install Install 
  npm install @bolt/elements-text-link
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

text link

Basic Text Link A text link is generally an inline interactive element that is styled as underlined text. Its main purpose is to help the user navigate (sometimes perform a function). Both <a class="e-bolt-text-link"> and <a> are acceptable at rendering a text link, though the Twig template is the recommended usage for Drupal. Important Notes: There are advanced features with the text link element, class="e-bolt-text-link" is required to get those features. Reference respective doc page for each feature. Only text should be passed to the content prop. <span>, <em>, and <strong> tags are allowed. Text Link element is a replacement for the Link component. Demo
Light Click me to go to pega.com
Dark Click me to go to pega.com
Twig
{% include '@bolt-elements-text-link/text-link.twig' with { content: 'Click me to go to pega.com', attributes: { href: 'https://pega.com', target: '_blank', } } only %}
HTML
<a href="https://pega.com" target="_blank" class="e-bolt-text-link">Click me to go to pega.com</a>

text link button

Text Link as a <button> Element When appropriate, a <button> element can use the text link style. For example, the text link performs a function such as opening a modal or popover. Important Notes: If a text link serves no navigational purpose, the proper type attribute must be set: button, submit, or reset. Demo
Twig
{% include '@bolt-elements-text-link/text-link.twig' with { content: 'This looks like a text link but semantically is a reset button', attributes: { type: 'reset', } } only %}
HTML
<button type="reset" class="e-bolt-text-link">This looks like a text link but semantically is a reset button</button>

text link attributes

HTML Attributes for Text Link Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed. Important Notes: <a> requires the href attribute. <button> requires the type attribute. Demo This text link has the "href", "target", and "id" attributes
Twig
{% include '@bolt-elements-text-link/text-link.twig' with { content: 'This text link has the "href", "target", and "id" attributes', attributes: { href: 'https://pega.com', target: '_blank', id: 'js-bolt-some-unique-id' } } only %}
HTML
<a href="https://pega.com" target="_blank" id="js-bolt-some-unique-id" class="e-bolt-text-link">This text link has the "href", "target", and "id" attributes</a>

text link with icon

Text Link with Icon Icons can be used in tandem with a text link. An icon can be placed before and/or after the text. The icon component is recommended for appending icons. However, an <img> element is also acceptable. Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size and background props for the icon component are not well supported in this scenario. When writing in plain HTML, all white space must be eliminated to have the text underline and icon display correctly. The markup must be written all in one line and spaces between HTML elements must be removed. When writing in plain HTML, <span class="e-bolt-text-link__icon-before"> and <span class="e-bolt-text-link__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own. Demo

This is a text link with icons before and after

This is a text link with an icon before

This is a text link with an icon after
Twig
{% set icon_custom %} <img src="/images/placeholders/500x500.jpg"> {% endset %} {% set icon_chevron_down %} {% include '@bolt-components-icon/icon.twig' with { name: 'chevron-down', } only %} {% endset %} {% include '@bolt-elements-text-link/text-link.twig' with { content: 'This is a text link with icons before and after', icon_before: icon_custom, icon_after: icon_chevron_down, attributes: { href: 'https://pega.com', } } only %}
HTML
<a href="https://pega.com" class="e-bolt-text-link"><span class="e-bolt-text-link__icon-before"><img src="/images/placeholders/500x500.jpg"></span>This is a text link with icons before and after<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-down"></bolt-icon></span></a>

text link reversed underline

Reversed Underline Text Link Text link has a style variant called reversed underline. This is commonly used in headlines with icons because an icon may already indicate interactivity, reducing the need for the underline. The underline will appear on hover instead of being visible always. Important Notes: It is recommended to use this style variant while having either an icon before or after. Demo This is a reversed underline headline text link This is a reversed underline body text link
Twig
{% include '@bolt-elements-text-link/text-link.twig' with { content: 'This is a reversed underline text link', icon_after: icon_chevron_right, reversed_underline: true, attributes: { href: 'https://pega.com', } } only %}
HTML
<a href="https://pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">This is a reversed underline text link</a>

text link expand click target

Expand Click Target The text link will increase its click target to cover a particular block of content. Important Notes: When creating a block text link (such as trying to make an entire card clickable while retaining the headline as the link) with the expand_click_target prop, the text link must be placed into a container that is not positioned static (e.g. absolute, fixed, relative, or sticky), and the text must explain clearly the block of content that it’s trying to cover. Only 1 block text link should be used within a particular block of content. Demo
A mountain This is a block text link, its click target will cover the entire area of its closest container that is not positioned static Hover over this box, the whole thing is clickable.
Twig
// Wrap this text link with a container that is not positioned static. {% include '@bolt-elements-text-link/text-link.twig' with { content: 'This is a block text link, its click target will cover the entire area of its closest container that is not positioned static.', expand_click_target: true, attributes: { href: 'https://pega.com', } } only %}
HTML
// Wrap this text link with a container that is not positioned static. <a href="https://pega.com" class="e-bolt-text-link e-bolt-text-link--expand-click-target">This is a block text link, its click target will cover the entire area of its closest container that is not positioned static.</a>

holy grail docs

Holy Grail

A page layout with a sidebar on the left and another on the right.

Published Last updated: 4.2.1 Change log Github NPM
Twig Usage 
  // Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Holy Grail
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

The main content area of the layout.

 any —
  • —
sidebar

The primary sidebar of the layout. Sidebar twig template is expected to be passed here.

 object —
  • —
secondary_sidebar

The secondary sidebar of the layout. Secondary sidebar twig template is expected to be passed here.

 object —
  • —
Holy Grail Sidebar
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the primary sidebar.

 any —
  • —
trigger_icon

Set the icon of the trigger button that is shown in smaller viewports.

 string —
  • —
trigger_label

Set the text of the trigger button that is shown in smaller viewports.

 string —
  • —
Holy Grail Secondary Sidebar
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the secondary sidebar.

 any —
  • —
Install Install 
  npm install @bolt/layouts-holy-grail
Dependencies @bolt/components-icon @bolt/core-v3.x

holy grail

Basic Holy Grail Layout The Holy Grail layout renders a sidebar on the left and another on the right. It is a top level page layout. Important Notes: The sidebars are sticky at and above the medium breakpoint. The primary sidebar transforms into a modal below the medium breakpoint. User can tap a trigger button to activate the modal. trigger_icon and trigger_label props are available for customizing the icon and label text in the trigger button. The secondary sidebar disappears entirely below the medium breakpoint. This sidebar is intended for non-essential information. Holy Grail layout should be used in tandem with Site layout. It would go into the main content area. Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demo Read more about holy grail layout on Wikipedia. Demo
Primary sidebar
Secondary sidebar
This is a holy grail layout.
Twig
// Set up sidebar templates {% set sidebar %} {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with { content: 'Primary sidebar', } only %} {% endset %} {% set secondary_sidebar %} {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with { content: 'Secondary sidebar', } only %} {% endset %} // Pass sidebars to main template {% include '@bolt-layouts-holy-grail/holy-grail.twig' with { content: 'This is a holy grail layout.', sidebar: sidebar, secondary_sidebar: secondary_sidebar, } only %}
HTML
Not available in plain HTML. Please use Twig.

holy grail use case navigation

Use Case: Navigation The Holy Grail layout is commonly used for documentation design where a page would display a book nav and a page level table of contents. Important Notes: The primary sidebar works best with the Side Nav component. The secondary sidebar works best with the Table of Contents component. Demo

Section One

This is a holy grail layout.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Section Two

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.
Twig
// Set up sidebar templates {% set sidebar %} {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with { content: side_nav, trigger_icon: 'documentation', trigger_label: 'Book Navigation', attributes: { class: 't-bolt-gray-xlight', }, } only %} {% endset %} {% set secondary_sidebar %} {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with { content: table_of_contents, } only %} {% endset %} // Pass sidebars to main template {% include '@bolt-layouts-holy-grail/holy-grail.twig' with { content: content, sidebar: sidebar, secondary_sidebar: secondary_sidebar, } only %}
HTML
Not available in plain HTML. Please use Twig.

layout docs

 This layout is in a testing phase, do not use any code examples from the docs for production sites.

site docs

Site

The classic pancake stack site layout that enables the footer to be always positioned on the bottom.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-layouts-site/site.twig' with {
  header: 'This is the header.',
  main: {
    content: 'This is the main content.',
    attributes: {
      'data-foo': 'bar',
    }
  },
  footer: 'This is the footer.',
} 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 parent element.

 object —
  • —
header

The header of the site.

 any —
  • —
main

The main area of the site. This creates the <main> element.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the <main> element.

      • —
    • content

      The main content of the site.

      • —
footer

The footer of the site.

 any —
  • —
Install Install 
  npm install @bolt/layouts-site
Dependencies @bolt/core-v3.x

site

Basic Site Layout Site layout renders the header, main, and footer landmarks of a page. Important Notes: The content is already rendered inside a <main> element, do not pass another <main> element to the prop. The header and footer are freeform, the props are expecting <header> and <footer> elements repectively. The site layout must only contain <header>, <main>, and <footer> as immediate children. No additional elements can be a child. This is the replacement for the .c-bolt-site class. Demo
This is the header.
This is the main content. The site layout is at least 100% of viewport height and the footer is always positioned on the bottom.
This is the footer.
Twig
{% include '@bolt-layouts-site/site.twig' with { header: '<header>This is the header.</header>', main: { content: 'This is the main content.', attributes: { id: 'main-content', } }, footer: '<footer>This is the footer.</footer>', } only %}
HTML
<div class="l-bolt-site"> <header> // This is the header </header> <main id="main-content"> // This is the main content </main> <footer> // This is the footer </footer> </div>

accordion docs

Accordion

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

Published Last updated: 4.2.0 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.
Accordion
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 —
  • See below
single

Allow only one section to open at a time.

 boolean false
  • —
no_separator

Hides the separator in between items.

 boolean false
  • —
box_shadow

Creates a box shadow around the accordion.

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

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

 string —
  • —
scroll_offset

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

 integer —
  • —
Accordion: items
Prop Name Description Type Default Value Option(s)
trigger

Trigger content of an item.

 string , object , array Toggle Accordion
  • —
content

Expandable content of an item.

 string , object , array —
  • —
open

Automatically expand an item on page load.

 boolean false
  • —
inactive

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

 boolean false
  • —
id

Unique identifier for each item, may be used for deep linking.

 string —
  • —
open_label

Accessible label for the open trigger to expand an item.

 string Open Accordion
  • —
close_label

Accessible label for the close trigger to collapse an item.

 string Close Accordion
  • —
uuid
(deprecated)

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

 string —
  • —
Install Install 
  npm install @bolt/components-accordion
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue @ungap/url-search-params handorgel wc-context

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
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 Share via LinkedIn Copying...
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

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

Deep link to an accordion item by adding a query string to the URL with "selected-accordion-item" as the name and the item ID as the value. For example: ?selected-accordion-item=item-3.
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 deep linking with scroll offset

Placeholder "fixed" element, should not overlap active accordion item when page first loads.
Deep linking will auto-scroll to your selected accordion item. If there is a "fixed" element on the page, it may overlap your tabs. To fix this, use scroll_offset_selector to select the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scroll_offset for any additional adjstments. See a demo: ?selected-accordion-item=item-3.
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 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: 4.2.0 Change log Github NPM
Twig Usage 
  {% set icon %}
  {% include "@bolt-components-icon/icon.twig" with {
    name: "icon-name",
    background: "circle",
    size: "large"
  }%}
{% endset %}

{% include "@bolt-components-action-blocks/action-blocks.twig" with {
  items: [
    {
      text: "Item 1",
      url: "#!",
      media: icon,
    },
    {
      text: "Item 2",
      url: "#!",
      media: icon,
    },
    {
      text: "Item 3",
      url: "#!",
      media: icon,
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Action blocks
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
  • —
content

Free form content to populate the action blocks

 string , array , object —
  • —
children
(deprecated)

Use content prop instead.

 — —
  • —
items

Content items to populate the action blocks.

 array —
  • See below
maxItemsPerRow
(deprecated)

Use max_items_per_row prop instead.

 — —
  • —
align
(deprecated)

Use valign prop instead.

 — —
  • —
border
(deprecated)

Use borderless prop instead.

 — —
  • —
Action blocks: items
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
text
string —
  • —
url
string —
  • —
media

Renderable media content (i.e. a string, render array, or included pattern) for this item, usually an icon or an image

 string , object , array —
  • —
icon
(deprecated)

Use media prop instead and pass a fully rendered icon

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

action blocks freeform content

background docs

Background

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

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focal_point: {
    vertical: "center",
    horizontal: "center"
  },
  content_items: [
    {
      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
  • none, light, medium, heavy, full
shape_group

Add a Bolt Background Shapes group.

 string none
  • A, B, none
shape_alignment

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
fill_color

Color of the fill to use in the overlay.

 string default
  • default, pink, navy, black
focal_point

Where the opacity background should originate.

 object —
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
content_items

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

 array —
  • [items]:
    • Type:any
overlay
(deprecated)

Use opacity instead

 — —
  • —
shapeGroup
(deprecated)

Use shape_group instead.

 — —
  • —
shapeAlignment
(deprecated)

Use shape_alignment instead.

 — —
  • —
fillColor
(deprecated)

Use fill_color instead.

 — —
  • —
focalPoint
(deprecated)

Use focal_point instead.

 — —
  • —
contentItems
(deprecated)

Use content_items instead.

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

background

background opacity variations

Opacity: None

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.

Opacity: Light

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.

Opacity: Medium

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.

Opacity: Heavy

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.

Opacity: Full

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

Note: valign is an Image component prop, not a Background component prop. Set valign on images passed in via content_items 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: 4.2.0 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: 4.2.0 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 center
  • 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
  • —
theme

Controls the theme of the band.

 string 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 Share via LinkedIn Copying...
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 Share via LinkedIn Copying...
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 description Image description

Collection 1

 This is a button
Image description Image description

Collection 2

 This is a button
Image description Image description

Collection 3

 This is a button

banner docs

Banner

A content container that delivers important messages to the user.

Published Last updated: 4.2.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
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 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>. <a href="https://pega.com" class="e-bolt-text-link">View Details</a> </bolt-banner>

blockquote docs

Blockquote

Pullquote layout with author info.

Published Last updated: 4.2.0 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 full bleed variation

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

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

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: 4.2.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-breadcrumb/breadcrumb.twig" with {
  contentItems: [
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Home',
      attributes: {
        href: '#!'
      }
    }),
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Landing Page',
      attributes: {
        href: '#!'
      }
    }),
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Sub Page',
      attributes: {
        href: '#!'
      }
    }),
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Current Page',
      attributes: {
        href: '#!'
        '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.

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.

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.

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.

deprecated button docs

Warning! The Button component is deprecated. No new features will be added to this component. See each page under Components/Button section in the navigation to reference old documentation. For any new instances of a button please use the Button element.

deprecated button group docs

Warning! The Button Group component is deprecated. No new features will be added to this component. See each page under Button Group (Deprecated) section in the navigation to reference old documentation. For any new instances, please use the List element.

card replacement docs

Card Replacement

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

Published Last updated: 4.2.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.
Card
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
border_radius

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.

      • —
    • attributes

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

      • —
actions

Actions section of the card-replacement, accepts buttons.

 array —
  • See below
content

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

 string , array , object —
  • —
Card: items
Prop Name Description Type Default Value Option(s)
text

Action link text.

 string —
  • —
url

Action link url.

 string —
  • —
external

Indicate if this is an external link. If true, the link will open in a new tab.

 boolean —
  • —
icon

Allows user to specify the icon showed on the action button. If no icon is provided in this prop, the default behavior will take place and the icon shown will depend on if the URL is internal or external. Alternatively, providing "none" as the value can show no icon.

 string —
  • —
attributes

A Drupal-style attributes object with extra attributes to append to this component. Attributes are added to the bolt-button element inside the action item.

 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-list @bolt/components-teaser @bolt/components-video @bolt/core-v3.x @bolt/elements-button @bolt/global @bolt/lazy-queue wc-context

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

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

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

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

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

This is an eyebrow

This card's `action` has the `download` icon

This is a paragraph.

 This is a button with a different icon
Image alt. Image alt.

This is an eyebrow

This card's `action` has no icon

This is a paragraph.

 This is a button with no icon

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

With a video as the media

This card has a video as the media and the card action can also play/pause the video.
Go to pega.com

With a video as the media and an overall link

This card has a link, which makes the whole card clickable. The link navigates to another page. The video in this card can still play/pause inline. The link does not cover it.

Card - Freeform Content

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

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 Text Group Content

Eyebrow

This is text group 1

Eyebrow

This is text group 2

Eyebrow

This is text group 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 Download Icon No Icon
<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-action url="https://yahoo.com" icon="download">Download Icon</bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" icon="none">No Icon</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 Download Icon No Icon
<bolt-card-replacement url="http://google.com"> <bolt-card-replacement-media> <bolt-ratio ratio="16/9"> <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="3974147489001" controls class="c-base-video"></video-js> </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 <a target="_blank" href="https://boltdesignsystem.com/docs" class="e-bolt-text-link">text links</a> 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-action url="https://yahoo.com" icon="download">Download Icon</bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" icon="none">No Icon</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: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a chip',
  url: 'https://pega.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 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
border_radius

Controls the border radius of the chip.

 string full
  • full, small, none
color

Controls the color of the chip.

 string gray
  • error, warning, success, navy, teal, orange, yellow, wine, pink, berry, violet, gray
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

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

Basic Chip A chip is commonly used to display meta data. Demo This is a chip
Twig
{% include '@bolt-components-chip/chip.twig' with { text: 'This is a chip', } only %}
HTML
<bolt-chip>This is a chip</bolt-chip>

chip url variations

Linked Chip A chip can be linked and its target can be modified. Demo This is a linked chip
Twig
{% include '@bolt-components-chip/chip.twig' with { text: 'This is a linked chip', url: 'https://pega.com', target: '_blank', } only %}
HTML
<bolt-chip url="https://pega.com" target="_blank">This is a linked chip</bolt-chip>

chip size variations

Chip Size Chips come with a few sizing options. Demo xsmall small medium
Twig
{% include '@bolt-components-chip/chip.twig' with { text: 'This is a medium chip', size: 'medium', } only %}
HTML
<bolt-chip size="medium">This is a medium chip</bolt-chip>

chip border radius variations

Chip Border Radius Other than the fully rounded chips, there are other options for adjusting the border radius. Demo full small none
Twig
{% include '@bolt-components-chip/chip.twig' with { text: 'This chip has small border radius', border_radius: 'small', } only %}
HTML
<bolt-chip border-radius="small">This chip has small border radius</bolt-chip>

chip icon variations

Chip Icons Icons can be used within a chip. Important Notes: When using icon-only chips, make sure to still pass text. The text will act as a label for the icon. Demo Icon before Icon after Show more
Twig
// Regular chip with icon {% include '@bolt-components-chip/chip.twig' with { text: 'Chip with icon', icon: { name: 'lock', position: 'after', }, } only %} // Icon-only chip {% include '@bolt-components-chip/chip.twig' with { text: 'Chip with icon', icon: { name: 'lock', }, iconOnly: true, } only %}
HTML
// Regular chip with icon <bolt-chip><bolt-icon name="lock" slot="before"></bolt-icon>Chip with icon</bolt-chip> // Icon-only chip <bolt-chip icon-only><bolt-icon name="lock" slot="before"></bolt-icon>Chip with icon</bolt-chip>

chip color variations

Colored Chips When appropriate, use the color prop to apply status or brand colors to a chip. Important Notes: When using status chips, it is recommended to append an appropriate icon in front of the text. When using branded chips, always make sure a chip has good contrast with the page background. For example, do not use navy colored chip on a navy background. Demo Status Colors Error Warning Success Selective Brand Colors navy teal orange yellow wine pink berry violet gray
Twig
{% include '@bolt-components-chip/chip.twig' with { text: 'Colored chip', color: 'teal', } only %}
HTML
<bolt-chip color="teal">Colored chip</bolt-chip>

chip list docs

Chip List

An inline list of chips.

Published Last updated: 4.2.0 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: 4.2.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 { props } from '@bolt/core-v3.x/utils';

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"><h1>Headline</h1></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>

content pagination

content pagination docs

Content Pagination

A UI element that helps the user navigate to previous, next, and parent page.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-content-pagination/content-pagination.twig' with {
  parent: {
    content: 'System Administrations',
    tooltip_content: 'Parent topic',
    link_attributes: {
      href: 'https://pega.com',
    },
  },
  previous: {
    content: 'Configuring system settings',
    tooltip_content: 'Previous topic',
    link_attributes: {
      href: 'https://pega.com',
    },
  },
  next: {
    content: 'Configuring user avatar',
    tooltip_content: 'Next topic',
    link_attributes: {
      href: 'https://pega.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 attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
parent

Set the parent page link.

 object —
    • content

      Text content of the link.

      • —
    • tooltip_content

      Text content of the tooltip.

      • —
    • link_attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

      • —
previous

Set the previous page link.

 object —
    • content

      Text content of the link.

      • —
    • tooltip_content

      Text content of the tooltip.

      • —
    • link_attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

      • —
next

Set the next page link.

 object —
    • content

      Text content of the link.

      • —
    • tooltip_content

      Text content of the tooltip.

      • —
    • link_attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

      • —
Install Install 
  npm install @bolt/components-content-pagination
Dependencies @bolt/components-icon @bolt/components-tooltip @bolt/core-v3.x @bolt/elements-text-link

content pagination

Basic Content Pagination Content Pagination is commonly used in documentation design. It appears at the bottom of an article to help the user navigate to previous, next, or parent topic. Demo
Twig
{% include '@bolt-components-content-pagination/content-pagination.twig' with { parent: { content: 'System Administrations', tooltip_content: 'Parent topic', link_attributes: { href: 'https://pega.com', }, }, previous: { content: 'Configuring system settings', tooltip_content: 'Previous topic', link_attributes: { href: 'https://pega.com', }, }, next: { content: 'Configuring user avatar', tooltip_content: 'Next topic', link_attributes: { href: 'https://pega.com', }, }, } only %}
HTML
Not available in plain HTML. Please use Twig.

copy to clipboard docs

Copy To Clipboard

A function to copy a string to the clipboard.

Published Last updated: 4.2.0 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 —
  • —
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 —
  • —
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 —
  • —
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: 4.2.0 Change log Github NPM
Twig Usage 
  {% set content %}
  {% include "@bolt-elements-image/image.twig" with {
    attributes: {
      src: "/images/sample/product-device-screenshot--phone.jpg",
      loading: "lazy",
    }
  } 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
content

Renderable content (i.e. a string, render array, or included pattern) to display within the device. Usually represents an image or video.

 any —
  • —
image
(deprecated)

Pass a rendered image as content instead.

 — —
  • —
magnify
(deprecated)

This feature is no longer supported. The recommended UI replacement is to pass an image that is a modal trigger instead.

 — —
  • —
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: 4.2.0 Change log Github NPM
Twig Usage 
  {% embed "@bolt-components-dropdown/dropdown.twig" with {
  title: "Toggle Menu",
  collapse: true
} %}
  {% block content %}
    {% include "@bolt-components-list/list.twig" with {
      inset: true,
      spacing: "small",
      items: [
        include('@bolt-elements-text-link/text-link.twig', {
          content: "Link 1",
          attributes: {
            href: '#!'
          }
        }),
        include('@bolt-elements-text-link/text-link.twig', {
          content: "Link 2",
          attributes: {
            href: '#!'
          }
        }),
        include('@bolt-elements-text-link/text-link.twig', {
          content: "Link 3",
          attributes: {
            href: '#!'
          }
        }),
      ]
    } only %}
  {% endblock %}
{% endembed %}
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

Link 1 Link 2 Link 3

dropdown center

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

dropdown collapse

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

dropdown collapse center

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

dropdown theme variations

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

dropdown long header

Open Dropdown Close Dropdown

Link 1 Link 2 Link 3

dropdown web component

Web Component Usage Bolt Dropdown is a web component, you can simply use <bolt-dropdown> in the markup to make it render.
Link 1 Link 2 Link 3
<bolt-dropdown title="This is a dropdown"> <bolt-list spacing="small" inset> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 1</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 2</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 3</a> </bolt-list-item> </bolt-list> </bolt-dropdown>
Prop Usage Configure the dropdown with the properties specified in the schema.
Link 1 Link 2 Link 3
<bolt-dropdown title="This is a dropdown" center collapse> <bolt-list spacing="small" inset> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 1</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 2</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 3</a> </bolt-list-item> </bolt-list> </bolt-dropdown>

figure docs

Figure

A media container for a complimentary graphic within an article.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% set image %}
  {% include "@bolt-elements-image/image.twig" with {
    attributes: {
      src: "/images/placeholders/500x500.jpg",
      loading: "lazy",
    }
  } 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
(deprecated)

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: 4.2.0 Change log Github NPM
Twig Usage 
  {% set form_children %}
  {% set label %}
    {% include "@bolt-components-form/form-label.twig" with {
      title: "This is the label",
      displayType: "block"
    } only %}
  {% endset %}
  {% set input %}
    {% include "@bolt-components-form/form-input.twig" with {
      attributes: {
        placeholder: "This is the placeholder text.",
        required: true,
        type: "text",
      },
    } only %}
  {% endset %}
  {% include "@bolt-components-form/form-element.twig" with {
    labelDisplay: "before",
    label: label,
    children: input
  } only %}
  {% include "@bolt-components-form/form-button.twig" with {
    text: "Submit",
    attributes: {
      type: "submit",
    }
  } only %}
{% endset %}
{% include "@bolt-components-form/form.twig" with {
  children: form_children
} 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)
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 label positions

labelDisplayType: "floating"

labelDisplayType: "block", labelDisplay: "before"

form element demo radio

form element demo radio fieldset

Select an alignment

form element auto format

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

Grid

A flexible 12-column grid with responsive breakpoint options.

Published Last updated: 4.2.0 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: 4.2.0 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

Set the semantic HTML tag for the headline.

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

Set the text alignment of the headline.

 string —
  • left, center, right
weight

Set the weight of the headline.

 string regular
  • light, bold, regular, semibold
style

Set the style fo the headline.

 string normal
  • normal or italic
size

Set the size of the headline.

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

Text transformation.

 string —
  • uppercase, lowercase, capitalize
url

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

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

Hero

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

Published Last updated: 4.2.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 —
  • —
custom_background

Renderable background image for this item, should use the Image or Shape component.

 string , object , array —
  • —
image

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

 string —
  • —
image_srcset

A valid image srcset value with different cuts of the image for different breakpoints

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

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
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?

< type="button" href="../../patterns/40-components-band/index.html" class="e-bolt-button e-bolt-button--secondary" >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

Background Image Vertical Alignment

This demo passes an image into the custom_background prop. This allows you to customize any of the available Image component props, such as align or valign.

Note: If using the custom_background prop, you must set cover to true for the custom image to display properly in the background. For more information, check out the Image component.

This demo sets the image's valign prop to top.
A mountainous landscape
This Is the Eyebrow This Is the XXXLarge Headline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

This demo sets the image's valign prop to bottom.
A mountainous landscape
This Is the Eyebrow This Is the XXXLarge Headline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

icon docs

Icon

Pega branded icon system.

Published Last updated: 4.2.0 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

Controls the size of the icon. Each size is set to a specific pixel value: 16px, 24px, 32px, and 38px. However, this prop is optional. When no size is specified, the icon is expected to act as an inline icon, which will grow or shrink depending on the font-size of its parent container.

 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, navy, yellow, orange, gray, pink, berry, wine, violet
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

Icons inside a xdark theme

Icons inside a dark theme

Icons inside a light theme

Icons inside a xlight theme

icon color variation

auto

teal

navy

yellow

orange

gray

pink

berry

wine

violet

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

  • bell-solid

  • 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

  • dollar-open

  • 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

  • flag-solid

  • full-screen

  • github

  • global

  • government

  • grid

  • healthcare

  • heart

  • heart-open

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • lock-solid

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pega-cart

  • pega-catalyst

  • pega-chat

  • pega-chat-question

  • pega-chat-typing

  • pega-compass

  • pega-connection-hierarchy

  • pega-database

  • pega-disability

  • pega-healthcare

  • pega-map

  • pega-network

  • pega-phone-call

  • pega-pie-chart

  • pega-pin

  • pega-plane

  • pega-process-fabric

  • pega-send-submit

  • pega-setting

  • pega-shuffle

  • pega-thumbs-up

  • pega-timer

  • pega-wifi

  • 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

  • bell-solid

  • 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

  • dollar-open

  • 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

  • flag-solid

  • full-screen

  • github

  • global

  • government

  • grid

  • healthcare

  • heart

  • heart-open

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • lock-solid

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pega-cart

  • pega-catalyst

  • pega-chat

  • pega-chat-question

  • pega-chat-typing

  • pega-compass

  • pega-connection-hierarchy

  • pega-database

  • pega-disability

  • pega-healthcare

  • pega-map

  • pega-network

  • pega-phone-call

  • pega-pie-chart

  • pega-pin

  • pega-plane

  • pega-process-fabric

  • pega-send-submit

  • pega-setting

  • pega-shuffle

  • pega-thumbs-up

  • pega-timer

  • pega-wifi

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

Pega Brand Icons A set of icons designed and created by Pega branding. Important Notes: Auto/undefined: 1em (same size as inline text) Small: 16px Medium: 24px Large: 32px Xlarge: 38px Demo

pega-cart

pega-catalyst

pega-chat

pega-chat-question

pega-chat-typing

pega-compass

pega-connection-hierarchy

pega-database

pega-disability

pega-healthcare

pega-map

pega-network

pega-phone-call

pega-pie-chart

pega-pin

pega-plane

pega-process-fabric

pega-send-submit

pega-setting

pega-shuffle

pega-thumbs-up

pega-timer

pega-wifi
Twig
{% include '@bolt-components-icon/icon.twig' with { name: 'pega-ai-brain', } only %}
HTML
<bolt-icon name="pega-ai-brain"></bolt-icon>

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: 4.2.0 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
  • —
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
  • —
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
  • —
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 —
  • —
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
  • —
cover

Set an image to fill its container.

 boolean false
  • —
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.

 —
  • —
imageAttributes
(deprecated)

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

 object —
  • —
Advanced Schema Options
zoom
(deprecated)

Support will be dropped along with device viewer magnify

 boolean false
  • —
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: 4.2.0 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
  • —
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
  • —
Install Install 
  npm install @bolt/components-list
Dependencies @bolt/core-v3.x @bolt/lazy-queue wc-context

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> <a href="https://pega.com" class="e-bolt-text-link"> Item 1 </a> </bolt-list-item> <bolt-list-item> <bolt-chip url="https://pega.com"> Item 2 </bolt-chip> </bolt-list-item> <bolt-list-item> <a href="https://pega.com" class="e-bolt-button"> Item 3 </a> </bolt-list-item> </bolt-list>

listing teaser docs

Listing Teaser

An interactive UI element that summarizes a particular listing.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% set icon %}
  {% include '@bolt-components-icon/icon.twig' with {
    name: 'questions',
    size: 'xlarge',
    color: 'teal',
  } only %}
{% endset %}
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  signifier: icon,
  headline: {
    text: 'This is a listing',
    tag: 'h3',
    size: 'xlarge',
    link_attributes: {
      href: 'https://pega.com'
    },
  },
  meta_items: [
    'Completed August 1, 2019',
    'Last updated July 12, 2019',
  ],
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Listing Teaser
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
layout

Set the layout of the listing teaser based on the use case.

 string horizontal
  • vertical, horizontal, responsive
gutter

Set the spacing in between the signifier and the rest of the content.

 string small
  • small, medium, large
signifier

Set a visual signifier for the listing. An icon or decorative image usually goes here.

 any —
  • —
headline

Render the headline of the listing.

 object —
    • text

      Renderable text content of the headline.

      • —
    • tag

      Set the semantic HTML tag for the headline.

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

      Set the size of the headline.

      • xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
    • link_attributes

      A Drupal-style attributes object with extra attributes to append to the headline link.

      • —
subheadline

Render the subheadline of the listing. This appears below the headline.

 any —
  • —
eyebrow_items

Render an array of eyebrow text for the listing. This appears above the headline

 array —
  • —
meta_items

Render an array of meta data for the listing.

 array —
  • —
status

Set the status of the listing.

 object —
    • solved

      Mark the listing as solved.

      • —
    • solved_label

      Set a custom label for the "solved indicator".

      • —
    • locked

      Mark the listing as locked.

      • —
    • locked_label

      Set a custom label for the "locked indicator".

      • —
    • replies

      Use number_items prop instead.

      • —
    • replies_label

      Use number_items prop instead.

      • —
    • views

      Use number_items prop instead.

      • —
    • views_label

      Use number_items prop instead.

      • —
    • number_items

      Render custom number indicators. This will override reply count and view count.

      • —
action_menu

Render a popover action menu for the listing. Passing the Menu component is recommended.

 any —
  • —
share_menu

Render a popover share menu for the listing. Passing the Share component is mandatory.

 any —
  • —
custom_menu

Render a custom popover menu. This is completely freeform, unlike the pre-defined props like action_menu and share_menu. Assemble the popover and the menu components, and pass them to this prop.

 any —
  • —
description

Render a short description for the listing. Listing summary usually goes here. Do not pass links here unless absolutely necessary.

 any —
  • —
warning

Render warning text for the listing, which appears below the "description" content. Do not pass links here unless absolutely necessary.

 any —
  • —
chip_list

Render a list of related chips for the resource. Passing the Chip List component is mandatory.

 object —
  • —
reply

Render a preview of a reply to the post.

 any —
  • —
callout

Render a callout section to feature important notes.

 object —
    • attributes

      A Drupal-style attributes object with extra attributes to append to the callout container.

      • —
    • content

      Render the content of the callout.

      • —
variant

Set the style variant of the listing teaser.

 string transparent
  • transparent or card
inset_spacing

Set the inset spacing of the listing teaser. This only applies to card variant.

 string medium
  • xsmall, small, medium
Listing teaser status number
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent container.

 object —
  • —
number

Set the number value.

 any —
  • —
label

Set the label text related to the number value.

 any —
  • —
Install Install 
  npm install @bolt/components-listing-teaser
Dependencies @bolt/components-button @bolt/components-headline @bolt/components-icon @bolt/components-menu @bolt/components-popover @bolt/core-v3.x @bolt/elements-text-link

listing teaser

Basic Listing Teaser The Listing Teaser component can be used to display specific information of a particular listing, article, or thread. It is commonly used on listing pages. Important Notes: The whole listing UI is clickable. The headline of the listing is a link element that is expanding its click target. Demo

This is a listing

  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Warning! This is a warning message.
  • Solved
  • Locked
Twig
// Set a signifier variable {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'questions', size: 'large', color: 'teal', } only %} {% endset %} // Use the variable in the signifier prop {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This is a listing', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], status: { solved: true, locked: true, }, description: 'This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', warning: 'Warning! This is a warning message.', } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser signifier

Listing Teaser Signifier The signifier is a decorative element that visually represents the content nature of a listing. Important Notes: This is a purely decorative element and is hidden from screen readers. When using an icon as the signifier, a size must be defined. It is recommended to match the size of the headline. When using an image as the signifier, a width must be defined. It is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline. Demo
Twig
// Set a signifier variable {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'questions', size: 'large', color: 'teal', } only %} {% endset %} // Use the variable in the signifier prop {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This listing has an icon signifier', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser headline

Listing Teaser Headline The headline’s size, HTML tag, and link attributes can be customized via props. Important Notes: While any size can be used, large and xlarge are recommended. Based on the structure of a particular page, the proper HTML tag should be defined via the tag prop. When using the link_attributes prop, an <a> element is wrapped around the headline text. The prop allows you to pass common link attributes such as href and target. A subheadline can be created with the subheadline prop. The prop accepts anything, even plain text. An eyebrow can be created with the eyebrow_items prop. The prop accepts an array, each eyebrow item will be separated with a solid seperator. Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with { eyebrow_items: [ eyebrow_1, eyebrow_2, ], headline: { text: 'This listing has an xlarge headline', tag: 'h3', size: 'xlarge', link_attributes: { href: 'https://pega.com' }, }, subheadline: 'This is a subheadline', meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser status and action

Listing Status, Action Menu, and Share Menu A listing can have various statuses, use the proper prop to mark the relevant status. A popover action menu can be added by using the action_menu prop. Important Notes: The solved and locked status labels can be customized. Use the status.number_items prop to render status numbers. The replies and views props are deprecated. It is recommended to pass the Menu component in the action_menu prop. Additionally use the Menu component’s title prop to create a label for the action menu. It is mandatory to pass the Share component with menu display in the share_menu prop. In addition to the action_menu prop and share_menu prop, a custom menu can be built using the custom_menu prop. When building a custom menu, make sure the menu trigger is not too wide that would squish the listing teaser’s content. Demo
Twig
// Set up variables {% set demo_action_menu %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'Reply', icon_before: icon_reply, }, { content: 'Favorite', icon_before: icon_heart, }, { content: 'Subscribe', icon_before: icon_eye, }, ] } only %} {% endset %} {% set demo_share_menu %} {% include '@bolt-components-share/share.twig' with { display: 'menu', size: 'small', text: 'Share this listing', sources: [ { name: 'facebook', attributes: { href: 'https://www.facebook.com/sharer/sharer.php?u=https://pega.com&src=sdkpreparse' } }, { name: 'twitter', attributes: { href: 'https://twitter.com/intent/tweet?url=https://pega.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!' } }, { name: 'linkedin', attributes: { href: 'https://www.linkedin.com/shareArticle?url=https://pega.com' } }, { name: 'email', attributes: { href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com' } } ], copy_to_clipboard: { text_to_copy: 'https://pega.com' }, } only %} {% endset %} {% set number_items %} {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with { number: '167', label: 'Replies', } only %} {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with { number: '6k', label: 'Views', } only %} {% endset %} // Use the variables in the appropriate props {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'This listing has every status and menu possible', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], status: { solved: true, solved_label: 'Completed', locked: true, locked_label: 'Archived', number_items: number_items, }, action_menu: demo_action_menu, share_menu: demo_share_menu, } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser meta data and more

Listing Meta Data and More A listing can have meta data, a short description, and a warning. Important Notes: Meta data can be passed via the meta_items prop, each item is visually separated by a pipe. Extra content can be passed to the description prop. It will appear below the meta data. Truncating with an ellipsis and a read more button is optional. Warning content can be passed to the warning prop. It will appear below the description. A warning icon is appended at the start. Meta data, description, and warning may contain links, use the link element to render a link. This will generate a link that is not blocked by the headline link. Demo

This listing has meta data and more info

  • Posted by username on May 21, 2020
  • Last activity: 2 minutes ago

This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus… Read more

Warning! This is a warning message.
Twig
// Render description and warning {% set description %} {% set more_link %} {% set icon_chevron_right %} {% include '@bolt-components-icon/icon.twig' with { name: 'chevron-right', } only %} {% endset %} {% include '@bolt-elements-text-link/text-link.twig' with { content: 'Read more', icon_after: icon_chevron_right, attributes: { href: 'https://pega.com', } } only %} {% endset %} <p>This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus…{{ more_link }}</p> {% endset %} {% set warning %} <p>Warning! This is a warning message.</p> {% endset %} // Pass meta data, warning, and description to the component {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'This listing has meta data and more info', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted by <a href="https://collaborate.pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">username</a> on May 21, 2020', 'Last activity: 2 minutes ago', ], description: description, warning: warning, } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser reply

Listing Reply A listing can show one relevant reply at a time. Content can be added by using the reply prop. Demo

RE: This is a post showing one of the replies

  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago

Replied on Aug 21, 2021

This is a reply. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, repellat natus! Nemo, fugiat. Unde deserunt soluta assumenda magnam sit excepturi voluptates repudiandae iure tempore omnis? Dolorem impedit quo iusto sapiente.

Some more text. Excepturi deleniti possimus sed corrupti illo doloribus, nam nemo hic, saepe quam repellendus officiis quaerat pariatur aliquid molestiae illum natus dolore aliquam?

Go to reply
Twig
// Set up the reply content {% set reply %} <p><strong>Replied on Aug 21, 2021</strong></p> <p>This is a reply. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, repellat natus! Nemo, fugiat. Unde deserunt soluta assumenda magnam sit excepturi voluptates repudiandae iure tempore omnis? Dolorem impedit quo iusto sapiente.</p> <p>Some more text. Excepturi deleniti possimus sed corrupti illo doloribus, nam nemo hic, saepe quam repellendus officiis quaerat pariatur aliquid molestiae illum natus dolore aliquam?</p> {% set reply_link %} {% set icon_chevron_right %} {% include '@bolt-components-icon/icon.twig' with { name: 'chevron-right', } only %} {% endset %} {% include '@bolt-elements-text-link/text-link.twig' with { content: 'Go to reply', icon_after: icon_chevron_right, attributes: { href: '/reply-123', } } only %} {% endset %} {% include '@bolt-components-headline/text.twig' with { text: reply_link, tag: 'p', size: 'small', } only %} {% endset %} // Pass the content to the reply prop {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'RE: This is a post showing one of the replies', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], reply: reply, } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser variant

Listing Teaser Card Variant and Spacing By default, a listing teaser is transparent, but the card variant can activate card styles. Additionally, inset spacing can be adjusted for the card variant. Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'This listing is a card variant', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, variant: 'card', inset_spacing: 'small', } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser callout

Listing Teaser Callout A listing teaser can have a callout section. Any content can be rendered as the callout. Demo

This listing has a callout

  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago

This is a callout headline

This is callout text.
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'This listing has a callout', tag: 'h3', size: 'xlarge', link_attributes: { href: 'https://pega.com' }, }, callout: { attributes: { class: 't-bolt-light', }, content: callout_content, }, } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser layout

Listing Teaser Layout and Gutter By default, a listing teaser has a horizontal layout, but it can be changed to vertical or responsive (content will wrap under the signifier at the small breakpoint). Demo

This listing has a responsive layout

  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias libero repellendus, dolorum vitae iste iure quas tempora! Distinctio hic ducimus excepturi adipisci est libero quia! Explicabo mollitia ad voluptatum impedit!

This listing has a vertical layout

  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias libero repellendus, dolorum vitae iste iure quas tempora! Distinctio hic ducimus excepturi adipisci est libero quia! Explicabo mollitia ad voluptatum impedit!
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: signifier, headline: { text: 'This listing has a responsive layout', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, layout: 'responsive', gutter: 'medium', } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser use case academy

Use Case: Academy Training List Training List is a way to display the progression a particular course. Important Notes: A training list is composed of the Listing Teaser component and the List component with solid separators. solved_label is used for customizing the solved status label text. locked_label is used for customizing the locked status label text. Demo
Twig
// Set up a particular training {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'brand-orbit', size: 'large', color: 'teal', } only %} {% endset %} {% set demo_training %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This training is both completed and archived', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Module', 'Completed August 18, 2019', 'Last updated August 11, 2019', ], status: { solved: true, solved_label: 'Completed', locked: true, locked_label: 'Archived', }, warning: 'This training has a warning.' } only %} {% endset %} // Render a list to display trainings {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_training, ] } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser use case collaboration center

Use Case: Collaboration Center Post List Post List is a way to display activities in Pega’s Collaboration Center. Important Notes: A post list is composed of the Listing Teaser component and the List component with solid separators. Demo

This is a post with more information

  • Posted by mikemai on Jun 6, 2020
  • Last activity: 8 hours 15 minutes ago

This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus… Read more

  • 167 Replies
  • 6k Views

This is a post with actions

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hours 26 minutes ago
  • Solved
  • Locked
  • 167 Replies
  • 6k Views
Twig
// Set up a particular post {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'questions', size: 'large', color: 'teal', } only %} {% endset %} {% set demo_action_menu %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'Reply', icon_before: icon_reply, }, { content: 'Favorite', icon_before: icon_heart, }, { content: 'Subscribe', icon_before: icon_eye, }, ] } only %} {% endset %} {% set demo_post %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This is a post with actions (also favorited and subscribed)', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted by <a href="https://collaborate.pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mikemai</a> on Apr 9, 2020', 'Last activity: 8 hours 26 minutes ago', ], description: description, reply: reply, status: { solved: true, locked: true, number_items: number_items, }, action_menu: demo_action_menu, } only %} {% endset %} // Render a list to display posts {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_post, ] } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser use case article list

Use Case: Article List Article List is a way to display teasers for a list of articles. Important Notes: An article list is composed of the Listing Teaser component and the List component with solid separators. Keep in mind the signifier and headline vertically center align with each other. When using image as the signifier, it is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline. Demo
Twig
// Set up a particular article {% set demo_thumbnail %} <img src="/image.jpg" alt="" width=32 height=32> {% endset %} {% set demo_share_menu %} {% include '@bolt-components-share/share.twig' with { display: 'menu', size: 'small', text: 'Share this article', sources: [ { name: 'facebook', attributes: { href: 'https://www.facebook.com/sharer/sharer.php?u=https://pega.com&src=sdkpreparse' } }, { name: 'twitter', attributes: { href: 'https://twitter.com/intent/tweet?url=https://pega.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!' } }, { name: 'linkedin', attributes: { href: 'https://www.linkedin.com/shareArticle?url=https://pega.com' } }, { name: 'email', attributes: { href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com' } } ], copy_to_clipboard: { text_to_copy: 'https://pega.com' }, } only %} {% endset %} {% set demo_article %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_thumbnail, headline: { text: 'This is an article', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Category', 'Duration', 'Posted by Name', ], share_menu: demo_share_menu, } only %} {% endset %} // Render a list to display articles {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_article, ] } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser use case search result list

Use Case: Search Result List Search Result List is a way to display teasers for a list of search results. Demo

This is a product

  • Product

Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…

Looking for deployment guides for your environment?

Select your version to view documentation.

This is a Collaboration Center question

  • Collaboration Center

  • Question

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hr 26 min ago
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2
  • Solved
  • Locked
  • 167 Replies
  • 6k Views

Related videos

View the video resource page

  • Video

  • TechTalk
  • Apr 9, 2020
  • 17:11
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2
View the video resource page

  • Video

  • TechTalk
  • Apr 9, 2020
  • 17:11
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2
View the video resource page

  • Video

  • TechTalk
  • Apr 9, 2020
  • 17:11
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2

This is an Academy challenge

  • Pega Academy

  • Challenge

  • 9 tasks
  • 45 min
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2

This is a Collaboration Center discussion

  • Collaboration Center

  • Discussion

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hr 26 min ago
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2
  • Locked
  • 167 Replies
  • 6k Views

This is a design pattern

  • Design pattern

Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2

This is a Collaboration Center idea

  • Collaboration Center

  • Challenge

  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hr 26 min ago
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2
  • 167 Replies
  • 6k Views

This is an Academy module

  • Pega Academy

  • Module

  • 5 topics
  • 1 hr 20 min
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2

This is a blog post

  • Community blog

  • Author Name
  • August 29, 2021
  • 3 min read
Tri-tip shank tongue fatback kevin. Venison frankfurter cupim picanha meatloaf ham hock beef ribs. Burgdoggen porchetta spare ribs bresaola chuck filet mignon. Spare ribs filet mignon pig pastrami…
Chip 1 Chip 2
Twig
{% set demo_result %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: signifier, layout: 'responsive', // Allow the content to wrap under the signifier when it runs out of space. Used in video listing. eyebrow_items: [ eyebrow_1, eyebrow_2, ], headline: { text: 'This is a listing', tag: 'h3', size: 'xlarge', link_attributes: { href: 'https://pega.com', // Or set type: 'button' for video modals. }, }, meta_items: [ meta_item_1, meta_item_2, meta_item_3, ], description: description, chip_list: chip_list, status: { solved: true, locked: true, number_items: number_items, }, } only %} {% endset %} // Render a list to display results {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_result, ... ], } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser use case contact list

Use Case: Contact List A list of contact card teasers, each displays a quick summary of a particular person. Important Notes: The custom_menu prop is being used to render a custom popover menu (the more button). The subheadline prop is being used to render the job title. The description prop is being used to render the recent-articles popover. Demo

Mike Mai

Lead Web Architect, Pega Digital IT
Twig
// Set up variables {% set icon_map %} {% include '@bolt-components-icon/icon.twig' with { name: 'pega-map', } only %} {% endset %} {% set icon_partners %} {% include '@bolt-components-icon/icon.twig' with { name: 'partners', } only %} {% endset %} {% set icon_connection_hierarchy %} {% include '@bolt-components-icon/icon.twig' with { name: 'pega-connection-hierarchy', } only %} {% endset %} {% set more_button %} {% set popover_content %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'View in Org Chart', icon_before: icon_connection_hierarchy, }, { content: 'View on PeopleHub', icon_before: icon_partners, }, ] } only %} {% endset %} {% set popover_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'More', size: 'xsmall', hierarchy: 'tertiary', attributes: { type: 'button', } } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: popover_trigger, content: popover_content, spacing: 'none', placement: 'bottom-end', } only %} {% endset %} {% set signifier %} <img src="/images/placeholders/500x500.jpg" alt="" width=56 height=56 class="u-bolt-border-radius-full"> {% endset %} // Pass variables to the component {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { gutter: 'small', signifier: signifier, layout: 'responsive', headline: { text: 'Firstname Lastname', tag: 'h3', size: 'xlarge', link_attributes: { href: 'https://pega.com' }, }, subheadline: '<p><strong>Lead Web Architect</strong>, Pega Digital IT</p>', meta_items: [ 'Phone: <a href="tel:+1(123)-456-7890" class="e-bolt-text-link e-bolt-text-link--reversed-underline">+1(123)-456-7890</a>', 'Email: <a href="mailto:evgeny.vyatkin@pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mike.mai@pega.com</a>', 'Location: Cambridge HQ', 'Pega ID: FLAST', 'Hired date: May 4, 2018', ], variant: 'card', inset_spacing: 'small', custom_menu: more_button, } only %}
HTML
Not available in plain HTML. Please use Twig.

deprecated logo docs

Warning! The Logo component is deprecated. No new features will be added to this component. See each page under Components/Logo section in the navigation to reference old documentation. For any new instances of a Logo please use the Image element.

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: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-menu/menu.twig' with {
  items: [
    {
      content: 'Menu Item 1',
    },
    {
      content: 'Menu Item 2',
      attributes: {
        target: '_blank',
      },
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Menu
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 —
  • See below
content

Custom content for menu items.

 string , array , object —
  • —
title

Controls the inset spacing of each menu item.

 string —
  • —
spacing

Controls the inset spacing of each menu item.

 string small
  • xsmall, small, medium
Menu: items
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

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

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

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

 string —
  • —
on_click_target

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

 string —
  • —
onClick
(deprecated)

Use on_click instead.

 — —
  • —
onClickTarget
(deprecated)

Use on_click_target instead.

 — —
  • —
disabled

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

 boolean false
  • —
icon_before

Append an icon before the text. Icon component is recommended.

 object —
  • —
icon_after

Append an icon after the text. Icon component is recommended.

 object —
  • —
Install Install 
  npm install @bolt/components-menu
Dependencies @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue wc-context

menu

Basic menu Menu is a list of actions for the user to perform. Important Notes: Menu is usually used inside of a popover. View Popover Demo
Twig
{% include '@bolt-components-menu/menu.twig' with { items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %}
HTML
<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>

menu title variations

Menu title Create a title for the menu by using the title prop. Demo
Twig
{% include '@bolt-components-menu/menu.twig' with { title: 'Choose one of these', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %}
HTML
<bolt-menu> <span slot="title">Choose one of these</span> <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>

menu spacing variations

Menu spacing Control the spacing around each menu item by using the spacing prop. Reference spacing options in the schema. Demo
Twig
{% include '@bolt-components-menu/menu.twig' with { spacing: 'medium', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %}
HTML
<bolt-menu spacing="medium"> <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>

menu use case icons

Icon before and after menu item text Use the icon_before and icon_after props to append icons before or after the menu item text. Demo
Twig
{% set icon_facebook %} {% include '@bolt-components-icon/icon.twig' with { name: 'facebook-solid', size: 'small', } only %} {% endset %} {% set icon_twitter %} {% include '@bolt-components-icon/icon.twig' with { name: 'twitter-solid', size: 'small', } only %} {% endset %} {% set icon_linkedin %} {% include '@bolt-components-icon/icon.twig' with { name: 'linkedin-solid', size: 'small', } only %} {% endset %} {% include '@bolt-components-menu/menu.twig' with { items: [ { content: 'Share via Facebook', icon_before: icon_facebook, }, { content: 'Share via Twitter', icon_before: icon_twitter, }, { content: 'Share via LinkedIn', icon_before: icon_linkedin, }, ] } only %}
HTML
<bolt-menu> <bolt-menu-item> <bolt-icon name="facebook-solid" size="small" slot="icon-before"></bolt-icon> Share via Facebook </bolt-menu-item> <bolt-menu-item> <bolt-icon name="twitter-solid" size="small" slot="icon-before"></bolt-icon> Share via Twitter </bolt-menu-item> <bolt-menu-item> <bolt-icon name="linkedin-solid" size="small" slot="icon-before"></bolt-icon> Share via LinkedIn </bolt-menu-item> </bolt-menu>

menu use case popover

Popover menu Create a popover menu by combining the Popover and Menu components. Demo
Twig
{% set popover_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'Popover menu', size: 'xsmall', attributes: { type: 'button' } } only %} {% endset %} {% set popover_content %} {% include '@bolt-components-menu/menu.twig' with { title: 'Choose one of these', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: popover_trigger, content: popover_content, spacing: 'none', } only %}
HTML
<bolt-popover spacing="none"> <button type="button" class="e-bolt-button e-bolt-button--small"> Popover menu </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>

menu use case theming

Theme compatibility Menu can be used in various themes. Demo
Twig
<div class="t-bolt-dark"> // Put the component inside a themed container {% include '@bolt-components-menu/menu.twig' with { items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 3', }, ] } only %} </div>
HTML
<div class="t-bolt-dark"> // Put the component inside a themed container <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>

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: 4.2.0 Change log Github NPM
Twig Usage 
  {% include "@bolt-elements-button/button.twig" with {
  content: "Open Modal",
  attributes: {
    type: 'button',
    "data-bolt-modal-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
persistent

Enables the modal to be persistent. This will eliminate ways to close the modal and it is up to the author to provide a custom link to close the modal or redirect to another page within the modal content. Must be used in tandem with the persistent_return_url prop.

 boolean false
  • —
persistent_return_url

The URL to be used on a return link. If a modal is persistent, a return link is required to provide the user a way out. Must be used in tandem with the persistent prop.

 string —
  • —
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 —
  • —
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 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 This makes the overall viewport area scrollable.
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

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 This modal is triggered by a link. Buttons are preferred for opening a modal, but you can use a link in a pinch.

modal usage javascript

Toggle the Modal You can toggle a modal either by adding the data-bolt-modal-target data attribute to a trigger element, or by calling the Modal's show() and hide() methods directly via JavaScript. Data attribute Use the data attribute data-bolt-modal-target on a trigger element to toggle a modal. The value of the data attribute must be a valid CSS selector that matches your target modal. When you click the trigger the modal will show if currently hidden or it will hide if currently shown. Demo This modal was shown via the data-bolt-modal-target data attribute. The same data attribute is used on the button below to hide the modal. JavaScript Use the Modal's show() and hide() methods to toggle a modal. Before calling any methods on the modal you must first wait for the Modal component to be ready. See the demo below for reference. Demo This modal was shown by calling the show() method. The hide() method will be called when you click the button below. Custom JavaScript <script> const modal = document.querySelector('.js-bolt-modal--js-demo'); const showButton = document.querySelector('.js-bolt-modal-trigger--open'); const hideButton = document.querySelector('.js-bolt-modal-trigger--close'); // Promise ensures Modal is defined before calling hide/show customElements.whenDefined('bolt-modal').then(() => { showButton.addEventListener('click', () => { modal.show(); }) hideButton.addEventListener('click', () => { modal.hide(); }) }); </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.
@bolt-eleemnts-image/image.twig

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.

This is the caption for the image.

modal usage video

Video Modal Usage Videos opening and playing in a modal are handled by a couple data attributes. Button Attribute To open a modal, the triggering button requires a data-bolt-modal-target attribute. The value of this attribute is the target modal's class. There is JS that will handle the opening on target modal based on the attribute's value. Video Attributes To prevent a video from initializing on page load, the video-js requires a couple of attributes to delay the initialization. There are four attributes that are required, three of these replace the default Brightcove attributes.
  • data-delayed-account (replaces data-account)
  • data-delayed-player (replaces data-player)
  • data-delayed-video-id (replaces data-video-id)
  • data-video-delayed (flag to delay the initialization)
Within the Brightcove initialization logic these attributes will defer the video initialization until the modal:show event is fired. The JS will create the Brigthcove required attributes on the fly and start the initialization shortly after. After the modal is opened, it will automatically start playing the video Demo

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 persistent

Persistent Modal Usage Persistent modal is useful when creating subscription based content. To create one, two props are required: persistent and persistent_return_url. When a modal is persistent, the default close button is not shown, the only ways to close the modal is through filling out the form, hitting the return link, or hitting the escape key on the keyboard (which acts exactly like the return link). Activate the modal to see more instructions on setting up the twig template.

Template Instructions

Modal content can be anything. Content authors are free to set up single or multiple column layouts. The recommended format is text content on the left and form on the right. The return link is required, which is in its own cell under both the text content and form cells. It should not be part of the free-form authorable content, instead two required fields are required for content authors to input: return link url and return link text.

Sign in to view restricted content
No thanks! Return to last page

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 data-bolt-modal-target to trigger the modal. However, the same options shown on the Usage Javascript page are also available on the web component.
This is a modal.
<button type="button" class="e-bolt-button" data-bolt-modal-target=".js-bolt-modal-demo"> Open Modal </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.
This is the header This is the body (default). This is the footer
<button type="button" class="e-bolt-button" data-bolt-modal-target=".js-bolt-modal-basic-demo"> Open Modal </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>
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.
<button type="button" class="e-bolt-button" data-bolt-modal-target=".js-bolt-modal-advanced-demo"> Open Modal </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>

navbar docs

Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  // Set up the navbar items
{% set navbar_items %}
  {% include '@bolt-components-navbar/navbar-li.twig' with {
    link: {
      content: 'Section 1',
      attributes: {
        href: '#section-1'
      }
    }
  } only %}
  ...
{% endset %}
{% set navbar_list %}
  {% include '@bolt-components-navbar/navbar-ul.twig' with { 
    content: navbar_items,
  } only %}  
{% endset %}

// Pass the navbar items to the navbar template
{% include '@bolt-components-navbar/navbar.twig' with {
  title: {
    content: 'This is the navbar title',
    icon: {
      name: 'marketing-gray'
    },
    link: {
      attributes: {
        href: 'https://pega.com'
      },
    },
  },
  links: navbar_list
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Navbar
Prop Name Description Type Default Value Option(s)
title

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

 object —
    • content

      Title text. Should be plain-text but may contain some HTML. Defaults to "Go to" on small screens if empty.

      • —
    • tag
      • h1, h2, h3, h4, h5, h6, div
    • icon
        • name

          Name of the (optional) icon to be used.

          • —
    • hide_text

      Set the breakpoint at which you wish to hide the title text.

      • from-xsmall-bp or from-small-bp
    • link

      Make the Navbar title a link.

        • attributes

          A Drupal attributes object. Applies extra HTML attributes to the parent element. Add "href" attribute here.

          • —
    • secondary_content

      Insert additional content into the title region, only used on Bolt homepage.

      • —
links

Content of navbar links. Navbar ul is expected here.

 any —
  • —
content

Custom navbar content. Content provided here will replace title and links.

 any —
  • —
spacing

Controls the inset spacing of the navbar

 string small
  • none, xsmall, small, medium
width

Control the width of the navbar. Full will span the entire screen width ignoring any wrapper or page max-width.

 string full
  • full or auto
center

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

 boolean false
  • —
static

Set the navbar to be static instead of sticky.

 boolean false
  • —
theme

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

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

Number of pixels taken up by sticky items at the top of the page, used for smooth scroll.

 integer —
  • —
sticky_offset

Offset the top position of the navbar by a specific pixel value. Only works when Navbar is sticky.

 integer —
  • —
sticky_offset_selector

Offset the top position of the navbar by the height of a specific element or elements, which the selector points to. Selector can match multiple elements, uses the cumulative height. Must be a valid CSS selector.

 string —
  • —
scroll_offset

Ofset the top position of a page section anchor by a specific pixel value.

 integer —
  • —
uuid

Unique ID for the navbar, randomly generated if not provided.

 string —
  • —
Navbar list
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of navbar ul. Navbar li are expected here.

 any —
  • —
Navbar item
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
link *

Link of the navbar item. Pass a hash to the "href" attribute to link to an in-page section.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • content

      Content of the link.

      • —
    • icon

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

        • 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

          Controls the size of the icon. Each size is set to a specific pixel value: 16px, 24px, 32px, and 38px. However, this prop is optional. When no size is specified, the icon is expected to act as an inline icon, which will grow or shrink depending on the font-size of its parent container.

          • 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, navy, yellow, orange, gray, pink, berry, wine, violet
current

Automatically mark a navbar link as current

 boolean —
  • —
Install Install 
  npm install @bolt/components-navbar
Dependencies @bolt/components-smooth-scroll @bolt/core-v3.x

navbar

Basic Navbar Navbar is a sticky container for secondary page navigation. Important Notes: The title can be turned into a link by passing link attributes. Demo
Twig
// Set up the navbar items {% set navbar_items %} {% include '@bolt-components-navbar/navbar-li.twig' with { link: { content: 'Section 1', attributes: { href: '#section-1' } } } only %} {% include '@bolt-components-navbar/navbar-li.twig' with { link: { content: 'Section 2', attributes: { href: '#section-2' } } } only %} ... {% endset %} {% set navbar_list %} {% include '@bolt-components-navbar/navbar-ul.twig' with { content: navbar_items, } only %} {% endset %} // Pass the navbar items to the navbar template {% include '@bolt-components-navbar/navbar.twig' with { title: { content: 'This is the navbar title', icon: { name: 'marketing-gray' }, link: { attributes: { href: 'https://pega.com' }, }, }, links: navbar_list } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar spacing

Vertical Spacing There are spacing options for the navbar. The top and bottom padding can be adjust based on the use case. Important Notes: Reference the schema for all options. Navbar schema Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { spacing: 'medium', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar center

Center Alignment Navbar has a style variant that allows the title and links to be center aligned horizontally. Important Notes: It is recommended to set the spacing prop to xsmall when using the center prop. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { center: true, spacing: 'xsmall', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar width

Auto Width By default the navbar takes up the full width of the viewport, but the width can be set to auto as well. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { width: 'auto', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar static

Static Use the static prop to disable Navbar's default sticky position. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { static: true, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar theme

Color Themes All color themes are available for use in the navbar while dark is the default. Important Notes: If the theme prop is set to none, the navbar will have a transparent background. Reference the schema for all options. Navbar schema Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { theme: 'light', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar hide title text

Visually Hide the Title text at Specific Breakpoints The navbar title text can be visually hidden at specific breakpoints. This is useful when working with a navbar that has a lot of links. Important Notes: This option is best combined with the center alignment. Reference the schema for all options. Navbar schema Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { title: { ... hide_text: 'from-xsmall-bp', }, center: true, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar scroll offset

Scroll Offset Scroll offset can be used when you want to offset the target scroll position of each navbar link. When a navbar link is pressed, the page will scroll down to the repsective anchor. The offset adds a specific pixel value on top of it. Demo View full page demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { scroll_offset: 16, // Adds a specific pixel value to the smooth scroll position of each section of the page. ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar sticky offset

Sticky Offset When there are multiple sticky elements on the same page, sticky offset can be used to prevent sticky elements from overlapping each other. Important Notes: The Navbar component already accounts for the sticky Page Header component, it is not necessary to pass Page Header’s selector to sticky_offset_selector. While sticky_offset_selector can automatically calculate the dynamic height of a specific element, the sticky_offset can offset a specific pixel value manually. You may choose to use that instead if you need an absolute value. Ideally, the two props are not used in tandem. Demo View full page demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { sticky_offset_selector: '#js-sticky-target', // Adds the height of the other sticky element to the top position of the sticky navbar. ... } only %}
HTML
Not available in plain HTML. Please use Twig.

navbar multiple

Multiple Navbars When there are multiple navbars on the same page, in order for one to push off another, the navbars cannot be siblings in the markup. They must be contained within separate elements. Important Notes: If the navbars are siblings, they will overlap each other. In such case, reference sticky offset to avoid overlapping. Demo View full page demo
Twig
<section> {% include '@bolt-components-navbar/navbar.twig' with { ... } only %} // Content goes here </section> <section> {% include '@bolt-components-navbar/navbar.twig' with { ... } only %} // Content goes here </section>
HTML
Not available in plain HTML. Please use Twig.

navbar custom content

Custom Navbar A completely custom navbar can be built if neccessary. Important Notes: The content prop completely overrides the title and links props. Since this is still a navbar, it is recommended that the custom content contains links. Demo
Twig
{% include '@bolt-components-navbar/navbar.twig' with { content: custom_content, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

ol docs

Ol

Vertical list of numbered items.

Published Last updated: 4.2.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.
Ordered List
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 —
  • See below
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.
Ordered List: items
Prop Name Description Type Default Value Option(s)
text
string —
  • —
contentItems

Passes to @bolt/text.twig

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

Page Header

Global header that contains the global search, primary navigation, and secondary navigation.

Published Last updated: 4.2.2 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-page-header/page-header.twig' with {
  logo: {
    image_src: '/images/logos/pega-logo.svg',
    label: 'Pegasystems',
    attributes: {
      href: 'https://pega.com',
    }
  },
  content: primary_nav_and_search_panel,
  cta: cta_button,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Page Header
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Primary content of page header. Primary nav and search panel are expected here.

 any —
  • —
secondary_content

Secondary content of page header (sub nav, visible search bar, breadcrumbs, etc.).

 any —
  • —
logo *

Set the site logo. This can be turned into a link by passing the "href" attribute.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • image_src

      Set the path to the logo image.

      • —
    • label

      Set a label (visually hidden) for the logo.

      • —
subheadline

Text or other content to display next to the logo.

 any —
  • —
cta

Set the main call-to-action. Button element is expected here.

 any —
  • —
static

Set the page header to be static instead of sticky.

 boolean false
  • —
full_width

Set the page header width to span across the full viewport.

 boolean false
  • —
Page Header Primary Nav
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of page header primary nav. Nav ul are expected here.

 any —
  • —
align_site_nav_items

Set the site nav item alignment. This only applies to child nav ul with the category prop set to "site", it has no effects on other categories.

 string —
  • start, center, end
Page Header Search Panel
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of page header search panel. Typeahead or some kind of search input is expected here.

 any —
  • —
Page Header Nav ul
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of page header nav ul. Nav li are expected here.

 any —
  • —
category

Indicate which set of navigation this nav ul is rendering.

 string —
  • site, related-sites, user
popover_position

Set the position of the nav ul if the parent nav li has the popover prop set to "true". This only applies if the nav ul is a child of a nav li.

 string —
  • edge-start or edge-end
wrap_site_nav_items

Allow the site nav items to wrap once it runs out of available space. This only applies when category is set to "site", it has no effects on other categories.

 boolean false
  • —
Page Header Nav li
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
link

Link of the nav li. Passing the "href" attribute will turn it into a semantic link. This prop will be overridden by the content prop.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • content

      Content of the link.

      • —
    • desktop_heading

      Indicate if the link should also act as a heading for the children in desktop view. This has no effects in mobile view. This only applies if flat is "false", child nav ul is passed, and its category is set to "site".

      • —
children

Append children for the nav li. Nav ul can be passed here. This must be used in tandem with the link prop.

 any —
  • —
content

Content of the nav li. Use this only if the nav li is not a link, instead it is some kind of layouts such as a card. This prop will override the link prop.

 any —
  • —
current

Set the nav li as the current item. This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
full_width

Set the nav li width to full. This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
view_all

Style the nav li as the "view all" item. This should only be used on "view all" links.

 boolean false
  • —
popover

Indicate if the nav li is a popover. This only applies if nav ul category is set to "related-sites" or "user".

 boolean false
  • —
selected

Set the nav li as the selected item. This only applies if nav ul category is set to "user" and the nav li is rendering the language select.

 boolean false
  • —
flat

Indicate if the nav ul is a flat list (no nesting at all). This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
Install Install 
  npm install @bolt/components-page-header
Dependencies @bolt/components-typeahead @bolt/core-v3.x hoverintent

page header

Basic Page Header Page header is the global header that contains the global search, primary navigation, and secondary navigation. Important Notes: Additional CSS custom properties are available to further customize the page header per use case. px, em, and rem unit values are supported in addition to tokens. These properties must be defined at the :root level. --c-bolt-page-header-logo-max-width: At any breakpoint, limit the logo to a specific max-width. This is only effective on long logos, do not use on the plain Pega logo. --c-bolt-page-header-desktop-spacing-y: Above large breakpoint, set the spacing-y (padding top/bottom) of the page header to a specific value. Spacing tokens are recommended. --c-bolt-page-header-desktop-site-nav-link-spacing-x: Above large breakpoint, set the spacing-x (padding left/right) of any primary nav link (top level) to a specific value. Spacing tokens are recommended. --c-bolt-page-header-desktop-primary-nav-link-font-size: Above large breakpoint, set the font-size of any primary nav link (top level) to a specific value. Font-size tokens are recommended. Demo
Pega.com View
Academy View
Community View
Collaboration Center View
SalesHub View
Partners View
PegaWorld View
Twig
// The main template {% include '@bolt-components-page-header/page-header.twig' with { logo: { image_src: '/images/logos/pega-logo.svg', label: 'Pegasystems', attributes: { href: 'https://pega.com', } }, subheadline: 'Subheadline text', // This appears next to the logo content: primary_nav_and_search_panel, secondary_content: secondary_nav, cta: cta_button, static: true, // Prevents page header from being sticky full_width: true, // Sets the width to span the full viewport subheadline: 'Subheadline text', // This appears next to the logo } only %} // Search panel template (pass to main template's content prop) {% include '@bolt-components-page-header/page-header-search-panel.twig' with { content: content, } only %} // Primary nav template (pass to main template's content prop) {% include '@bolt-components-page-header/page-header-primary-nav.twig' with { content: content, align_site_nav_items: align_site_nav_items, // ['start', 'center', 'end'] } only %} // Nav ul template (pass to primary nav template's content prop) {% include '@bolt-components-page-header/page-header-nav-ul.twig' with { content: content, category: category, // ['site', 'related-sites', 'user'] popover_position: popover_position, // ['edge-start', 'edge-end'] } only %} // Nav li template (pass to nav ul template's content prop) {% include '@bolt-components-page-header/page-header-nav-li.twig' with { link: { content: 'Products', attributes: { href: 'https://pega.com/products', }, }, children: children, content: content, // This overrides link and children view_all: false, // This is for general "view all" links full_width: false, // This is for "view all" and full-width links popover: false, // This is for utility nav flat: false, // This is for a top level desktop site nav item to render a single level flat dropdown selected: false, // This is for language select current: true, // This is for marking a top level desktop site nav item as the current page } only %}
HTML
Not available in plain HTML. Please use Twig.

pagination docs

Pagination

A navigation system for browsing search results.

Published Last updated: 4.2.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

Placeholder

Placeholder element only used in Pattern Lab demos.

Published Last updated: 4.2.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: 4.2.0 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
trigger_event

Controls the event that triggers the popover to show.

 string click
  • click or hover
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 xlight
  • 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

popover

Basic Popover Popover usually contains a small piece of structured content that may have calls to action. For rendering more complex layouts, please consider using the modal component instead. As for simple text or phrases, please consider using the tooltip component. Demo This is the content of the popover with a call to action .
Twig
{% set trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'This triggers a popover', attributes: { type: 'button' } } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: 'This is the content of the popover.', } only %}
HTML
<bolt-popover spacing="medium"> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>

popover placement variations

Popover Placement and Boundary Adjust the placement of the content by using the placement prop. It can be set to a specific placement or automatically calculated. It is recommended to use the boundary prop in tandem with auto placement. This ensures that the auto placement will happen within a specific container instead of the entire page. The boundary prop accepts all selector names (eg: .class, #id, and [attribute]). Demo Auto placement with a boundary (recommended): The following container has the .js-bolt-popover-boundary class and the popover’s boundary prop is set to said class. The popover’s auto placement will always appear within the container.
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
Specific placement: When setting a specific placement, it will ignore the boundary prop and always render the placement stated. This feature will cause undesired overflow issues in smaller screens, use with caution. This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, placement: 'auto', boundary: '.js-target-container' } only %}
HTML
<bolt-popover placement="auto" boundary=".js-target-container"> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>

popover spacing variations

Popover Content Spacing Adjust the inset spacing of the content by using the spacing prop. Demo This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, spacing: 'medium', } only %}
HTML
<bolt-popover spacing="medium"> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>

popover use case menu

Popover Menu Create a popover menu by combining the Popover and Menu components. Important Notes: It is recommended to set the spacing to none because the Menu component already has spacing built in. Demo
Twig
{% set trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'This triggers a popover menu', attributes: { type: 'button' } } only %} {% endset %} {% set content %} {% include '@bolt-components-menu/menu.twig' with { title: 'Choose one of these', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 2', }, ] } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, spacing: 'none', } only %}
HTML
<bolt-popover> <button type="button" class="e-bolt-button"> This triggers a popover </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>

popover use case custom width

Custom Popover Bubble Width The popover bubble width is set to 250px by default, but it can be customized per use case by defining the --c-bolt-popover-bubble-width CSS custom property via inline style. Important Notes: It is recommended to always use the CSS function min() when customizing the popover bubble width. This ensures the width will never break page layouts. The following example uses min(80vw, 500px), which means the width is set to 500px unless the browser width is smaller than 500px, then the width will become 80% of the browser width. Keep in mind that the min() function is not supported in Microsoft Edge 42 and older. If you need to support such old browser, you should set the custom width to a plain old absolute value such as 500px. Demo

This Is an Eyebrow

This Is a Headline

This is a paragraph.
Twig
{% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, attributes: { style: '--c-bolt-popover-bubble-width: min(80vw, 500px);' }, } only %}
HTML
<bolt-popover style="--c-bolt-popover-bubble-width: min(80vw, 500px);"> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>

popover theme variations

Popover Content Theming Adjust the Bolt color theme of the content by using the theme prop. Demo This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, theme: 'dark', } only %}
HTML
<bolt-popover theme="dark"> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>

popover trigger event variations

Popover Trigger Event By default, popover activates on click, but the behavior can be changed to “hover” via the trigger_event prop. Demo This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with { trigger: trigger, trigger_event: 'hover', // Default is 'click'. content: content, } only %}
HTML
<bolt-popover spacing="medium" trigger-event="hover"> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> This is the content of the popover. </div> </bolt-popover>

progress bar docs

Progress Bar

Visual indicator for the progression of an activity.

Published Last updated: 4.2.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

Ratio

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

Published Last updated: 4.2.0 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: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-share/share.twig' with {
  sources: [
    {
      name: 'facebook',
      attributes: {
        href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse'
      }
    },
    {
      name: 'twitter',
      attributes: {
        href: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
      }
    },
    {
      name: 'linkedin',
      attributes: {
        href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
      }
    },
    {
      name: 'email',
      attributes: {
        href: '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.
Share
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 —
  • See below
display

Controls the display of the share options.

 string inline
  • inline or menu
copy_to_clipboard
object —
inline
(deprecated)

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

 — —
  • —
copyToClipboard
(deprecated)

Please use copy_to_clipboard.

 — —
  • —
Share: items
Prop Name Description Type Default Value Option(s)
name

Name of the social media source.

 string —
  • facebook, twitter, linkedin, email
attributes

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

 object —
  • —
url
(deprecated)

Please pass the href value through the source attributes object.

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

share

Basic Share Share is a list of social media links. Each link will enable the user to share a URL to a particular social media platform. Demo
Share this page Share via LinkedIn Copying...
Copied!
Twig
{% include '@bolt-components-share/share.twig' with { sources: [ { name: 'facebook', attributes: { href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse' } }, { name: 'twitter', attributes: { href: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!' } }, { name: 'linkedin', attributes: { href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com' } }, { name: 'email', attributes: { href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com' } } ], copy_to_clipboard: { text_to_copy: 'https://boltdesignsystem.com' }, } only %}
HTML
Not available in plain HTML. Please use Twig.

share size variations

Title, icon, and spacing size Share is available in small and medium sizes. Use the size prop to control the title text size, the icon size, and the spacing between the icons. Demo
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Twig
{% include '@bolt-components-share/share.twig' with { size: 'small', sources: var_foo, copy_to_clipboard: var_bar, } only %}
HTML
Not available in plain HTML. Please use Twig.

share display variations

Menu display Share can be turned into a menu and used in a popover. Demo
Twig
{% set popover_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'Share menu', attributes: { type: 'button' } } only %} {% endset %} {% set popover_content %} {% include '@bolt-components-share/share.twig' with { display: 'menu', sources: var_foo, copy_to_clipboard: var_bar, } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: popover_trigger, content: popover_content, spacing: 'none', } only %}
HTML
Not available in plain HTML. Please use Twig.

share opacity variations

Opacity Inline share is available in various opacities. Use the opacity prop to control it. Important Notes: 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 does not work with menu display. Demo
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Twig
{% include '@bolt-components-share/share.twig' with { opacity: 60, sources: var_foo, copy_to_clipboard: var_bar, } only %}
HTML
Not available in plain HTML. Please use Twig.

share align variations

Horizontal alignment Inline share is available in various horizontal alignments. Use the align prop to control it. Important Notes: Share is a block level component and it takes up the full width of its parent container, horizontal alignment is depended on that width. Align does not work with menu display. Demo
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Twig
{% include '@bolt-components-share/share.twig' with { align: 'center', sources: var_foo, copy_to_clipboard: var_bar, } only %}
HTML
Not available in plain HTML. Please use Twig.

share theme variations

Theme compatibility Share can be used in various themes. Demo
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Share this page Share via LinkedIn Copying...
Copied!
Twig
<div class="t-bolt-dark"> // Put the component inside a themed container {% include '@bolt-components-share/share.twig' with { sources: var_foo, copy_to_clipboard: var_bar, } only %} </div>
HTML
Not available in plain HTML. Please use Twig.

share use case custom title

Custom title Title can be customized to display whatever text is needed. Use the text prop to control it. Demo
This is a custom title Share via LinkedIn Copying...
Copied!
Twig
{% include '@bolt-components-share/share.twig' with { text: 'This is a custom title', sources: var_foo, copy_to_clipboard: var_bar, } only %}
HTML
Not available in plain HTML. Please use Twig.

side nav docs

Side Nav

Secondary navigation that resides on the sidebar of a page layout.

Published Last updated: 4.2.1 Change log Github NPM
Twig Usage 
  // List item template
{% include '@bolt-components-side-nav/side-nav-li.twig' with {
  link: {
    content: 'Item text',
    attributes: {
      href: 'https://pega.com',
    },
  },
  current: true, // When set to true, the item is indicated as the current page.
  expanded: true, // When set to true, it will show children.
  children: children, // Pass another list in here.
} only %}

// List template
{% include '@bolt-components-side-nav/side-nav-ul.twig' with {
  content: content, // Pass list items in here.
} only %}

// Side nav template
{% include '@bolt-components-side-nav/side-nav.twig' with {
  headline: {
    content: 'Headline text',
    link_attributes: {
      href: 'https://pega.com',
    },
  },
  content: content, // Pass list in here.
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Side Nav
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of the side nav. side-nav-ul template is expected here.

 any —
  • —
headline

Set the title of the side nav.

 object —
    • content

      Text content of the headline.

      • —
    • link_attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

      • —
Side Nav ul
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of the side nav list. side-nav-li template is expected here.

 any —
  • —
Side Nav li
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
link

Set a nav link item.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

      • —
    • content

      Text content of the link.

      • —
children

Render the nested children links. side-nav-ul template is expected here.

 object —
  • —
current

Indicate the link item as the current page.

 boolean —
  • —
expanded

Set the nested children links to be expanded by default. This only applies if the children is also set.

 boolean —
  • —
Install Install 
  npm install @bolt/components-side-nav
Dependencies @bolt/components-icon @bolt/core-v3.x

side nav

Basic Side Nav Side nav is a secondary navigation. It is commonly used in documentation design. Important Notes: Although nesting is possible, it is not recommended to go more than 4 levels deep. Side nav is intended to be used as the left sidebar of a Holy Grail layout. Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demo Demo
Twig
// List item template {% include '@bolt-components-side-nav/side-nav-li.twig' with { link: { content: 'Item text', attributes: { href: 'https://pega.com', }, }, current: true, // When set to true, the item is indicated as the current page. expanded: true, // When set to true, it will show children. children: children, // Pass another list in here. } only %} // List template {% include '@bolt-components-side-nav/side-nav-ul.twig' with { content: content, // Pass list items in here. } only %} // Side nav template {% include '@bolt-components-side-nav/side-nav.twig' with { headline: { content: 'Headline text', link_attributes: { href: 'https://pega.com', }, }, content: content, // Pass list in here. } only %}
HTML
Not available in plain HTML. Please use Twig.

stack docs

Stack

A content container that defines spacing between elements vertically.

Published Last updated: 4.2.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. Applies 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 —
  • —
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: 4.2.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

table docs

Table

Content container for tabular content.

Published Last updated: 4.2.0 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.

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

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

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

      • See below
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
  • —
first_col_fixed_width

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

 boolean false
  • —
caption

Set a table caption, displayed below the table content.

 string —
  • —
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 A Rock Climber 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
SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll

table caption

With Caption

R1C1 R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 R3C2 R3C3
This is a table caption

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 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> <button type="button" class="e-bolt-button e-bolt-button--small">SR-49941</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> <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> <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>
Table Caption Use the <caption> tag to add a caption to your table.
R1C1 R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 R3C2 R3C3
This is a table caption
<bolt-table> <table> <tbody> <tr> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> <tr> <td>R3C1</td> <td>R3C2</td> <td>R3C3</td> </tr> </tbody> <caption>This is a table caption</caption> </table> </bolt-table>

tabs docs

Tabs

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

Published Last updated: 4.2.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.
Tabs
Prop Name Description Type Default Value Option(s)
panels

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

 array —
  • See below
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 —
  • —
Tabs: items
Prop Name Description Type Default Value Option(s)
label

Tab label used in the navigation. Twig only.

 string Tab
  • —
content

Tab panel content.

 string , object , array —
  • —
selected

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

 boolean false
  • —
id

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

 string —
  • —
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 text group

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.

CTA 1 CTA 12
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
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
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

An interactive UI element that summarizes a particular resoruce.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-teaser/teaser.twig' with {
  signifier: image,
  headline: {
    text: 'Some awesome Title',
    link_attributes: {
      href: 'https://www.pega.com',
    }
  },
} %}
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 —
  • —
layout

Set the layout of the teaser based on the use case.

 string vertical
  • vertical, horizontal, responsive
gutter

Set the spacing in between columns for horizontal and responsive layouts.

 string medium
  • small, medium, large
type

Set the type of teaser. A play button will display with the video teaser signifier.

 string —
  • pdf, video, external-link
signifier

Set the signifier for the teaser. It accepts plain element, the Image component, and the Icon component.

 object —
  • —
eyebrow_text

Set the helper info above the headline.

 string —
  • —
headline

Set the headline text, size, and the block link that covers the entire teaser.

 object —
    • text

      Renderable text content of the headline.

      • —
    • tag

      Set the semantic HTML tag for the headline.

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

      Set the size of the headline.

      • xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
    • link_attributes

      A Drupal-style attributes object with extra attributes to append to the headline link.

      • —
subheadline

Set the subheadline text and size.

 object —
    • text

      Set the subheadline text content.

      • —
    • size

      Set the size of the subheadline.

      • xxlarge, xlarge, large
    • tag

      Set the semantic HTML tag for the subheadline.

      • h1, h2, h3, h4, h5, h6, p
description

Set a brief description of the resource.

 object —
    • content

      Content of the description..

      • —
    • show_on_hover

      If set to true, the description will appear as an overlay above the signifier.

      • —
time

Render time data (video duration or read time) for the resouce.

 string —
  • —
like

Render the like button. Link element is expected here.

 object —
  • —
share

Render the share button. Share menu is expected here.

 object —
  • —
chip_list

Render a list of related chips for the resource. Passing the Chip List component is mandatory.

 object —
  • —
status
object —
    • locked

      Indicate if this teaser is showing a locked resource. It shows a lock icon in the upper left corner of the signifier.

      • —
    • views

      Render the view count.

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

teaser

Basic Teaser A teaser is an interactive block element. Its main purpose is to display relevant content for a resource or external link before user interaction, for which the entire element is clickable. The Twig template is the recommended usage for Drupal. Important Notes: signifier and headline props are required for a basic teaser. When using the signifier prop, it will automatically crop an to the defined ratio (16:9 for vertical and responsive layout, 1:1 for horizontal layout). When using bolt-image as the signifier, please be sure that the source image file has the appropriate ratio, otherwise there will be undesired white space. The headline prop and its children props are required for use. To set an action for the teaser, set an href (for links) or type and proper attributes (for buttons) with the headline.link_attributes prop. Demo
Twig
{% set image %} // <img> or <bolt-image> goes here {% endset %} {% include '@bolt-components-teaser/teaser.twig' with { signifier: image, headline: { text: 'This is the teaser headline', link_attributes: { href: 'https://www.pega.com', } }, } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser layout

Teaser Layout There are currently three layout options, vertical, horizontal, and responsive. The default option is vertical. Important Notes: Vertical or responsive teaser accepts 16:9 aspect ratio signifier. Any other aspect ratio will automatically be cropped to a 16:9 ratio. Horizontal teaser accepts 1:1 (square) aspect ratio signifier. Any other aspect ratio will automatically be cropped to a 1:1 ratio. Demo
Alt text.

This is vertical teaser

The signifier is using a 16:9 aspect ratio image. Aliquip sint mollit irure eiusmod duis aliquip duis qui nostrud enim ea aute in enim.
Alt text.

This is horizontal teaser

The signifier is using a 1:1 aspect ratio image. Aliquip sint mollit irure eiusmod duis aliquip duis qui nostrud enim ea aute in enim. Do et eiusmod sint velit est do exercitation qui minim.
Alt text.

This is a responsive teaser

The signifier is using a 16:9 aspect ratio image. Duis dolore labore cillum excepteur aute veniam dolore consectetur est sint exercitation sit. Dolor eiusmod officia laborum tempor. Enim eiusmod Lorem laboris aliqua dolore.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { layout: 'horizontal', signifier: image, headline: { text: 'This is the teaser headline', link_attributes: { href: 'https://www.pega.com', } }, } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser gutter

Gutter Size for Horizontal and Responsive Teasers The space between columns on the horizontal and responsive teasers can be modified with the gutter prop. It can be small, medium, or large. Demo
Alt text.

This horizontal teaser is using a small gutter

Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna. Enim eiusmod Lorem laboris aliqua dolore. Dolor eiusmod officia laborum tempor.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { layout: 'horizontal', gutter: 'large', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser chips

Teaser Chips If you would like to show chips at the bottom of the teaser, just pass rendered Chip List component into the chip_list prop. Demo
Alt text.

This is a teaser with chips

Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim. Id consectetur dolor voluptate eu veniam anim adipisicing dolor ut occaecat officia fugiat magna reprehenderit.
Video Research
Twig
{% set chip_list %} {% include '@bolt-components-chip-list/chip-list.twig' with { size: 'xsmall', items: [ { text: 'Video', }, { text: 'Research', }, ], } only %} {% endset %} {% include '@bolt-components-teaser/teaser.twig' with { chip_list: chip_list, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser type and time

Teaser Type and Time The type and time props can be used to display additional information about a resource. Important Notes: Type: this indicates the resource type. If it is set to video, a play icon will appear with the signifier. Time: this represents either video duration (for video, eg. 1:20) or estimated reading time (for external link and PDF, eg. 10 min read). If a value is set, the value will appear with the signifier. Demo
Alt text.
1:20

Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { type: 'video', time: '1:20', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser status and actions

Teaser Status and Actions The status prop can be used to display status information about a resource such as locked and view count. Like and share buttons can be generated via the actions prop. Important Notes: View count can be set via the status.views prop. It can be numbers or string (eg. 28k). Locked status can be set via the status.locked prop. If this is set, a lock icon will appear with the signifier. Pass a like button into the like prop. Example code snippet is shown below. Pass a share popover menu into the share prop. Boundary is required on the popover. Example code snippet is shown below. Demo
Twig
// Set up the like and share buttons {% set like %} {% set icon_heart %} {% include '@bolt-components-icon/icon.twig' with { name: 'heart-open', } only %} {% endset %} {% include '@bolt-elements-text-link/text-link.twig' with { content: 'Like', icon_before: icon_heart, reversed_underline: true, attributes: { type: 'button', class: 'js-bolt-like-button', // JS target for handling the like function. }, } only %} {% endset %} {% set share %} {% set share_menu %} {% include '@bolt-components-share/share.twig' with { display: 'menu', text: 'Share this content', sources: [ ... ], } only %} {% endset %} {% set share_popover_trigger %} {% set icon_share %} {% include '@bolt-components-icon/icon.twig' with { name: 'share', } only %} {% endset %} {% include '@bolt-elements-text-link/text-link.twig' with { content: 'Share', icon_before: icon_share, reversed_underline: true, attributes: { type: 'button' }, } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: share_popover_trigger, content: share_menu, spacing: 'none', boundary: '.js-bolt-target-teaser', // JS target for containing the popover within the teaser. } only %} {% endset %} // Set up the component {% include '@bolt-components-teaser/teaser.twig' with { like: like, share: share, status: { views: '28k', locked: true, }, attributes: { class: 'js-bolt-target-teaser', }, ... } only %}
HTML
Not available in plain HTML. Please use Twig.
JavaScript
<script> // Example Like Button JS var likeButtons = document.querySelectorAll('.js-bolt-like-button'); likeButtons.forEach(function(el) { el.addEventListener('click', function (event) { var likeIcon = this.querySelector('bolt-icon'); if (likeIcon.getAttribute('name') === 'heart-open') { likeIcon.setAttribute('name', 'heart'); likeIcon.setAttribute('color', 'pink'); } else { likeIcon.setAttribute('name', 'heart-open'); likeIcon.removeAttribute('color'); } }); }) </script>

teaser text options

Teaser Text Options The teaser allows for a few different text options, including eyebrow_text, headline, subheadline, and description. Important Notes: When setting the headline and subheadline please be sure to set the proper HTML tag to ensure SEO and accessibility best practices. The traditional eyebrow/headline/subheadline lockup is best used in responsive layout. Demo
Twig
{% include '@bolt-components-teaser/teaser.twig' with { eyebrow_text: 'This is the eyebrow', headline: { text: 'This is the headline', tag: 'h2', size: 'xxlarge', link_attributes: { href: 'https://www.pega.com', } }, subheadline: { text: 'This is the subheadline', tag: 'h3', size: 'xlarge', }, description: { content: 'This is the description.', }, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser description on hover

Show Description on Hover The teaser description has the show_on_hover boolean prop. When it is set to true, the description appears as an overlay above the signifier and it is truncated at 80 characters. Demo
Alt text.
7 pages

This teaser shows a long description on hover

Long description. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { description: { content: 'This is the description', show_on_hover: true, }, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

text

text docs

Text

Pega branded typography system.

Published Last updated: 4.2.0 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
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
  • —
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
  • —
subheadline

A preset for subheadlines in context of the typographic design.

 boolean false
  • —
eyebrow

A preset for eyebrow in context of the typographic design.

 boolean false
  • —
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>

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

Toc

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

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-toc/toc.twig' with {
  header: 'This is the header',
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Table of Contents
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 —
  • —
variant

Set the visual variant.

 string card
  • transparent or card
items

Generates an array of items. The items represent the headlines of top level sections in an article.

 array —
  • See below
header

Renders a header for the table of contents.

 string —
  • —
uuid

Unique ID for the table of contents, randomly generated if not provided.

 string —
  • —
Table of Contents: items
Prop Name Description Type Default Value Option(s)
text

Renders the text for the linked item.

 string —
  • —
url

Renders the href for the linked item. This should be the id of the responding section. For example: #section-one-name.

 string —
  • —
active

Indicates that the item represents the current section being viewed.

 boolean —
  • —
Install Install 
  npm install @bolt/components-toc
Dependencies @bolt/components-smooth-scroll @bolt/core-v3.x @bolt/lazy-queue wc-context

toc

Basic Table of Contents Table of Contents is a list of anchor links that match the section headings of an article or page. Important Notes: Each item’s url should match the id of the particular section container or section heading. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with { items: [ { text: 'Section One', url: '#section-one', }, { text: 'Section Two', url: '#section-two', }, { text: 'Section Three', url: '#section-three', }, { text: 'Section Four', url: '#section-four', }, { text: 'Section Five', url: '#section-five', }, ] } only %}
HTML
<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-item url="#section-four"> Section Four </bolt-toc-item> <bolt-toc-item url="#section-five"> Section Five </bolt-toc-item> </bolt-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. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with { items: [ { text: 'Section One', url: '#section-one', }, { text: 'Section Two', url: '#section-two', active: true, }, { text: 'Section Three', url: '#section-three', }, ] } only %}
HTML
<bolt-toc> <bolt-toc-item url="#section-one"> Section One </bolt-toc-item> <bolt-toc-item url="#section-two" active> Section Two </bolt-toc-item> <bolt-toc-item url="#section-three"> Section Three </bolt-toc-item> </bolt-toc>

toc header variations

Visible Header A header for table of contents can be created by passing plain text into the header prop. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with { header: 'This is the header', items: [ { text: 'Section One', url: '#section-one', }, { text: 'Section Two', url: '#section-two', }, { text: 'Section Three', url: '#section-three', }, ] } only %}
HTML
<bolt-toc header="This is the header"> <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>

toc variants variations

Visual Variant By default, the Table of Contents is set to the card variant, but it can be changed to transparent via the variant prop. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with { header: 'This is the transparent variant', items: [ { text: 'Section One', url: '#section-one', active: true, }, { text: 'Section Two', url: '#section-two', }, { text: 'Section Three', url: '#section-three', }, ], variant: 'transparent', } only %}
HTML
<bolt-toc header="This is the transparent variant" variant="transparent"> <bolt-toc-item url="#section-one" active> 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>

toc use case sticky

Use Case: Sticky Table of Contents in a Grid Table of Contents can be manually set to sticky position via the sticky prop. Important Notes: Additional props are available to adjust the sticky placement in relation to other sticky elements on the same page: scrollOffsetSelector and scrollOffset. Demo
Example Additional Sticky Element

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

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

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.

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

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.
Twig
{% include '@bolt-components-toc/toc.twig' with { header: 'Table of Contents', items: [ { text: 'Section One', url: '#section-one', }, { text: 'Section Two', url: '#section-two', }, { text: 'Section Three', url: '#section-three', }, ], sticky: true, scrollOffsetSelector: '.js-sticky-target', scrollOffset: 20, } only %}
HTML
<bolt-toc header="Table of Contents" sticky scroll-offset-selector=".js-sticky-target" scroll-offset=20> <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>

tooltip docs

Tooltip

Floating label that briefly describes an element.

Published Last updated: 4.2.0 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
inverted

Invert the colors of the tooltip content. If true, content will be dark text on light background

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

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 This is what we call a tooltip. 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 Setting up preferred placement by using the placement prop. bottom Setting up preferred placement by using the placement prop. bottom-end Setting up preferred placement by using the placement prop.
left-start Setting up preferred placement by using the placement prop.
left Setting up preferred placement by using the placement prop.
left-end Setting up preferred placement by using the placement prop.
top-start Setting up preferred placement by using the placement prop. top Setting up preferred placement by using the placement prop. top-end Setting up preferred placement by using the placement prop. right-start Setting up preferred placement by using the placement prop. right Setting up preferred placement by using the placement prop. right-end Setting up preferred placement by using the placement prop.
Auto placement Auto placement only comes with fade-in transition. CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management

tooltip inverted

Inverted Colors By default, a tooltip has white text on black background. When you are building content in dark themes, you may utilize the inverted prop to invert the colors so it stands out better against the dark background. Such as this example This is an inverted tooltip. .

tooltip use case icon

Closed for replies Solved This is no bueno. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttito. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.

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.
File size: 25MB
<bolt-tooltip> <button type="button" class="e-bolt-button"> Download </button> <span slot="content">File size: 25MB</span> </bolt-tooltip>

trigger docs

Trigger

An call to action with no styles.

Published Last updated: 4.2.0 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

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

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

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

 string —
  • —
on_click_target

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

 string —
  • —
onClick
(deprecated)

Use on_click instead.

 — —
  • —
onClickTarget
(deprecated)

Use on_click_target instead.

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

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: 4.2.0 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
  • —
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 Search
  • —
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
  • —
disabled

Disables input as well as the search and cancel buttons.

 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

Ul

Vertical list of bulleted items.

Published Last updated: 4.2.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 %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Unordered List
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 —
  • See below
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.
Unordered List: items
Prop Name Description Type Default Value Option(s)
text

Item text

 string —
  • —
contentItems

Items pass to @bolt/text.twig

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

Warning! The Video component is deprecated. No new features will not be added to this component. See each page under Video section in the navigation to reference old documentations. For any new instances of a video please use the Drupal integrated Brightcove video component. Consult a Drupal dev and reference the Drupal documentations.

video thumbnail docs

Video Thumbnail

A graphical element that represents a video.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  duration: '4:55',
} 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 parent element.

 object —
  • —
content

Content of the video thumbnail. An image pointing to the video poster is recommended.

 any —
  • —
border_radius

Set the border radius of the video thumbnail.

 string none
  • none, small, large
aspect_ratio

Set the aspect ratio of the video thumbnail.

 string 16:9
  • 1:1, 16:9, 4:3
duration

Display the video duration that overlays the video thumbnail.

 string —
  • —
Install Install 
  npm install @bolt/components-video-thumbnail
Dependencies @bolt/core-v3.x

video thumbnail

Basic Video Thumbnail A video thumbnail is an image that displays a play icon and other relevant video information such as duration. Important Notes: Video thumbnail is a graphical element, it is not an interactive element. Interactions should be handled via links and buttons. It is commonly used as a trigger for video modals. View use case The content prop accepts both plain <img> element and Bolt Image component. When passing the Bolt Image component, ratio prop must be set to false and cover prop set to true. duration prop is optional while recommended. Demo
A Rock Climber
Video duration: 4:55
Twig
{% set image %} {% include '@bolt-elements-image/image.twig' with { attributes: { src: '/images/placeholders/tout-4x3-climber.jpg', alt: 'A Rock Climber', background: true, loading: 'lazy', } } only %} {% endset %} {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, duration: '4:55', } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail aspect ratio

Video Thumbnail Aspect Ratio Based on the use case, the aspect ratio of the thumbnail can be changed to fit a particular layout. Availalbe aspect ratios are: 1:1, 4:3, and 16:9. Important Notes: If you do not want the image to get cropped, make sure the source image has the same aspect ratio as the one you are using for the component. Demo
A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, aspect_ratio: '1:1', duration: '4:55', } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail border radius

Video Thumbnail Border Radius Border radius can be adjusted per use case. Demo
A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, duration: '4:55', border_radius: 'large', } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail use case modal

Video Thumbnail Modal Trigger A video thumbnail can be used as the trigger for a video modal. Important Notes: The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail. Demo
Twig
// Set up the trigger {% set video_thumbnail %} {% set image %} {% include '@bolt-elements-image/image.twig' with { attributes: { src: '/images/placeholders/tout-4x3-climber.jpg', alt: 'A Rock Climber', background: true, loading: 'lazy', } } only %} {% endset %} {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, duration: '4:55', } only %} {% endset %} {% include '@bolt-components-trigger/trigger.twig' with { content: video_thumbnail, display: 'block', attributes: { 'data-bolt-modal-target': '#js-modal-target', } } only %} // Set up the modal {% set video %} {% set video_embed %} <video-js data-account='1900410236' data-player='O3FkeBiaDz' data-embed='default' data-video-id='4892122320001' controls class="c-base-video"></video-js> {% endset %} {% include '@bolt-components-ratio/ratio.twig' with { children: video_embed, ratio: '16/9' } only %} {% endset %} {% include '@bolt-components-modal/modal.twig' with { content: video, width: 'optimal', spacing: 'none', scroll: 'overall', attributes: { id: 'js-modal-target', }, } only %}
HTML
Not available in plain HTML. Please use Twig.

d8 homepage

Placeholder for helper text.

Try Pega

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

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

Placeholder for helper text.

Try Pega

ペガジャパン株式会社とは？

Pega は顧客の仕事とデジタル プロセス オートメーションをつなぐナンバーワン ソフトウェアです。

今日はどんなお手伝いをしましょうか？

トレンドとは

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

誇大広告のSalesforce.comの本当に代わりとなるもの：Pega CRM

Salesforce.comをご検討中ですか？誇大宣伝を信じてはいけません。現代のトップ企業がぺガを選ぶ理由をご覧ください。

product landing

Placeholder for helper text.

Try Pega
Background banner of conference keynote Background banner of conference keynote

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

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

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

Placeholder for helper text.

Try Pega

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

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

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

Placeholder for helper text.

Try Pega

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

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

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

@bolt/card-w-teaser-list.twig
@bolt/card-w-teaser.twig

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

@bolt/card-w-teaser-list.twig
@bolt/card-w-teaser.twig

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

@bolt/card-w-teaser-list.twig
@bolt/card-w-teaser.twig

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

@bolt/card-w-teaser-list.twig
@bolt/card-w-teaser.twig

d8 news landing

Placeholder for helper text.

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

Press Releases Media Coverage
Share this page Share via LinkedIn

Featured Press Releases

See all press releases

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

Featured Media Coverage

See all media coverage

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

Related resources

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

d8 browse page

Placeholder for helper text.

Try Pega
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 Share via LinkedIn

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

Date

Topic

Industry

Cancel

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

Placeholder for helper text.

Try Pega
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 Share via LinkedIn

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

Date

Topic

Industry

Cancel

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

Placeholder for helper text.

Try Pega
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 Share via LinkedIn

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

Date

Topic

Industry

Cancel

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

Placeholder for helper text.

Try Pega

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

Placeholder for helper text.

Try Pega

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.

Learn more

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!

Learn more

Find Us Here Also

Showing 555 results in filter 1, filter 2, and "search term" (Clear filters)

Type

Location

Industry
At mobile breakpoints, search facets should appear in an overlay. This page does not show that behavior. See this temporary page for an example Styling details of the form fields such as font size may appear slightly different. That should not be reason to fail this during QA - the correct sizes will be pulled in when the site is updated to use the latest 1.x version of Bolt.

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

Placeholder for helper text.

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

The finished page should be different from what is shown here in the following ways (consider the Invision comps canonical in these respects):
* It should have an optional negative top margin to overlay the band above it
* At mobile breakpoints, the form should overlay the whole screen Styling details of the form fields such as font size may appear slightly different. That should not be reason to fail this during QA - the correct sizes will be pulled in when the site is updated to use the latest 1.x version of Bolt.

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 The "show more" link should open details in a modal. Use this Invision comp as the source of truth for that modal.

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

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

Event Sponsors

This section was originally designed as a simple 5-column Bolt grid. However, because Drupal already has a structure for putting partner logos within action blocks, it was redesigned to use that structure instead. It should be built using those existing structures, not rebuilt from the example below. However, the example below can still serve as the source-of-truth for the finished product.

Related Resources

@bolt/card.twig
@bolt/card.twig
@bolt/card.twig

event form example

Register now

(all fields are required)

d8 content hub

sticky navbar

Placeholder for helper text.

Try Pega
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 Video Anthem Video

Whitepaper

Anthem: Service Desktop

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

 Get the report

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

Whitepaper

Anthem: Service Desktop

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

 Get the report

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

Whitepaper

Anthem: Service Desktop

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

 Get the report

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

Whitepaper

Anthem: Service Desktop

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

 Get the report

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

Whitepaper

Anthem: Service Desktop

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

 Get the report

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

Whitepaper

Anthem: Service Desktop

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

 Get the report
Custom label Share via LinkedIn
Share this page Share via LinkedIn

blog homepage

Placeholder for helper text.

Try Pega

Future Proof

The next best ideas in digital transformation.

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

Challenge

Functional Area

Topic

Industry

Cancel

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

Placeholder for helper text.

Try Pega
3 Capabilities Insurers Need for Outstanding Customer Engagement

3 Capabilities Insurers Need for Outstanding Customer Engagement

By Kate Fowler, Sep 25 2018
Share Share via LinkedIn Copying...
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 Share via LinkedIn Copying...
Copied!

careers homepage

Powerful software. Powered by you.

Powerful software. Powered by you.

Placeholder for rest of the page

Anthem Video Anthem Video

Eyebrow

Headline

 Button
Anthem Video Anthem Video

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

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

d8 calculator

Real-time Decisioning Revenue Calculator

Find out the total revenue benefit of taking a real-time, next-best-action approach to customer engagement, focused on retention and cross-sell.

d8 results

Recalculate

Email my results

Your total benefit from a real-time, next-best-action approach is 429,457,193

The Value of Customer Retention

The Value of Customer Retention

Deeper relationships. Lasting benefits.

Pega protects your revenue by proactively predicting churn, then delivering hyper-personalized next best actions that retain customers, buiild long-term loyalty, and reduce discounts.

Total Retention Benefit: $207,500,000

Your churn rate today 10%

Your churn rate with Pega Customer Decision Hub 9%

Number of additional customers retained 100,000

Cost avoidance of replacing churned customers 20,000,000

Revenue loss avoidance with Pega Customer Decision Hub 187,500,000

Upsell and Cross-Sell Benefits

Upsell and Cross-Sell Benefits

Make selling more empathetic.

With Pega’s real-time decisioning you’ll know when a customer is in-market, and how to convert the sale. You’ll trigger relevant offers at exactly the right time - increasing your accept rates and maximizing customer lifetime value.

Total Uppsell/Cross-sell Benefit: $220,833,333

Your current value of a customer $1,875

Your value of a customer with Pega Customer Decision Hub $1,897

Percent increase in customer value from improved upsell/cross-sell presentation and conversion rates 1%

Page - Completed Training

Placeholder for helper text.

Try Pega

Dashboard

Completed Training

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)

Placeholder for helper text.

Try Pega

Dashboard

My Favorite Training

Module

Business Process Modeling - Advanced Topics

6 Topics

40 mins remaining

Dicta et dolores voluptas doloribus qui neque repellendus. Aut perspiciatis dolorem alias sit est est. Accusamus et perspiciatis consequatur quas ad.

Challenge

Configuring a case type

14 Steps

In progress

Neque eveniet neque pariatur dolores iure nobis at. Provident error sed quis quae ad. Magni quae nihil eveniet et assumenda.

Module

Numquam neque blanditiis.

9 Topics

40 mins remaining

Repellendus corporis nihil aut quia suscipit asperiores. Neque maiores nemo eligendi ipsam temporibus. Sed quia atque ipsum expedita.

Page - Dashboard (My Missions)

Placeholder for helper text.

Try Pega

Dashboard

My Missions (12)

Mission

Eum est ipsum est.

1 Module

10 mins

Placeat quis corporis dolor minima. Perferendis vel totam eveniet et cupiditate.

Last activity: 3 days ago

Mission

Voluptatem cumque ducimus repellat.

4 Modules

1 Challenge

10% complete

Eos excepturi non cum similique cum. Dolore est dolorem perferendis maiores. Quia tenetur eveniet autem at dolorum quo.

Last activity: 12/21/19

Assigned

Mission

Autem aut.

7 Modules

1 Challenge

10% complete

Quaerat placeat in necessitatibus tenetur omnis. Similique molestiae sit modi qui praesentium ad aut ut. Reprehenderit iusto quas dignissimos quis molestiae assumenda qui laborum.

Last activity: 12/21/19

Mission

Est est deleniti.

1 Module

10 mins

Quo doloremque et maiores animi nisi. Voluptas a eos eius in ea hic dolores.

Last activity: 3 days ago

Mission

Ratione minima et voluptatibus.

9 Modules

1 Challenge

10% complete

Ut illo aut enim est doloremque corporis veniam sed. Quis eum reprehenderit rerum aut iusto et. Et sed illum possimus dolor est reprehenderit.

Last activity: 12/21/19

Assigned

Mission

Doloribus corrupti ullam veritatis.

7 Modules

1 Challenge

10% complete

Labore veritatis excepturi consequuntur exercitationem vel laboriosam non. Quis sequi quis cupiditate quidem repudiandae. Voluptate omnis dignissimos aut molestiae et.

Last activity: 12/21/19

Mission

Maxime dignissimos.

5 Modules

1 Challenge

25% complete

Perferendis ea officia quos nihil. Consequatur consequatur nobis ipsa ratione et error.

Last activity: 3 days ago

Mission

Dolor officiis quisquam.

9 Modules

1 Challenge

10% complete

Magnam odit aut nisi nam sit. Eveniet quasi id cumque aperiam eos. Fuga labore laboriosam ipsam eum molestiae sint perspiciatis blanditiis.

Last activity: 12/21/19

Assigned

Mission

Voluptatem illum enim veniam.

9 Modules

1 Challenge

10% complete

Minus earum esse vitae sed aut. Qui ut eaque possimus blanditiis vel sit dolor. Dolorum quas voluptas nihil ipsam tempora dolores a aut.

Last activity: 12/21/19

Mission

Eos modi autem vel.

10 Modules

1 Challenge

25% complete

Ut beatae omnis officia eos explicabo numquam nihil ut. Nihil quo quo aut at.

Last activity: 3 days ago

Mission

Pariatur dolor rerum deleniti.

9 Modules

1 Challenge

10% complete

Ut adipisci dolor esse eligendi nisi est. Soluta et blanditiis atque optio repellendus.

Last activity: 12/21/19

Assigned

Mission

Et ea fugiat cupiditate.

5 Modules

1 Challenge

10% complete

Cum et asperiores commodi deserunt. Sunt assumenda maiores ut eos neque totam. Eaque sint qui nesciunt voluptas et error.

Last activity: 12/21/19

Page - Dashboard (Add Mission)

Placeholder for helper text.

Try Pega

Welcome back Justin!

Let's change the way the world builds software.

My Favorite Training My Completed Training

My Missions

Add Mission

Add Mission

In Progress

Module

Ducimus praesentium sint.

5 Topics

40 mins remaining

Quia necessitatibus sit sit dolorem quia est quaerat. Libero quia animi ab necessitatibus cupiditate et quis. Reprehenderit necessitatibus molestias blanditiis tempora maxime.

Last activity: 3 days ago

Module

Ex assumenda eos.

10 Topics

In progress

Ut non tempora exercitationem ut exercitationem eum placeat qui. Sed vel quasi officia officiis ipsa.

Last activity: 12/21/19

Recommended Missions

Mission

Sint quisquam rem.

7 Modules

1 Challenge

25% complete

Facere excepturi perferendis perferendis alias soluta repellat. Recusandae voluptatum voluptate sed aut aut. Voluptatibus enim enim temporibus est aliquam asperiores sint.

Mission

Aut eos pariatur ut.

7 Modules

1 Challenge

25% complete

Consequatur voluptate eos et ad eveniet. Aut voluptas non et odio.

Mission

Ipsa explicabo et facere.

9 Modules

1 Challenge

25% complete

Officiis velit ex est. Ut molestiae est et culpa qui.

New Training

Mission

Quidem ea commodi dolorum.

7 Modules

1 Challenge

25% complete

Sint voluptate fugit eum neque est excepturi. Laboriosam quisquam tenetur qui velit sunt praesentium et porro. Veniam quia debitis libero harum a.

Module

Quidem maxime qui.

10 Topics

In progress

Neque soluta repudiandae aut. Labore ex officiis est animi soluta aspernatur totam. Doloremque aut et rem error odio enim sed.

Module

Cupiditate nihil voluptatibus ad.

10 Topics

40 mins remaining

Nobis sint labore et fuga deleniti quis similique. Corrupti minus sint rerum quia doloribus. Omnis corporis qui aut placeat dolorum.

Page - Dashboard

Placeholder for helper text.

Try Pega

Welcome back Justin!

Let's change the way the world builds software.

My Favorite Training My Completed Training

My Missions

Mission

Cupiditate amet non sunt.

1 Module

10 mins

Magni ipsa ab rerum doloremque laborum. Hic porro minus dolore aut. Nihil inventore voluptatem voluptate quisquam doloremque neque.

Last activity: 3 days ago

Mission

Eveniet quo est.

2 Modules

1 Challenge

10% complete

Ullam autem quo vitae officia eligendi in distinctio. Sed recusandae quasi quos et reiciendis aut et.

Last activity: 12/21/19

Assigned

Mission

Sapiente commodi porro.

7 Modules

1 Challenge

10% complete

Occaecati et adipisci voluptatum occaecati blanditiis et perferendis. Est suscipit id provident doloremque quia. Excepturi cumque temporibus totam totam nihil.

Last activity: 12/21/19

Mission

Nulla dolorem reprehenderit.

1 Module

10 mins

Nulla vel quis et quos iusto. Aliquam incidunt nesciunt porro accusamus. Officiis et autem esse veritatis incidunt quia ut.

Last activity: 3 days ago

Mission

Adipisci est quis.

6 Modules

1 Challenge

10% complete

Ullam ipsam culpa eaque facilis earum magni adipisci qui. Ipsam illo tempore numquam porro nobis cumque sunt. Ducimus qui id culpa et ullam non dolor.

Last activity: 12/21/19

Assigned

Mission

Quod esse ea cumque.

2 Modules

1 Challenge

10% complete

Consequuntur voluptates consectetur earum a. Nihil molestiae iste sequi deleniti.

Last activity: 12/21/19

Mission

Culpa voluptatum.

7 Modules

1 Challenge

25% complete

Illo ut sit eaque dignissimos. Repellendus exercitationem quis quia.

Last activity: 3 days ago

Mission

Dolore dolorum laboriosam qui.

5 Modules

1 Challenge

10% complete

Et distinctio qui dolorem sint qui. Occaecati reiciendis laborum voluptatibus qui. Ut cumque quis provident tenetur error.

Last activity: 12/21/19

Assigned

Mission

Dolore aut aut.

2 Modules

1 Challenge

10% complete

Consequatur et in ducimus dolores minima beatae ut. Fuga itaque labore laudantium est neque quia beatae. Sunt voluptate voluptates veniam sunt consectetur.

Last activity: 12/21/19

Mission

Aut molestiae amet.

6 Modules

1 Challenge

25% complete

Tempora eum aliquam quaerat dolorum cumque quam quod. Omnis quis ut quaerat natus. Molestias et molestiae dolores impedit nam ut.

Last activity: 3 days ago

Mission

Corrupti quos veniam quod.

4 Modules

1 Challenge

10% complete

Sint eius sed delectus laborum et nam. Quia placeat consequatur ut quod. Consequatur aperiam beatae nobis voluptatem non sed officiis ea.

Last activity: 12/21/19

Assigned

Mission

Temporibus ullam et totam.

7 Modules

1 Challenge

10% complete

Et et nobis quidem quod. Explicabo pariatur corporis quidem culpa eum incidunt. Illum doloribus molestias molestias.

Last activity: 12/21/19

In Progress

Module

Distinctio aut consectetur.

8 Topics

40 mins remaining

Possimus dolores modi est impedit est. Est placeat quam minima reiciendis. Alias ipsam ut qui harum expedita eligendi.

Last activity: 3 days ago

Module

Fugit dolores culpa eos.

4 Topics

In progress

Quam praesentium magni reprehenderit nobis et. Et dolor enim enim voluptatem voluptas quasi. Aut porro quia excepturi debitis.

Last activity: 12/21/19

Recommended Missions

Mission

Magnam itaque quo.

8 Modules

1 Challenge

25% complete

Saepe modi id quo ab quas aut. Quia quidem ipsam sed eum voluptas.

Mission

Ut quas eum.

8 Modules

1 Challenge

25% complete

Et quia qui officiis et. Modi ab similique a impedit magnam suscipit itaque impedit. Perferendis facere cum ut doloremque quas vel consequatur.

Mission

In dolor sed reiciendis aut.

8 Modules

1 Challenge

25% complete

Optio libero doloremque officia vel suscipit ducimus illum. Voluptatibus sit dolor est impedit nulla laudantium inventore.

New Training

Mission

Saepe in sunt atque.

7 Modules

1 Challenge

25% complete

Debitis autem rem hic consectetur dolore rem. Praesentium qui perspiciatis et aut ut aut rerum. Numquam aspernatur culpa accusamus in.

Module

Suscipit dolorem est ut.

4 Topics

In progress

Debitis inventore et architecto pariatur facilis accusamus eaque. Eum in inventore adipisci dolor asperiores ut.

Module

Dolore quia aperiam odio.

8 Topics

40 mins remaining

Laudantium cumque similique enim rerum. Earum veritatis numquam aut molestias aliquam tempore et non.

Page - Search Results (Archived)

Placeholder for helper text.

Try Pega

Main Search

Archived Search Results

Looking for instructor-led training?

This content has been archived.

Type

Skill Level
View archived training

  • Mission

    Qui quo aliquam optio nihil.

    1 Module

    10 mins

  • Eum excepturi quam excepturi aspernatur voluptas quis praesentium assumenda. Et explicabo occaecati distinctio excepturi. Inventore iste nostrum voluptate fuga quod dolor sint. Impedit quod tempore excepturi numquam praesentium non saepe.

  • Challenge

    Nihil atque.

    10 tasks

    Completed

  • Quasi ea quae rem magnam ipsa. Iusto molestias animi et. Enim molestias at cupiditate ut magnam autem iure.

  • Module

    Totam dolorem eos iste.

  • Maxime ullam unde aut quos. Vel impedit consequuntur quisquam nesciunt. Enim sed quibusdam deleniti molestias commodi dolorem eum qui. Aperiam reiciendis accusamus adipisci est alias.

  • Certification

    Quasi itaque est in.

  • Exercitationem beatae excepturi non ut id dolore non rerum. Ex sint omnis et ex vero veritatis quidem. Maxime voluptatem expedita expedita unde vel.

  • Module

    Name of module that will take up two lines of text

  • Distinctio dolores vero saepe quis autem sit praesentium. Sit quis nihil nam perspiciatis. Et repellat aut rem quia tenetur consequatur aut.

  • Mission Test

    Fugit et quam voluptatem porro.

  • Qui repellat iure hic magnam eum. Et velit magnam distinctio perferendis. Repellat modi quia inventore minima. Rerum distinctio unde qui nihil ad dolore voluptates.

  • Mission Exercise

    Magnam ut autem voluptas.

  • Et optio quos ut et. Eum iure quia quo quo nisi in est. Tempore quis fugit quod.

  • Challenge

    Nisi est id iusto.

  • Id ipsum perferendis dignissimos quisquam ut est quia unde. At quos sequi vero quis dolore beatae. Placeat occaecati et dolor.

  • Mission

    Quia enim beatae maiores.

  • Minima sit soluta libero harum. Deleniti rerum optio aut quibusdam nihil vel. Accusamus neque aut distinctio voluptatem nostrum. Debitis laboriosam eveniet repellendus autem ea.

  • Module

    Dicta sint omnis magnam.

  • Perferendis iste quia reiciendis iure quia. Velit accusantium repellat atque iure alias. Rerum expedita magnam corporis.

Instructor-led Training

View the class schedule to see the latest in person training

Page - Search Results (Filtered)

Placeholder for helper text.

Try Pega

Search Results

Looking for instructor-led training?
Challenge (< class="e-bolt-text-link">Clear filters)

Type

Skill Level
View archived training

  • Challenge

    Id ipsum nobis.

    2 tasks

    Completed

  • Saepe ipsam occaecati vero. Quidem ut aliquid eaque et enim veniam ut vel. Esse et nihil nihil et vel.

  • Module

    Eos perferendis incidunt.

  • Qui libero voluptatem quis dolorem quisquam in voluptatem. Commodi aliquid blanditiis et. Corporis voluptate quasi esse laboriosam minus veniam quas in.

  • Certification

    Et beatae.

  • Nisi laborum blanditiis a odio est. Eveniet vitae illum nobis ab. Ullam perspiciatis incidunt vel consequatur aut mollitia.

  • Module

    Name of module that will take up two lines of text

  • Ut quo eos aut inventore quia. Consectetur ipsam et dolore reprehenderit. Dolor voluptates nihil atque sed illum.

  • Mission Test

    Libero tenetur qui neque.

  • Occaecati nisi ad consequatur nihil minus et. Ipsa itaque consequatur reprehenderit maiores voluptas vel cupiditate distinctio. In nemo earum corrupti repellendus eveniet. Dolorem et vitae voluptas dolor.

  • Mission Exercise

    Maxime itaque ipsum.

  • Exercitationem iusto similique facere debitis nam quis quisquam. Alias possimus labore aliquam suscipit cumque laboriosam. Qui expedita doloribus quidem in aut eos commodi. Dolores veniam ea ut architecto autem dolorem eaque.

  • Challenge

    Dolore voluptate quia.

  • Consequatur molestiae soluta quibusdam fugiat architecto. Ipsam soluta consectetur et autem assumenda est. Numquam incidunt harum architecto voluptatem eum iure.

  • Mission

    Accusantium vel at.

  • Omnis reiciendis provident velit perspiciatis tenetur minus. Voluptatibus et voluptates nostrum occaecati mollitia repudiandae. Et et animi corrupti aspernatur voluptas ut aut.

  • Module

    Ut id rerum eos.

  • Voluptatum dolores placeat aperiam eos quasi et. Vel sequi distinctio autem id accusantium rerum. Quo eligendi eum vero mollitia recusandae dignissimos iste saepe.

Instructor-led Training

View the class schedule to see the latest in person training

Page - Search Results

Placeholder for helper text.

Try Pega

Search Results

Looking for instructor-led training?

Type

Skill Level
View archived training

  • Challenge

    Voluptatem recusandae quisquam.

    11 tasks

    Completed

  • Quidem illo velit assumenda ea quaerat quo autem. Suscipit porro aut impedit ipsum fugit cum. Nemo repellat consequatur reiciendis.

  • Module

    Et rerum ut aut.

  • Repellat eaque libero qui voluptas quam rerum. Quo quam autem laudantium sint eum id. Dolore assumenda laudantium ut voluptates magni voluptatem. Omnis labore eligendi blanditiis quae sit.

  • Certification

    Blanditiis aut dolores.

  • Et atque iure est ea dolore quo. Impedit laborum cupiditate suscipit explicabo odit quaerat et. Dolores aperiam omnis quis unde eaque voluptatibus et quae.

  • Module

    Name of module that will take up two lines of text

  • Consequuntur maxime sit doloremque et sed. Incidunt omnis qui id nemo neque. Corrupti nostrum blanditiis nulla nihil et nulla. Quibusdam nam laudantium deleniti. Quos earum ut inventore ea quae ut et.

  • Mission Test

    Mollitia quas.

  • Facere vel omnis a corrupti suscipit illo. Alias at dicta sunt libero sunt qui ut. Omnis earum voluptas voluptas autem. Et vel consequatur aspernatur non vero porro.

  • Mission Exercise

    Deleniti tempore ut.

  • Aut voluptas voluptatem ullam quia laboriosam ad. Recusandae voluptatem iste voluptas cupiditate error autem aliquid. Est qui voluptatem sunt sed dolore. Sed consequatur et est odit.

  • Challenge

    Praesentium repellat voluptas.

  • Aut qui adipisci non asperiores exercitationem qui quos. Veritatis est harum reiciendis sapiente alias. Placeat excepturi et qui aperiam. Ut sapiente debitis tempore earum iure corrupti distinctio.

  • Mission

    Quia autem iusto adipisci.

  • Quidem nostrum voluptas velit illum. In voluptas ut iure in.

  • Module

    Reiciendis et minus impedit.

  • Maiores molestias recusandae enim adipisci. Necessitatibus quis sed labore est. Dolor et et autem iste et consequatur quia. Natus reprehenderit ea sint in est.

Instructor-led Training

View the class schedule to see the latest in person training

Page - T1 Landing - Certification Exam

Placeholder for helper text.

Try Pega

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)

Placeholder for helper text.

Try Pega

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

Placeholder for helper text.

Try Pega

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

Placeholder for helper text.

Try Pega

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 Embed
Return to mission

Page - T1 Landing - Mission Test

Placeholder for helper text.

Try Pega

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 Embed
Return to mission

Page - T1 Landing - Mission Landing (Hide Completed)

Placeholder for helper text.

Try Pega

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

  • Challenge

    Sed esse eaque ullam itaque.

    14 tasks

    Completed

  • Eum adipisci earum explicabo natus earum ea magnam. Quia neque illum dicta ut velit sed ut.

  • Module

    Atque voluptatem pariatur.

  • Velit distinctio pariatur laudantium velit. Incidunt quo quam repellendus molestiae architecto enim sit ut. Expedita perspiciatis eius temporibus id quo iste. Cum modi id ullam dolores ipsum quia.

  • Module

    Name of module that will take up two lines of text

  • Quibusdam vitae eum nihil voluptates dolorum inventore. Vero ab soluta ex excepturi quos aut molestiae. Odio assumenda molestias a nobis ducimus modi.

  • Mission Test

    Nihil animi.

  • Corporis at dolore omnis esse. Ut error non quas doloribus earum iure sunt. Et architecto ut magnam. Voluptatibus ab corrupti doloribus odit nisi inventore.

  • Mission Exercise

    Aut harum corrupti.

  • Quis sint sunt nam quia. Sequi magnam repudiandae dolore accusantium.

  • Challenge

    Vel fugiat occaecati ex.

  • A nulla molestiae in officia aut sequi non. Adipisci soluta sed quisquam. Eum cumque autem placeat libero. Saepe commodi aut eum officiis facere.

  • Mission

    Quis dolorum qui magni.

  • Asperiores similique sint ipsum quia sed consequatur nostrum sunt. Adipisci quia consectetur tenetur repudiandae sequi. Et ipsum et facere corrupti ducimus fugiat et. Non et natus qui voluptatum ut.

  • Module

    Illo rem voluptas velit.

  • Et laudantium ut possimus unde maiores et et. Facere eum sed eaque. Et voluptas aut est nihil velit unde.

Page - T1 Landing - Mission Landing

Placeholder for helper text.

Try Pega

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

  • Challenge

    Non expedita et.

    13 tasks

    Completed

  • Atque aut accusamus dignissimos aut voluptatem. Reiciendis vero veritatis necessitatibus quo sit aut quis nihil. Ex exercitationem ut quas.

  • Module

    Eveniet et repellendus.

  • Impedit recusandae ut enim quaerat debitis. Consequatur et tempora voluptatem doloribus non vitae animi ut. Sint accusamus voluptatem amet architecto id.

  • Module

    Name of module that will take up two lines of text

  • Quos tempora eaque eaque sunt architecto velit facilis. Vitae libero voluptas reiciendis veniam. Et tenetur sapiente ut vel. Odio et sed quibusdam occaecati neque.

  • Mission Test

    Saepe et.

  • Unde veritatis nobis accusamus cum qui. Dolore impedit sapiente libero dolores. Consectetur voluptatem eum quaerat et.

  • Mission Exercise

    Mollitia reprehenderit.

  • Sint iusto dignissimos natus consequatur sunt iusto. Voluptas tempora praesentium dolorem iusto neque officiis.

  • Challenge

    Dolores magni est aut.

  • Doloribus amet soluta quam. Laudantium in doloribus optio modi amet exercitationem eum. Non itaque corrupti quis et ducimus voluptate. Quidem et incidunt error consequuntur quis voluptas.

  • Mission

    Quaerat minima ipsam et.

  • Dolorum magni id molestias mollitia earum eos architecto. Aut odit ad sit pariatur ratione. Aspernatur in cumque a. Aut possimus non quasi.

  • Module

    Ea dolorem beatae maxime.

  • Ut fugiat sit cupiditate nemo tempore excepturi et. Est corrupti eum qui voluptatibus cumque unde nulla. Aut aperiam iusto consequuntur alias voluptatem libero in et. Velit et possimus provident suscipit ducimus labore.

Page - T1 Landing - Module Landing

Placeholder for helper text.

Try Pega

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

Placeholder for helper text.

Try Pega

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

Placeholder for helper text.

Try Pega
Previous Topic Next Topic
Pega Community logo

Note: The following content, referenced from Pega Community, is included here to help you better achieve the module learning objectives.

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.

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
Previous Topic Next Topic

Did you find this content helpful?

28% found this useful

Want to help us improve this content?

best of content

Component - Quick Filters

Quick Filters (Best of Content) Quick filters are an alternative way to display the traditional search facets (checkbox based). This is just example code. It will become obsolete once the relevant CSS and JS are moved to the www theme. Please reference the latest code in the www theme as the source of truth. Important Notes: This is a minimal component with a few CSS classes. JavaScript and js-* classes are required. Example is shown in the code snippet below. Demo

More filters

Category

Category

Category
Twig
Not available in Twig. Please use plain HTML.
HTML
<form> <div class="c-www-quick-filters"> <div class="c-www-quick-filters__list-wrapper js-www-quick-filters-scroll-wrapper"> <ul class="c-www-quick-filters__list js-www-quick-filters-scroll"> // Render each quick filter as a list item. <li class="c-www-quick-filters__list-item"> <input type="checkbox" id="filter-id" class="c-www-quick-filters__input"> <label for="filter-id" class="e-bolt-button e-bolt-button--secondary e-bolt-button--small">Filter label</label> </li> </ul> </div> <div class="c-www-quick-filters__more"> // Assemble "more filters" button and modal here. The modal would contain all possible filters. // {% include '@bolt-elements-button/button.twig' with { // content: 'More filters', // size: 'small', // hierarchy: 'secondary', // icon_before: icon_filter, // attributes: { // type: 'button', // 'data-bolt-modal-target': '.js-bolt-modal', // }, // } only %} // {% include '@bolt-components-modal/modal.twig' with { // attributes: { // class: 'js-bolt-modal', // }, // ... // } only %} </div> </div> </form>
CSS
@import '@bolt/core-v3.x'; $www-quick-filters-overflow-shadow-width: var(--bolt-spacing-x-small); $www-quick-filters-button-shadow-offset: var(--bolt-spacing-y-medium); .c-www-quick-filters { display: flex; justify-content: center; white-space: nowrap; margin: calc(#{$www-quick-filters-button-shadow-offset} * -1) 0 calc(#{$www-quick-filters-button-shadow-offset} * -1) calc(#{$www-quick-filters-button-shadow-offset} * -0.5); } .c-www-quick-filters__list-wrapper { flex-basis: auto; flex-grow: 0; flex-shrink: 1; position: relative; overflow: hidden; transition: margin-left var(--bolt-transition); &:before, &:after { content: ''; opacity: 0; position: absolute; top: 0; bottom: 0; width: calc(#{$www-quick-filters-overflow-shadow-width} * 2); pointer-events: none; background: radial-gradient(rgba(black, 0.2), rgba(black, 0) 50%); } &:before { left: calc(#{$www-quick-filters-overflow-shadow-width} * -1); z-index: 1; } &:after { right: calc(#{$www-quick-filters-overflow-shadow-width} * -1); } &.is-overflowing { &.is-not-start { margin-left: calc(#{$www-quick-filters-button-shadow-offset} / 2); } &.is-not-start:before, &.is-not-end:after { opacity: 1; } & + .c-www-quick-filters__more { margin-left: var( --bolt-spacing-x-small ); // This is the spacing between the quick filters and the more filters button. } } } .c-www-quick-filters__list, .c-www-quick-filters__more { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; padding: #{$www-quick-filters-button-shadow-offset} 0; } .c-www-quick-filters__list { @include bolt-horizontal-scroll; position: relative; margin: 0; list-style: none; } .c-www-quick-filters__list-item { padding-right: var(--bolt-spacing-x-xsmall); &:first-child { padding-left: #{$www-quick-filters-overflow-shadow-width}; } &:last-child { padding-right: #{$www-quick-filters-overflow-shadow-width}; } } .c-www-quick-filters__input { @include bolt-visuallyhidden; & + .e-bolt-button { padding-right: var(--bolt-spacing-x-medium); padding-left: var(--bolt-spacing-x-medium); &:after { transition: opacity var(--bolt-transition); } } &:checked + .e-bolt-button, &:focus + .e-bolt-button { transform: translate3d(0, 0, 0); } &:focus + .e-bolt-button { outline: var(--bolt-focus-ring); outline-offset: 2px; } &:checked + .e-bolt-button { color: var(--m-bolt-link); box-shadow: 0 0 0 1px var(--bolt-color-navy-light); background-image: linear-gradient( rgba(bolt-color(gray, light), 0.2), rgba(bolt-color(gray, light), 0.2) ); &:after { content: ''; opacity: 1; top: 50%; left: 0; transform: translate3d( calc(100% + var(--bolt-spacing-x-xxsmall)), -60%, 0 ) rotate(45deg); width: 0.5em; height: 0.75em; border-right: 2px solid var(--m-bolt-headline); border-bottom: 2px solid var(--m-bolt-headline); border-radius: 0; box-shadow: none; } } &:not(:checked):focus + .e-bolt-button { &:after { display: none; } } &:checked:focus + .e-bolt-button { color: var(--m-bolt-link); box-shadow: none; } }
JavaScript
const quickFiltersScroll = el => { if (!el) return; const wrapper = el.closest('.js-www-quick-filters-scroll-wrapper'); const handleScroll = () => { const wrapperWidth = wrapper.offsetWidth; const buffer = 1; // Use buffer due to sub-pixel rounding differences between scroll and wrapper width const notStart = el.scrollLeft > buffer; const notEnd = el.scrollLeft < el.scrollWidth - wrapperWidth - buffer; const isOverflowing = el.scrollWidth > wrapperWidth; if (isOverflowing) { wrapper.classList.add('is-overflowing'); if (notStart) { wrapper.classList.add('is-not-start'); } else { wrapper.classList.remove('is-not-start'); } if (notEnd) { wrapper.classList.add('is-not-end'); } else { wrapper.classList.remove('is-not-end'); } } else { wrapper.classList.remove('is-overflowing'); wrapper.classList.remove('is-not-start'); wrapper.classList.remove('is-not-end'); } }; el.addEventListener('scroll', handleScroll, { passive: true }); window.addEventListener('resize', handleScroll, { passive: true }); handleScroll(); // Call once onload to setup initial classes }; const quickFiltersScrollEl = document.querySelector( '.js-www-quick-filters-scroll', ); if (quickFiltersScrollEl) { quickFiltersScroll(quickFiltersScrollEl); }

community docs

Full page mockups are not available on this view-all page. Use the side nav to explore each page individually.

wysiwyg kitchen sink

Placeholder for helper text.

Try Pega

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: 4.2.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: 4.2.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[string] —
  • —
scripts *

URL paths to JS files that the editable content requires

 array[string] —
  • —
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


editor blockquote


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

editor modal


editor 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

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.

Slots

Name Requred? Description
top No
right No
bottom No
left No

character


Slot: top Slot: left Slot: right Slot: bottom

character kitchen sink

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.

connection


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.

status dialogue bar


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>
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

icon group


Horizontal Icon Group Vertical Icon Group

micro journeys solo


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


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


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


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


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


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


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


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

accordion no shadow

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 Share via LinkedIn Copying...
Copied!

card

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

 This is a button

image no shadow

Mountains Mountains

navbar with content

Placeholder for helper text.

Try Pega

navbar with list

Placeholder for helper text.

Try Pega

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

navbar no title

Placeholder for helper text.

Try Pega

navbar title tags

Placeholder for helper text.

Try Pega

navbar center




navbar with offsets

Placeholder for helper text.

Try Pega
Example Additional Sticky Element

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita nesciunt necessitatibus, nostrum aliquam sed qui et totam deserunt quasi. Quae fugit aliquam velit aperiam at quibusdam tempore repellat commodi sapiente!

popover auto open

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

popover no shadow

Popover with no-shadow

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

Popover in a form

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

popover boundary

Placeholder for helper text.

Try Pega
Example Additional Sticky Element
This is the content of the popover with a call to action .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Example Additional Sticky Element
This is the content of the popover with a call to action .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Example Additional Sticky Element
This is the content of the popover with a call to action .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

share

Share this page Share via LinkedIn Copying...
Copied!

tabs no shadow

Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Tab label 4
Tab panel 4
Tab label 5
Tab panel 5
Tab label 6
Tab panel 6

tabs deep linking

Tab label 1
Tab content 1
Tab label 2
Tab content 2
Tab label 3
Tab content 3

tooltip no shadow

Tooltip with no-shadow

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 This is what we call a tooltip. 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 in a form

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 This is what we call a tooltip. 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 boundary

Placeholder for helper text.

Try Pega
Example Additional Sticky Element
This is the content of the tooltip with a call to action .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Example Additional Sticky Element
This is the content of the tooltip with a call to action .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Example Additional Sticky Element
This is the content of the tooltip with a call to action .

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, expedita? Aliquam dolore sequi beatae distinctio fugiat, nam repellat! Asperiores, recusandae! Laboriosam excepturi assumenda ab eveniet nulla molestias, modi quae nesciunt.