Bolt Clearfix

yarn add @bolt/components-accordion

Install

Source code

Dependencies

handorgel

Overview

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

Install via NPM

npm install @bolt/components-accordion

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
items	All of the items in the accordion. Each item should contain a header and a content.	`array`	—	[items]: Type: `object` Properties: `trigger` Trigger content of an item. Type: `string`, `object`, `array` `content` Expandable content of an item. Type: `string`, `object`, `array` `open` Automatically expand an item on page load. Type: `boolean` Enum: `true` or `false` `inactive` Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden. Type: `boolean` `uuid` Unique ID for an item, randomly generated if not provided. Type: `string` `open_label` Accessible label for the open trigger to expand an item. Type: `string` `close_label` Accessible label for the close trigger to collapse an item. Type: `string` `trigger_spacing` Overrides the default trigger spacing (by default, inherited from the parent bolt-accordion) Type: `string` Enum: `none`, `xsmall`, `small`, `medium`, `large` `content_spacing` Overrides the default content spacing (by default, inherited from the parent bolt-accordion) Type: `string` Enum: `none`, `xsmall`, `small`, `medium`, `large`
single	Allow only one section to open at a time.	`boolean`	`false`	`true` or `false`
no_separator	Hides the separator in between items.	`boolean`	`false`	`true` or `false`
box_shadow	Creates a box shadow around the accordion.	`boolean`	`false`	`true` or `false`
spacing	Controls the inset spacing of each item.	`string`	`medium`	`none`, `xsmall`, `small`, `medium`, `large`
icon_valign	Vertically align the accordion trigger content and trigger icon.	`string`	`center`	`top` or `center`

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

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

Single open item

Open one of these

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 items

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.

Will close the others

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)

Each of these

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 items

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.

Can open/close independently

Open Accordion Close Accordion

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

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

Accordion with separators

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

In between the

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 items

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

There are no 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.

In between the

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 items

Open Accordion Close Accordion

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

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

Box shadow

Accordion item 1

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

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

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

Accordion item 1

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

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

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

Accordion item 1

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

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

Open Accordion Close Accordion

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

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

Icon Valign: top

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

Accordion item 2

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

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

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

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

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

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.

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.

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

Inactive Accordion item

Open Accordion Close Accordion

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

Expand this to see an image

Open Accordion Close Accordion

Expand this to see a table

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

Expand this to see a share tool and a paragraph of text

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.

Expand this to see a video

Open Accordion Close Accordion

Expand this to see a nested accordion

Open Accordion Close Accordion

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

Open Accordion Close Accordion

This is the accordion content.

Expand this to see tabs

Open Accordion Close Accordion

Tab label 1

Tab panel

Tab label 2

Tab panel

Tab label 3

Tab panel

Expand this to see a carousel

Open Accordion Close Accordion

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Example Q&A

What are the different ways we can debug an issue in Rest OR SOAP Connector?

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.

If the mapping of the data properties is in other systems then how can we retrieve those properties using REST Connector?

Trigger spacing: small

Open Accordion Close Accordion

This item has the trigger_spacing prop defined.

Trigger spacing: medium

Open Accordion Close Accordion

This item has the trigger_spacing prop defined.

Web Component Usage

Bolt Accordion is a fully client-side renderable web component. Add the bolt-accordion element containing any number of bolt-accordion-item elements to create an accordion. Inside each bolt-accordion-item mark the "trigger" content with the attribute slot="trigger". Everything else is considered accordion "content".

Accordion item 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Accordion item 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Accordion item 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

<bolt-accordion> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 1</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 2</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 3</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> </bolt-accordion>

Prop Usage

Configure the accordion with the properties specified in the schema. One property that is unique to the Web component is no-separator. Use this prop rather than the separator prop used in Twig.

Accordion item 1 with a lot of text in the trigger, which could wrap to multiple lines, and this trigger and the icon are vertically aligned center

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Accordion item 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Accordion item 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

<bolt-accordion spacing="small" icon-valign="top" box-shadow no-separator multiple> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 1 with a lot of text in the trigger, which could wrap to multiple lines, and this trigger and the icon are vertically aligned center</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 2</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 3</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> </bolt-accordion>

Advanced Usage

Two advanced options are shown below. Automatically show an bolt-accordion-item by adding the auto-open prop.

Accordion item 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Accordion item 2

This item is opened by default. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Accordion item 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

<bolt-accordion> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 1</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item auto-open> <bolt-text slot="trigger">Accordion item 2</bolt-text> <bolt-text>This item is opened by default. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> <bolt-accordion-item> <bolt-text slot="trigger">Accordion item 3</bolt-text> <bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text> </bolt-accordion-item> </bolt-accordion>

2.20.0

Action blocks

Action Blocks Component in Bolt

Published

History

yarn add @bolt/components-action-blocks

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-action-blocks

Description

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

Best Practices

Can use xlight, light, dark, and xdark themes.
Can have an image, icon, and/or text
Should link to content
Should be limited to 7 (soft limit) unless we're representing a large list of content that is meant to be scanned
Can wrap to many rows
Top aligned by default
Can be vertically centered
Are set with a border by default
Can be borderless

Usage

  {% include "@bolt-components-action-blocks/action-blocks.twig" with {
  contentItems: [
    {
      text: "Item 1",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 2",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    },
    {
      text: "Item 3",
      url: "#!",
      icon: {
        name: "icon-name",
        size: "large",
        background: "circle"
      }
    }
  ]
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
max_items_per_row	The max amount of items (action blocks) to be displayed in one row.	`number`	`6`	`2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`
valign	Vertical alignment of the content inside each action block.	`string`	`start`	`start`, `center`, `end`
borderless	Removes the border in between each action block.	`boolean`	`false`	`true` or `false`
contentItems	Content items to populate the action blocks.	`array`	—	[items]: Type: `object` Properties: `text` Type: `string` `url` Type: `string` `icon` Type: `object` Properties: `name` — `size` — `background` —
maxItemsPerRow	Use max_items_per_row prop instead.		—	—
align	Use valign prop instead.		—	—
border	Use borderless prop instead.		—	—

Item 1
Item 2
Item 3

2.20.0

Bolt Background

Background Component in Bolt

Published

History

yarn add @bolt/components-background

Install

Source code

@bolt/components-background-shapes

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-background

Description

Background allows Bolt to set an image inside of bands.

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

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

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
opacity	Overlay opacity	`string`	`medium`	`light`, `medium`, `heavy`, `full`
overlay	Should an overlay be used for this background.	`string`	`enabled`	`enabled` or `disabled`
shapeGroup	Add a Bolt Background Shapes group.	`string`	`none`	`A`, `B`, `none`
shapeAlignment	Alignment of shape group.	`string`	`right`	`left` or `right`
fill	Type of fill to use for the overlay.	`string`	`color`	`color`, `gradient`, `linear-gradient`, `radial-gradient`
fillColor	Color of the fill to use in the overlay.	`string`	`default`	`indigo`, `pink`, `default`, `black`
focalPoint	Where the opacity background should originate.	`object`	—	`horizontal` Currently only reverses gradient on 'left'. `center`, `left`, `right` `vertical` Currently doesn't use this value. Intended future application. `center`, `top`, `bottom`
contentItems	An array of objects to place in the background. Works with Image and Shape components. Video option is deprecated.	`array`	—	[items]: Type: `any`

Light Opacity

Medium Opacity

Heavy Opacity

Full Opacity

Heavy Opacity with Left Focal Point

Heavy Opacity with Right Focal Point

Fill: Color

Fill: Gradient

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

valign: center

valign: top

valign: bottom

valign: 25%

2.20.0

Background shapes

Background Component Shapes in Bolt

Published

History

yarn add @bolt/components-background-shapes

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-background-shapes

Description

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

Best Practices

Set to the right side of the band if there is copy on the left.
Set to the left side of the band if there is copy on the right.
Shapes can be used behind cards or thumbnail images (video or just image) but should not make the content hard to consume by the user.
Shapes should not be used behind any text elements. Doing so makes the text hard to read.
Don't use background shapes if it makes the content in the band hard to parse

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`

shapeGroup: A

shapeGroup: B

2.20.0

Band

Band Component in Bolt

Published

History

yarn add @bolt/components-band

Install

Source code

@bolt/components-background

Dependencies

@bolt/components-grid

Overview

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

Install via NPM

npm install @bolt/components-band

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
content	Main content of the band.	`string` , `array` , `object`	—	—
pinned_content	Pinned content of the band.	`object`	—	`upper` Pinned to the upper area of the band. `content` A pinned area can contain 1 or more items. — `align` Horizontal alignment of a single item. `start`, `center`, `end` `lower` Pinned to the lower area of the band. `content` A pinned area can contain 1 or more items. — `align` Horizontal alignment of a single item. `start`, `center`, `end`
tag	Controls the semantic HTML tag to use for the band's content.	`string`	`div`	`div`, `article`, `section`, `header`, `footer`, `nav`, `figure`
valign	Controls the internal vertical alignment of the band's content.	`string`	`middle`	`start`, `center`, `end`
size	Controls the vertical spacing of the band.	`string`	`medium`	`none`, `xsmall`, `small`, `medium`, `large`
full_bleed	If set to true, the band will take the full width of the page.	`boolean`	`true`	`true` or `false`
theme	Controls the theme of the band.	`any`	`dark`	`none`, `xlight`, `light`, `dark`, `xdark`, `xxdark`
row_gutter	Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.		—	—
content_row_start	Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.		—	—
items	Please use `content` and `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.		—	—
fullBleed	This prop has been renamed. Please use `full_bleed`.		—	—
contentTag	This prop is no longer needed. `tag` takes care of the semantic markup automatically.		—	—

This is a band.

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.

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.

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

Full bleed

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

This is a band.

Not full bleed

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

This is a band.

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

upper pinned 1

upper pinned 2

upper pinned 3

This Is a Headline

This Is a Subheadline

lower pinned 1

lower pinned 2

lower pinned 3

This Is a Headline

This Is a Subheadline

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

This Is a Headline

This Is a Subheadline

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

Deprecated items prop usage

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

New pinned_content prop usage

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

This Band Has a Backround Image

This Band Has 2 Bands Nested Inside

Nested band 1

Nested band 2

This Is a Flag

With text on the left and CTAs on the right.

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

Collection 1

Collection 2

Collection 3

2.20.0

Banner

A content container that delivers important messages to the user.

Published

History

yarn add @bolt/components-banner

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-banner

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.	`object`	—	—
content *	Renders the content of the banner. While any element can be passed, only text and links are recommended because banner messages are supposed to be concise.	`any`	—	—
status	Sets the status that the banner is trying to convey.	`string`	`information`	`error`, `warning`, `success`, `information`
align	Sets the text alignment of the content.	`string`	`center`	`start`, `center`, `end`
full	Sets the width of the banner to take up 100% of the screen width.	`boolean`	`false`	—

Status

Text alignment

Academy Challenge Status

Web Component Usage

Bolt Banner is a web component, you can simply use <bolt-banner> in the markup to make it render.

This is a banner

<bolt-banner> This is a banner </bolt-banner>

Prop Usage

Configure the banner with the properties specified in the schema.

You passed this challenge on May 21, 2020. View Details

<bolt-banner status="success" align="start"> You passed this challenge on <strong>May 21, 2020</strong>. <bolt-link url="https://pega.com">View Details</bolt-link> </bolt-banner>

2.20.0

Block List

Block-list Component in Bolt

Published

History

yarn add @bolt/components-block-list

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-block-list

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
items	All of the items in the block list - can have simple text or `items`	`array`	—	[items]: Type: `string, object, array` Renderable content (i.e. a string, render array, or included pattern) for a single list item

Link 1
Link 2
Link 3
Simple text example

Theme: xlight

Link 1
Link 2
Link 3
Simple text example

Theme: light

Link 1
Link 2
Link 3
Simple text example

Theme: medium

Link 1
Link 2
Link 3
Simple text example

Theme: dark

Link 1
Link 2
Link 3
Simple text example

Theme: xdark

Link 1
Link 2
Link 3
Simple text example

2.20.0

Blockquote

Blockquote Component in Bolt

Published

History

yarn add @bolt/components-blockquote

Install

Source code

Dependencies

@bolt/components-logo

@bolt/components-text

Overview

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

Install via NPM

npm install @bolt/components-blockquote

Description

Block quotes provide testimonials throughout the pega experience.

Content that can be contained in a blockquote

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

Additional info

Can be full width or confined with the grid
Can be left, center, or right aligned
can have top+bottom horizontal lines, a left or right vertical line, or no lines
Text is open sans
Quote marks are NOT inch marks
Quote marks are system font Georgia
Text color changes based on the theme colors

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`	—	@bolt-components-logo/logo.schema.yml > Object details `invert` Set to true to invert the logo colors. Type: boolean —
author	Author of the quote.	`object`	—	`name` Author's name. — `title` Author's title. — `image` @bolt-components-image/image.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `src` Source url for image. Type: string — `alt` Alt tag for image. Type: string — `lazyload` Lazyload can boost performance by loading images on demand, instead of on initial page load. Type: boolean `true` or `false` `no_lazy` Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to `true`. Type: boolean `true` or `false` `placeholder_color` A valid CSS background color property shown while image loads. Type: string — `placeholder_image` Image path or image data shown while image loads. Type: string — `srcset` A comma seperated string of image urls and image widths, used for optimizing image loading performance. Type: string — `sizes` A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more. Type: string — `useAspectRatio` Use the `ratio` prop instead. Type: boolean `true` or `false` `ratio` Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio. Type: string, boolean — `max_width` Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%". Type: string — `width` Override the default width of the image. If no height is provided, aspect ratio will be maintained. Type: — `height` Override the default height of the image. If no width is provided, aspect ratio will be maintained. Type: — `cover` Set an image to fill its container. Type: boolean `true` or `false` `imageAttributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `valign` Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top \| center \| bottom) or via specific pixel or percent offset (ex. 30%). Type: string — `align` Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left \| center \| right) or via specific pixel or percent offset (ex. 30%). Type: string —

alignItems: left

alignItems: center

alignItems: right

Indent: True

Indent: False

Border: vertical

Border: horizontal

Border: none

No quotes

Multiple Paragraph Content

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

German

French

Japanese

theme: xlight

theme: light

theme: dark

theme: xdark

weight: semibold

weight: bold

size: large

size: xlarge

size: xxlarge

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.

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>

2.20.0

Breadcrumb

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

Published

History

yarn add @bolt/components-breadcrumb

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-breadcrumb

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
contentItems	Breadcrumb pieces.	`array`	—	[items]: Type: `string, object, array` Renderable content (i.e. a string, render array, or included pattern) for a single breadcrumb

Accessibility Requirement

The aria-current attribute must be applied to the last link in the set to indicate that it represents the current page.

Page sections popover

In addition to passing the Link component as an item, you may also pass the Popover component as an item, and use the Menu component in the popover to allow the user to navigate to a particular page's top sections.

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Eyebrow

Headline

Subheadline

Body text.

Call to Action

Breadcrumb Band Stacking On Top of Featured Band ^

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

Background and Theming

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

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

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

Get Smart

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

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

Background and Theming

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

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

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

Get Smart

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.

2.20.0

Bolt Button

Button Component in Bolt

Published

History

yarn add @bolt/components-button

Install

Source code

Dependencies

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

Overview

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

Install via NPM

npm install @bolt/components-button

Description

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

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

Xlight and light themes

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

Dark and xdark themes

Primary: Yellow container with default indigo text
Secondary: white button with indigo text
Text button: white text with chevron
Currently only have one defined size (though other options can and will be defined in the future)
Can be 100% width of the wrapper for mobile or card instances
Can optionally be 100% width. For example, the button has default width of 2 rem on either side on larger screens but full width on smaller screens

Dos

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

Don'ts

Don't clutter the page with too many buttons
Don't mix and match themes and their button colors. For example, do not use the indigo button on dark and xdark themes as the indigo button does not stand out enough.
Don't mix and match colors outside the theme, see button groups.

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
text *	Text inside the button.	`string`	—	—
transform	Transforms the button text to various cases.	`string`	`none`	`uppercase`, `lowercase`, `capitalize`, `none`
type	Determines the button tag type for semantic buttons	`string`	—	`button`, `submit`, `reset`
size	Size of the button.	`string`	`medium`	`xsmall`, `small`, `medium`, `large`, `xlarge`
style	Style of the button determined by information hierarchy.	`string`	`primary`	`primary`, `secondary`, `tertiary`, `text`
width	Controls the width of the button.	`string`	`auto`	`auto`, `full`, `full@small`
border_radius	Rounds the corners of the button.	`string`	`regular`	`regular` or `full`
align	Horizontal alignment of items (text and icon) inside the button. Note: the values left and right are deprecated, use start and end instead.	`string`	`center`	`start`, `center`, `end`
icon	Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the button.	`object`	—	`position` Where to position the icon within the button `before` or `after` `attributes` A Drupal-style attributes object with extra attributes to append to this component. — `name` Icon name — `background` Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes! `none`, `circle`, `square` `size` Icon size. `small`, `medium`, `large`, `xlarge` `color` Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within. `auto`, `teal`, `blue`, `indigo`, `yellow`, `orange`, `gray`, `green`, `white`, `pink`
iconOnly	Make the button to display only the icon and hide the text (which is still required). You are required to pass both text and icon data for this option to work.	`boolean`	`false`	—
itemAlignment	Use the align parameter instead.		—	—
rounded	Use the border_radius parameter instead.		—	—
tag	Switch to using the new type prop instead.	`string`	`button`	`a`, `link`, `button`, `submit`, `reset`

Note: medium is the default size.

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

Regular States

Interactive States

Buttons inside a xdark theme

Buttons inside a dark theme

Buttons inside a light theme

Buttons inside a xlight theme

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

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

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

Icon position set to before

Icon position set to after

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

Xsmall icon-only button

Small icon-only button

Medium icon-only button

Large icon-only button

Xlarge icon-only button

Full border radius (circle icon-only button)

Examples with different icons

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

Web Component Usage

Bolt Button is a web component, you can simply use <bolt-button> in the markup to make it render.

This is a button

<bolt-button url="https://pega.com"> This is a button </bolt-button>

Basic Usage

To use icon in combination with text within the button, you must pass <bolt-icon> with a slot attribute defined as either before or after.

Note: the slot attribute is required in order for the icon to be placed and spaced correctly within the button. Even if icon-only option is turned on, slot is still required.

This is a button

<p> <bolt-button> <bolt-icon name="chevron-left" slot="before"></bolt-icon> This is a button </bolt-button> </p> <p> <bolt-button> <bolt-icon name="chevron-right" slot="after"></bolt-icon> This is a button </bolt-button> </p> <p> <bolt-button icon-only> <bolt-icon name="close" slot="before"></bolt-icon> This is a button </bolt-button> </p>

Advanced Usage

The web component has all the options shown in the schema table. You can define each prop within the <bolt-button> element. Use unique combinations to customize a button to your liking.

Note: the style prop is named color instead.

This is a button

<bolt-button url="https://pega.com" size="large" color="secondary" border-radius="full" tag="a" icon-only > <bolt-icon name="menu" slot="before"></bolt-icon> This is a button </bolt-button>

Server-side Rendered Web Components (Experimental)

The <bolt-button> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!

This is a button

<bolt-button> This is a button <bolt-icon name="chevron-right" slot="after"></bolt-icon> </bolt-button>

2.20.0

Button Group

Button Group Component in Bolt

Published

History

yarn add @bolt/components-button-group

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-button-group

Description

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

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

Dos

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

Don'ts

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

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

Usage

  {% set button_1 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "Learn More",
    style: "primary"
  } only %}
{% endset %}

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

{% include "@bolt-components-button-group/button-group.twig" with {
  buttons: [
    button_1,
    button_2
  ]
} %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
tag	Html tag to wrap the button group.	`string`	—	`ul` or `ol`
buttons	An array of buttons.	`array`	—	[items]: Type: `string, object, array` A single bolt button, which should be passed as renderable content (i.e. a string, render array, or included pattern). Passing anything besides a bolt button is not supported.
contentItems	An array of bolt objects.	`array`	—	[items]: Type: `object` Bolt component information.
content	A string of content to place in the button group.	`string`	—	—

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)

This is text with the tags stripped.

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

2.20.0

Card

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

Published

History

yarn add @bolt/components-card-replacement

Install

Source code

@bolt/components-background

Dependencies

@bolt/components-list

@bolt/components-teaser

@bolt/components-video

Overview

Install via NPM

npm install @bolt/components-card-replacement

Description

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

Best Practices

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

Usage

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

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

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
tag	HTML tag that contains the card-replacement content.	`string`	`article`	`div`, `article`, `figure`
horizontal	Displays the card media + body horizontally.	`boolean`	—	—
height	Controls the height of the card-replacement to auto fit to content or the full height of the column in a grid.	`string`	`full`	`auto` or `full`
theme	Controls the theme of the individual card-replacement.	`string`	`none`	`xlight`, `light`, `dark`, `xdark`, `none`
link	Providing a link will make the whole card-replacement clickable.	`object`	—	`url` Address for the link. — `text` Visually hidden text for link, included for accessibility. — `attributes` A Drupal-style attributes object with extra attributes to append to this component. —
media	Media section of the card-replacement, accepts either image and video, or custom content.	`object`	—	`image` @bolt-components-image/image.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `src` Source url for image. Type: string — `alt` Alt tag for image. Type: string — `lazyload` Lazyload can boost performance by loading images on demand, instead of on initial page load. Type: boolean `true` or `false` `no_lazy` Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to `true`. Type: boolean `true` or `false` `placeholder_color` A valid CSS background color property shown while image loads. Type: string — `placeholder_image` Image path or image data shown while image loads. Type: string — `srcset` A comma seperated string of image urls and image widths, used for optimizing image loading performance. Type: string — `sizes` A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more. Type: string — `useAspectRatio` Use the `ratio` prop instead. Type: boolean `true` or `false` `ratio` Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio. Type: string, boolean — `max_width` Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%". Type: string — `width` Override the default width of the image. If no height is provided, aspect ratio will be maintained. Type: — `height` Override the default height of the image. If no width is provided, aspect ratio will be maintained. Type: — `cover` Set an image to fill its container. Type: boolean `true` or `false` `imageAttributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `valign` Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top \| center \| bottom) or via specific pixel or percent offset (ex. 30%). Type: string — `align` Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left \| center \| right) or via specific pixel or percent offset (ex. 30%). Type: string — `video` @bolt-components-video/video.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `videoId` Brightcove ID for this video. Type: string, number — `playerId` Brightcover Player ID. Type: string — `accountID` ID of the Brightcove account that owns the video. Type: string, number — `videoUuid` A unique identifying string, randomly generated if not provided. Type: string — `share_description` A custom title to use in the share overlay Type: string — `ratio` Maintain video ratio. Type: boolean — `collapsed` Should the video be collapsed on load. Type: boolean — `showMeta` Should the video show meta data. Type: boolean — `showMetaTitle` Should the video show meta title. Type: boolean — `controls` Should the video controls be available. Type: boolean — `autoplay` Should the video auto-play on load. Type: boolean — `loop` Should the video loop. Type: boolean — `on_init` The `on_init` config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a `<bolt-video>` player instance when initializing. Please see the new recommended `enabled_plugins` and `disabled_plugins` options below. Type: string — `default_plugins` An array of the default `<bolt-video>` player plugins that are globally enabled by default. Type: array `playback` `available_plugins` The built-in `<bolt-video>` player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript. Type: array `playback`, `social`, `email`, `cue` `enabled_plugins` Space-separated list of built-in `<bolt-video>` plugins for Brightcove to enable. Current include `social`, `email`, `playback`, and `cue`. For example: `<bolt-video enabled-plugins="cue social email playback">`. Type: string — `disabled_plugins` Space-separated list of any built-in `<bolt-video>` plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the `playback` plugin). For example: `<bolt-video disabled-plugins="playback">`. Type: string — `isBackgroundVideo` Background video feature will be removed with Bolt v3.0 Type: — `content` Passing free-form content into the card-replacement media will ignore image or video data. Use this if the pre-configured image or video doesn't satisfy your needs. —
body	Body section of the card-replacement, accepts pre-configured eyebrow, headline, and paragraph or custom content.	`object`	—	`eyebrow` Regular eyebrow. — `headline` Headline pre-defined to size large. — `paragraph` Regular paragraph of text. — `content` Passing free-form content into the card-replacement body will ignore eyebrow, headline, and paragraph data. Use this if the pre-configured eyebrow, headline, and paragraph don't satisfy your needs. —
actions	Actions section of the card-replacement, accepts buttons.	`array`	—	`text` — `url` — `external` — `attributes` A Drupal-style attributes object with extra attributes to append to this component. —
content	Content will override media, body, and actions props. Use this to build a completely cuztomized card-replacement.	`string` , `array` , `object`	—	—

Advanced Schema Options

Open Accordion Close Accordion

raised

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

boolean

—

—

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

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

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

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

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

Eyebrow

This is teaser 1

Eyebrow

This is teaser 2

Eyebrow

This is teaser 3

This is an eyebrow

This is a headline.

This is body text.

This is a button

Web Component Usage

Bolt Text is a web component, you can simply use <bolt-card-replacement> in the markup to make it render. Its inner content is comprised of <bolt-card-replacement-media>, <bolt-card-replacement-body>, and <bolt-card-replacement-actions>.

This is an eyebrow

This is a headline

This is a paragraph.

Internal link

External link

<bolt-card-replacement> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image> </bolt-card-replacement-media> <bolt-card-replacement-body> <bolt-text eyebrow>This is an eyebrow</bolt-text> <bolt-text headline>This is a headline</bolt-text> <bolt-text>This is a paragraph.</bolt-text> </bolt-card-replacement-body> <bolt-card-replacement-actions> <bolt-card-replacement-action url="https://pega.com"> Internal link </bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" external> External link </bolt-card-replacement-action> </bolt-card-replacement-actions> </bolt-card-replacement>

Simple Link Usage

The simplest way to make the whole card-replacement clickable is by passing a link address to the url prop on the main <bolt-card-replacement> component itself. Also include the url-text prop for accessibility.

This is a card-replacement with an overall link that makes the whole card-replacement clickable.

<bolt-card-replacement url="https://google.com" url-text="Go to google.com"> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image> </bolt-card-replacement-media> <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body> </bolt-card-replacement>

Advanced Link Usage

Insert a <bolt-card-replacement-link> inside <bolt-card-replacement> and you can pass more than just url. <bolt-card-replacement-link> is similar to <bolt-link>. You can add custom attributes to <bolt-card-replacement-link> and insert a semantic <a> or <button> element inside.

Go to google.com

This is a card-replacement with an overall link that makes the whole card-replacement clickable.

<bolt-card-replacement> <bolt-card-replacement-link custom-attribute="foo" html-attribute="bar"> <a href="http://google.com" target="_blank">Go to google.com</a> </bolt-card-replacement-link> <bolt-card-replacement-media> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image> </bolt-card-replacement-media> <bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body> </bolt-card-replacement>

Nested Links

While making the whole card-replacement clickable, you are still able to insert nested links as needed. Any <bolt-link>, <bolt-card-replacement-link>, and <bolt-card-replacement-action> will work as expected.

This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have text links that would go somewhere else.

Internal link

External link

<bolt-card-replacement url="https://google.com"> <bolt-card-replacement-media> <bolt-ratio aspect-ratio-height="9" aspect-ratio-width="16"> <bolt-video data-setup='{"techOrder": ["Html5"], "resizeManager": false}' video-id="3861325118001" account-id="1900410236" show-meta show-meta-title player-id="r1CAdLzTW" controls></bolt-video> </bolt-ratio> </bolt-card-replacement-media> <bolt-card-replacement-body> This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have <bolt-link target="_blank" url="https://boltdesignsystem.com/docs">text links</bolt-link> that would go somewhere else. </bolt-card-replacement-body> <bolt-card-replacement-actions> <bolt-card-replacement-action url="https://pega.com"> Internal link </bolt-card-replacement-action> <bolt-card-replacement-action url="https://yahoo.com" external> External link </bolt-card-replacement-action> </bolt-card-replacement-actions> </bolt-card-replacement>

2.20.0

Carousel

A web-component powered carousel component for cycling through a series of content such as images, text, or cards.

Published

History

yarn add @bolt/components-carousel

Install

Source code

Dependencies

swiper

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

Overview

The <bolt-carousel> provides all the basic functionality expected with a modern carousel with a sliding effect, left/right arrow buttons, and page dots. The user can move between each carousel slide with touch, the mouse, the keyboard, or a trackpad.

Under the hood, the <bolt-carousel> component uses the excellent Swiper library to provide top-notice mobile, responsive, and touch support.

Install via yarn

yarn add @bolt/components-carousel

Usage

Via Web Component

<bolt-carousel>
  <bolt-carousel-slide>
    Slide 1
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    Slide 2
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    Slide 3
  </bolt-carousel-slide>
</bolt-carousel>

Via Twig

{% include "@bolt-components-carousel/carousel.twig" with {
  slides: [
    'Slide 1',
    'Slide 2',
    'Slide 3',
  ]
} only %}

Guidelines

The <bolt-carousel> component is most appropriate when:

You want to present to the user with a collection of images, or a mixture of images and text content.
You want to allow the user focus on a single item at a time.
The total number of items to display is relative small (between 2 and 10 items).

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-carousel> tag.	`object`	—	—
slides	Array of content to include in the carousel. Note: each slide gets wrapped with a `<bolt-carousel-slide>` automatically.	`array`	—	—
slides_per_view	Controls the number of slides to be shown at once.	`string`	`1`	`auto`, `1`, `2`, `3`
slides_per_group	Controls the number of slides to be swiped at once.	`string`	`auto`	`auto` or `1`
space_between	Controls the horizontal spacing between each slide.	`string`	`medium`	`none`, `small`, `medium`
nav_button_position	Positions the previous and next buttons to either inside or outside of the carousel container.	`string`	`inside`	`inside` or `outside`
overflow	Makes overflowing carousel slides visible.	`boolean`	`false`	—
no_nav_buttons	Visually hide the previoius and next nav buttons.	`boolean`	`false`	—
autoplay	Allows the carousel to automatically rotate through its slides until the user interacts with it.	`boolean`	`false`	`true` or `false`
free_scroll	Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar.	`boolean`	`false`	—
prev_slide_message	Accessible label for previous button.	`string`	`Previous slide`	—
next_slide_message	Accessible label for next button.	`string`	`Next slide`	—
first_slide_message	Accessible label for the previous button when the carousel is on the first slide.	`string`	`This is the first slide`	—
last_slide_message	Accessible label for previous button when the carousel is on the last slide.	`string`	`This is the last slide`	—
pagination_bullet_message	Accessible label for a single pagination bullet.	`string`	`Go to slide {{index}}`	—

Advanced Schema Options

Open Accordion Close Accordion

max_slides_per_view	- [1 ~ 3] Limits the maximum number of slides that can display at any screen size. Combine this with the `slidesPerView` option to get the benefits of automatically adjusting the number of slides displayed at different screen sizes while putting a max limit of how many slides display at once.	`integer`	`3`	—
no_pagination	Removes the pagination. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews).	`boolean`	`false`	—
no_scrollbar	Removes the scrollbar. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews).	`boolean`	`false`	—
no_min_width	Disables the slide min width logic. Typically not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews).	`boolean`	`false`	—
mode	Switches between the default carousel mode and the image gallery mode.	`string`	`default`	`default`, `gallery`, `gallery-thumbnail`
slide_to_clicked_slide	Set to true and click on any slide will produce transition to this slide.	`boolean`	`false`	—
loop	Enables continuous loop mode. Note: the loop option is temporarily disabled and will be re-enabled in a future Bolt release.	`boolean`	`false`	`true` or `false`

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Nav Button Position: Inside

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Nav Button Position: Outside

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: Auto

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 1

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 2

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 3

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Autoplay: true

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Autoplay: false

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Basic Usage

When using the basic carousel component, it is recommended to pass the same type of content for each slide of the carousel, and make sure each piece of content have similar dimensions.

A carousel of bands

Band slide 1

Band slide 2

Band slide 3

A carousel of cards

Slide 1

This is a card

Slide 2

This is a card

Slide 3

This is a card

Slide 4

This is a card

A carousel of images

Image caption — This is caption for image figure slide 1.

A carousel of blockquotes

Advanced Usage

Use specific combination of props to create different kinds of advanced carousel.

Card Carousel

This card's media has an image carousel

Hero Band Carousel

Experience The Best of Both Worlds

Customer engagement meets intelligent automation.

Customer Success

Every enterprise success story starts with the right technology.

Web Component Usage

Bolt carousel is a web component, you can simply use <bolt-carousel> in the markup to make it render. For each slide, you must use <bolt-carousel-slide> to wrap around the slide content.

Slide 1

Slide 2

Slide 3

<bolt-carousel> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-dark">Slide 2</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-light">Slide 3</div> </bolt-carousel-slide> </bolt-carousel>

Basic Usage

The web component has all the options shown in the schema table. You can define each prop within the <bolt-carousel> element. Use unique combinations to customize a carousel to your liking.

Slide 1

Slide 2

Slide 3

Slide 4

<bolt-carousel nav-button-position="inside" slides-per-view=2 loop autoplay> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-dark">Slide 2</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-light">Slide 3</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-xlight">Slide 4</div> </bolt-carousel-slide> </bolt-carousel>

Server-side Rendered Web Components (Experimental)

The <bolt-carousel> 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!

Slide 1

Slide 2

Slide 3

{% filter bolt_ssr %} <bolt-carousel> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-dark">Slide 2</div> </bolt-carousel-slide> <bolt-carousel-slide> <div class="u-bolt-padding-large t-bolt-light">Slide 3</div> </bolt-carousel-slide> </bolt-carousel> {% endfilter %}

2.20.0

Chip

Chip Component in Bolt

Published

History

yarn add @bolt/components-chip

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-chip

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-chip> tag.	`object`	—	—
text *	Text content of the chip.	`string` , `array` , `object`	—	—
size	Controls the size of the chip.	`string`	`small`	`xsmall`, `small`, `medium`
url	Optional. Contains a URL that the chip points to. When URL is present, tag changes to `a`, otherwise tag would be `span`.	`string`	—	—
target	Specifies where to display the linked URL. This may also be passed as part of `attributes`.	`string`	—	—
icon	Bolt icon. Accepts the same options as Bolt Icon Component `@bolt-components-icon` plus an additional 'position' parameter that determines placement within the button.	`object`	—	@bolt-components-icon/icon.schema.json > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `name` Icon name Type: string — `background` Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes! Type: string `none`, `circle`, `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within. Type: string `auto`, `teal`, `blue`, `indigo`, `yellow`, `orange`, `gray`, `green`, `white`, `pink`
tag	DEPRECATED - tag is automatically determined by URL.		—	—

Advanced Schema Options

Open Accordion Close Accordion

no_shadow	Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—
no-shadow	Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—

Chip

URL

No URL

Has URL

Target

Open link in current tab

Open link in new tab

Size

xsmall

small

medium

Icon

Icon before

Icon after

Web Component Usage

Bolt Chip is a web component, you can simply use <bolt-chip> in the markup to make it render.

Chip

<bolt-chip> Chip </bolt-chip>

Basic Usage

All the props defined in the schema table can be used directly on the <bolt-chip> element.

Linked chip

<bolt-chip spacing="small" url="https://pega.com" target="_blank"> Linked chip </bolt-chip>

Advanced Usage

To add icons to <bolt-chip>, place a <bolt-icon> next to your chip text. For icons to have the correct spacing, you must add the slot attribute to <bolt-icon>. The slot value can be before or after.

Chip with icon

<bolt-chip> Chip with icon <bolt-icon name="check" slot="after"></bolt-icon> </bolt-chip>

2.20.0

Chip List

Chip List Component in Bolt

Published

History

yarn add @bolt/components-chip-list

Install

Source code

Dependencies

@bolt/components-chip

@bolt/components-list

Do not include any data or information in your posts that are confidential!

Overview

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

Install via NPM

npm install @bolt/components-chip-list

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` Chip.
size	Sets the size used for all of the chips (if size isn't specified on the individual chip)		—	`xsmall`, `small`, `medium`
contentItems	Deprecated (will be removed in Bolt v3.0) - use the `items` prop instead.	`array`	—	[items]: Type: `object` Chip.

Chip list with links

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

2.20.0

Code Snippet

Code Snippet Component in Bolt

Published

History

yarn add @bolt/components-code-snippet

Install

Source code

Dependencies

prismjs

Overview

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

Install via NPM

npm install @bolt/components-code-snippet

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`

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

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

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

block:

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

inline:

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

css:

  .my-css {
  display: block;
}

scss:

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

html:

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

javascript:

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

twig:

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

light:

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

dark:

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

none:

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

2.20.0

Copy to Clipboard

Copy to Clipboard Component in Bolt

Published

History

yarn add @bolt/components-copy-to-clipboard

Install

Source code

Dependencies

clipboard

Overview

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

Install via NPM

npm install @bolt/components-copy-to-clipboard

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
text	This property has been renamed trigger_text	`string`	`Copy Link`	—
copiedText	Use the custom_confirmation property instead if you need to change the confirmation text.	`string`	`Copied!`	—
iconSize	Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size.	`string`	`medium`	—
url	This property has been renamed text_to_copy	`string`	—	—
trigger_text	Text to use for the inital copy button. Ignored if the custom_trigger property is used.	`string`	`Copy Link`	—
text_to_copy *	The text to copy to the clipboard.	`string`	—	—
custom_trigger	(optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed.	`string` , `object` , `array`	—	—
custom_transition	(optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon.	`string` , `object` , `array`	—	—
custom_confirmation	(optional) Custom content to show after a successful copy.	`string` , `object` , `array`	—	—

Copied!

Custom transition

Copied!

Custom transition

Custom confirmation

2.20.0

Device Viewer

Device Viewer Component in Bolt

Published

History

yarn add @bolt/components-device-viewer

Install

Source code

Dependencies

drift-zoom

Overview

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

Install via NPM

npm install @bolt/components-device-viewer

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
deviceName	Name of the device.	`string`	—	`ipad`, `iphone8`, `macbook`
color	Device color.	`string`	—	`black`, `silver`, `gold`
orientation	Device orientation.	`string`	—	`portrait` or `landscape`
magnify	Add the magnifier effect.	`boolean`	`false`	—
image		`object`	—	`src` Source url for the image. —

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

Magnification: true

2.20.0

Dropdown

Dropdown Component

Published

History

yarn add @bolt/components-dropdown

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-dropdown

Description

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

Usage

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

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
title	The toggle title text	`string`	—	—
center	`True` to center the toggle title	`boolean`	`false`	—
collapse	`True` to hide toggle until mobile screen size	`boolean`	`false`	—
content	All of the items in the dropdown -- generally works by including `@bolt-components-nav/nav.twig` with `links` array of objects containing `text` & `url`	`any`	—	—

Default Dropdown

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Center

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Collapse

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Collapse and Center

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Theme Variations

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text

Extra Long Header

Link 1 Text
Link 2 Text
Link 3 Text
Link 4 Text
Link 5 Text
Link 6 Text
Link 7 Text
Link 8 Text

2.20.0

Figure

Figure Component in Bolt

Published

History

yarn add @bolt/components-figure

Install

Source code

Dependencies

@bolt/components-table

@bolt/components-video

Overview

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

Install via NPM

npm install @bolt/components-figure

Usage

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

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
media	Pass in any renderable media content via the `media.content` prop.	`object`	—	`content` Figure media content, e.g image, icon, video, etc. — `image` Use the `content` prop instead. @bolt-components-image/image.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `src` Source url for image. Type: string — `alt` Alt tag for image. Type: string — `lazyload` Lazyload can boost performance by loading images on demand, instead of on initial page load. Type: boolean `true` or `false` `no_lazy` Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to `true`. Type: boolean `true` or `false` `placeholder_color` A valid CSS background color property shown while image loads. Type: string — `placeholder_image` Image path or image data shown while image loads. Type: string — `srcset` A comma seperated string of image urls and image widths, used for optimizing image loading performance. Type: string — `sizes` A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more. Type: string — `useAspectRatio` Use the `ratio` prop instead. Type: boolean `true` or `false` `ratio` Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio. Type: string, boolean — `max_width` Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%". Type: string — `width` Override the default width of the image. If no height is provided, aspect ratio will be maintained. Type: — `height` Override the default height of the image. If no width is provided, aspect ratio will be maintained. Type: — `cover` Set an image to fill its container. Type: boolean `true` or `false` `imageAttributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `valign` Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top \| center \| bottom) or via specific pixel or percent offset (ex. 30%). Type: string — `align` Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left \| center \| right) or via specific pixel or percent offset (ex. 30%). Type: string — `icon` Use the `content` prop instead. @bolt-components-icon/icon.schema.json > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `name` Icon name Type: string — `background` Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes! Type: string `none`, `circle`, `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within. Type: string `auto`, `teal`, `blue`, `indigo`, `yellow`, `orange`, `gray`, `green`, `white`, `pink` `video` Use the `content` prop instead. @bolt-components-video/video.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `videoId` Brightcove ID for this video. Type: string, number — `playerId` Brightcover Player ID. Type: string — `accountID` ID of the Brightcove account that owns the video. Type: string, number — `videoUuid` A unique identifying string, randomly generated if not provided. Type: string — `share_description` A custom title to use in the share overlay Type: string — `ratio` Maintain video ratio. Type: boolean — `collapsed` Should the video be collapsed on load. Type: boolean — `showMeta` Should the video show meta data. Type: boolean — `showMetaTitle` Should the video show meta title. Type: boolean — `controls` Should the video controls be available. Type: boolean — `autoplay` Should the video auto-play on load. Type: boolean — `loop` Should the video loop. Type: boolean — `on_init` The `on_init` config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a `<bolt-video>` player instance when initializing. Please see the new recommended `enabled_plugins` and `disabled_plugins` options below. Type: string — `default_plugins` An array of the default `<bolt-video>` player plugins that are globally enabled by default. Type: array `playback` `available_plugins` The built-in `<bolt-video>` player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript. Type: array `playback`, `social`, `email`, `cue` `enabled_plugins` Space-separated list of built-in `<bolt-video>` plugins for Brightcove to enable. Current include `social`, `email`, `playback`, and `cue`. For example: `<bolt-video enabled-plugins="cue social email playback">`. Type: string — `disabled_plugins` Space-separated list of any built-in `<bolt-video>` plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the `playback` plugin). For example: `<bolt-video disabled-plugins="playback">`. Type: string — `isBackgroundVideo` Background video feature will be removed with Bolt v3.0 Type: — `table` Use the `content` prop instead. @bolt-components-table/table.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `headers` Generates top and side headers, each can contain an array of `cells`. Type: object `top` `cells` Each item represents a cell in the top header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `side` `cells` Each item represents a cell in the side header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `rows` Generates an array of rows, each can contain an array of `cells`. Type: array `cells` Each item represents a cell in a row. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `footer` Generates a table footer, can contain an array of `cells`. Type: object `cells` Each item represents a cell in the footer. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `format` Display either a regular table or a more complex numeric table. Type: string `regular` or `numeric` `borderless` Removes the vertical border in between cells. Type: boolean `true` or `false` `first_col_fixed_width` Sets the width of the first column to be as wide as the longest text. Type: boolean `true` or `false`
caption	Caption for the figure.	`string` , `object` , `array`	—	—
content	Figure contains no content. Only media and caption.		—	—

Image Figure

Icon Figure

Fig. 2: This is an icon.

Video Figure

Fig. 3: This is a video.

Table Figure

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

Fig. 4: This is a table.

Web Component Usage

Bolt Figure is a web component. Use the custom element <bolt-figure> to wrap your figure media and caption. The figure media must have the attribute slot="media" or be wrapped by an element with that attribute. Everything else inside the <bolt-figure> tag is considered the caption. We recommend simply using text with optional inline markup (as seen below).

This is a caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit text link.

<bolt-figure> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" slot="media"></bolt-image> This is a caption. Lorem ipsum <em>dolor sit amet</em>, consectetur adipiscing elit <a href="#">text link</a>. </bolt-figure>

2.20.0

Form

Bolt component for forms and form elements

Published

History

yarn add @bolt/components-form

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-form

Usage

  {% include "@bolt-components-form/form.twig" with {
  text: "This is a form",
  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)
icon_size	Customize the size of the input icon used		`medium`	—

Title

Disabled Title

Email

We promise not to sell your email address

Password

Search

Username

The username you entered is already taken.

Single Radio

Select an alignment

Left-aligned

Center-aligned

Right-aligned

I accept the terms and conditions

Select toppings

If there were any server-side errors, you'd see them here

Pick at least two of the following

Pepperoni

Olives

Feta

Pineapple

Select

Job Description

Get the Report

(all fields are required)

First Name

Last Name

Email Address

Title

Company Name

Country

Receive periodic emails on key analyst reports, Pega events, and important news. You can unsubscribe at any time

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.

Email Address

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.

History

yarn add @bolt/components-grid

Install

Source code

Dependencies

yarn add @bolt/components-headline

Overview

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

Install via NPM

npm install @bolt/components-grid

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

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

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

Column start and column span

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

Common usage

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

Aside

Main

Aside

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

Main

Aside

Row start and row span

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

Row

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

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

Span 6 columns

Span 9 columns

Span 12 columns

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

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

Item 1

Item 2

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

Item 1

Item 2

Each item can span from 1 to 12 rows

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

3 rows

6 rows

9 rows

12 rows

Row

Responsive breakpoint options

Use the @breakpoint options to do advanced responsive layouts.

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

Item 1

Item 2

Horizontal item alignment

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

Standard alignments

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

Column start at 1 and span 4

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

Column start at 5 and span 4

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

Column start at 9 and span 4

Advanced alignments

Offset by 1 column from the center.

Column start at 4 and span 8

Offset by 1 column from the start.

Column start at 2 and span 2

Vertical item alignment

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

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-headline

Usage

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

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

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

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

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
text *	Renderable text content of the headline.	`string` , `object` , `array`	—	—
tag	Html tag.	`string`	`p`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span`, `cite`, `div`
align	Text alignment.	`string`	—	`left`, `center`, `right`
weight	Font weights.	`string`	`regular`	`light`, `bold`, `regular`, `semibold`
style	Font styles.	`string`	`normal`	`normal` or `italic`
size	Font size.	`string`	`medium`	`xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`
autoshrink	Automatically shrink the font size used in the `xxxlarge` headline size when 60 or more characters are used.	`boolean`	`true`	—
transform	Text transformation.	`string`	—	`uppercase`, `lowercase`, `capitalize`
url	If provided, turns headline into a link to given url.	`string`	—	—
icon	Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by `@bolt-components-icon` or 3) the string "none" to explicitly remove default icons	`object` , `string` , `string`	—	—
quoted	Adds quoted styling to text.	`boolean`	—	—
numberText	Text that displays in a small circle to the left of the main Headline text. Providing content will trigger the bullet to appear.	`string` , `number`	—	—
numberColor	The optional background color of the Headline bullet. Uses inherited theme colors if unspecified.	`string`	—	`teal`, `indigo`, `orange`, `purple`

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

H1

This is an example of H1

H2

This is an example of H2

H3

This is an example of H3

H4

This is an example of H4

H5

This is an example of H5

H6

This is an example of H6

P

This is an example of P

SPAN

This is an example of SPAN

Align:

This is an example of align left

Align:

This is an example of align center

Align:

This is an example of align right

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

This is light weight and normal text

This is light weight and normal headline

This is light weight and normal subheadline

This is light weight and italic text

This is light weight and italic headline

This is light weight and italic subheadline

This is bold weight and normal text

This is bold weight and normal headline

This is bold weight and normal subheadline

This is bold weight and italic text

This is bold weight and italic headline

This is bold weight and italic subheadline

This is regular weight and normal text

This is regular weight and normal headline

This is regular weight and normal subheadline

This is regular weight and italic text

This is regular weight and italic headline

This is regular weight and italic subheadline

This is semibold weight and normal text

This is semibold weight and normal headline

This is semibold weight and normal subheadline

This is semibold weight and italic text

This is semibold weight and italic headline

This is semibold weight and italic subheadline

Headline w/ Icon Position `before`

What we do at Pega is brilliant!

Headline w/ Icon Position `after`

What we do at Pega is brilliant!

Headline w/ Default Icon Position

What we do at Pega is brilliant!

Headline w/ Icon Options

What we do at Pega is brilliant!

Headline w/ `Left` Icon Position (Deprecated)

What we do at Pega is brilliant!

Headline w/ `Right` Icon Position (Deprecated)

What we do at Pega is brilliant!

This headline is a link, with Default Icon

This headline is also a link, with Defined Icon

This headline is also a link, without an Icon

What we do at Pega is brilliant!

Numbered Headline

Basic Usage

7Example numbered headline (w/o numberColor)

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

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

7Single-digit

42Double-digit

123Triple-digit

Icons Supported

1 Numbered Headline With Left Icon

2Numbered Headline With Right Icons

Align Support

1Numbered Headline - Left

2Numbered Headline - Center

3Numbered Headline - Right

4Numbered Eyebrow

1Numbered Headline (xxxlarge)

2Numbered Subheadline (xxlarge)

3Numbered Text

1Numbered Headline (xxsmall)

2Numbered Headline (xsmall)

3Numbered Headline (small)

5Numbered Headline (large)

6Numbered Headline (xlarge)

7Numbered Headline (xxlarge)

8Numbered Headline (xxxlarge)

numberColor

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

1Numbered Headline w/ Number

2Numbered Headline w/ Number

3Numbered Headline w/ Number

4Numbered Headline w/ Number

ANumbered Headline w/ Letter

BNumbered Headline w/ Letter

CNumbered Headline w/ Letter

DNumbered Headline w/ Letter

Theming

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

1Without numberColor

2Without numberColor

3Without numberColor

4Without numberColor

2.20.0

Bolt Hero

A large promo section that typically featuring a headline, call to action, and prominent imagery.

Published

History

yarn add @bolt/components-hero

Install

Source code

Dependencies

@bolt/components-band

@bolt/global

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

Overview

A large promo section, generally at the top of a page, typically featuring a headline, call to action and a prominent image.

Install via NPM

npm install @bolt/components-hero

Usage

  {% include "@bolt-components-hero/hero.twig" with {
  content: "Hero content goes here",
  background: "/images/heros/hero-background--yellow.svg",
  image: "/images/heros/hero-foreground--yellow.png",
  theme: "dark",
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
content	The content to display in the Hero	`string` , `array` , `object`	—	—
theme	Color theme to use within the Hero.	`string`	`none`	`xlight`, `light`, `dark`, `xdark`, `none`
background	The path to a background image that displays underneath the content / foreground image in the Hero.	`string`	—	—
image	The path to a foreground image that displays along-side the other Hero content.	`string`	—	—
imageAlign	Adjusts the Hero Image's horizontal alignment	`string`	`center`	`left`, `center`, `right`
imageValign	Adjusts the Hero Image's vertical alignment	`string`	`middle`	`top`, `middle`, `bottom`
imageMinWidth	Customizes the min width of the Hero Image	`string`	`none`	—
imageMaxWidth	Customizes the maximum width of the Hero Image	`string`	`450px`	—
reverseOrder	Reverses the order on larger screens (desktop) so the image comes first (left column) and the content comes second (right column).	`boolean`	`false`	—

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

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.

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

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

While Heros don't require an image...

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

Band Component Docs

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.

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

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

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

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.

2.20.0

Icon

Icon component in Bolt

Published

History

yarn add @bolt/components-icon

Install

Source code

Dependencies

@bolt/components-icons

Overview

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

Install via NPM

npm install @bolt/components-icon

Tips for custom icons:

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

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

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
name	Icon name	, `string`	—	—
background	Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!	`string`	`none`	`none`, `circle`, `square`
size	Icon size.	`string`	—	`small`, `medium`, `large`, `xlarge`
color	Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within.	`string`	`auto`	`auto`, `teal`, `blue`, `indigo`, `yellow`, `orange`, `gray`, `green`, `white`, `pink`

background: none

color: auto

background: circle

color: auto

background: square

color: auto

background: none

color: teal

background: circle

color: teal

background: square

color: teal

background: none

color: blue

background: circle

color: blue

background: square

color: blue

background: none

color: indigo

background: circle

color: indigo

background: square

color: indigo

background: none

color: yellow

background: circle

color: yellow

background: square

color: yellow

background: none

color: orange

background: circle

color: orange

background: square

color: orange

background: none

color: gray

background: circle

color: gray

background: square

color: gray

background: none

color: green

background: circle

color: green

background: square

color: green

background: none

color: white

background: circle

color: white

background: square

color: white

background: none

color: pink

background: circle

color: pink

background: square

color: pink

background: none

color: auto

background: circle

color: auto

background: square

color: auto

background: none

color: teal

background: circle

color: teal

background: square

color: teal

background: none

color: blue

background: circle

color: blue

background: square

color: blue

background: none

color: indigo

background: circle

color: indigo

background: square

color: indigo

background: none

color: yellow

background: circle

color: yellow

background: square

color: yellow

background: none

color: orange

background: circle

color: orange

background: square

color: orange

background: none

color: gray

background: circle

color: gray

background: square

color: gray

background: none

color: green

background: circle

color: green

background: square

color: green

background: none

color: white

background: circle

color: white

background: square

color: white

background: none

color: pink

background: circle

color: pink

background: square

color: pink

Custom SVG Icons

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

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

Adding Custom SVG Icons to Bolt

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

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

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

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

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

<bolt-icon name="custom-users" size="xlarge"></bolt-icon>

Adding a Custom SVG Icon - Retain Original Colors

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

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

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

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

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

<bolt-icon name="custom-arrow-left-colored" size="xlarge"></bolt-icon>

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

academy
add
add-open
add-solid
agile
app-development
app-exchange
arrow-left
asset-data
asset-infographic
asset-interactive
asset-link
asset-media
asset-podcast
asset-presentation
asset-text
asset-video
bolt-logo-colored
brand-meteor
brand-molecule
brand-operations
brand-orbit
brand-triangle
calendar
careers
case-management
chart-bar
check
check-circle
check-solid
chevron-down
chevron-left
chevron-right
chevron-up
close
close-circled
close-open
close-solid
cloud
co-browse
collaboration
communications
copy-to-clipboard
credit-card
customer-decision-hub
customer-onboarding
customer-service
data-integrations
discussions
documentation
download
email
energy
entertainment
exclamation
exit-full-screen
external-link
eye
eye-off
face-happy
face-sad
facebook
facebook-solid
field-service
field-service-gray
file-small
filter
financial
full-screen
github
global
government
healthcare
heart
hospitality
ideas
industries
info-open
info-solid
insurance
integration
intelligent-virtual-assistant
java
knowledgebase
launchpad
life-sciences
linkedin
linkedin-solid
list
lock
manufacturing
map-pin
map-pin-solid
marketing
marketing-gray
menu
minus-open
minus-solid
mobility
more
omni-channel
partners
pencil
platform
podcast
print
product
product-delivery
questions
refresh
reply
reporting
retail
robo-auto
sales-automation
scalability
search
share
star-solid
support
system-admin
thumbs-up-open
time-open
training
transportation
trash
twitter
twitter-solid
unlock
upload
user
user-interface
video
vision
warning
watch
workforce-intelligence
world-open
youtube-solid

academy
add
add-open
add-solid
agile
app-development
app-exchange
arrow-left
asset-data
asset-infographic
asset-interactive
asset-link
asset-media
asset-podcast
asset-presentation
asset-text
asset-video
bolt-logo-colored
brand-meteor
brand-molecule
brand-operations
brand-orbit
brand-triangle
calendar
careers
case-management
chart-bar
check
check-circle
check-solid
chevron-down
chevron-left
chevron-right
chevron-up
close
close-circled
close-open
close-solid
cloud
co-browse
collaboration
communications
copy-to-clipboard
credit-card
customer-decision-hub
customer-onboarding
customer-service
data-integrations
discussions
documentation
download
email
energy
entertainment
exclamation
exit-full-screen
external-link
eye
eye-off
face-happy
face-sad
facebook
facebook-solid
field-service
field-service-gray
file-small
filter
financial
full-screen
github
global
government
healthcare
heart
hospitality
ideas
industries
info-open
info-solid
insurance
integration
intelligent-virtual-assistant
java
knowledgebase
launchpad
life-sciences
linkedin
linkedin-solid
list
lock
manufacturing
map-pin
map-pin-solid
marketing
marketing-gray
menu
minus-open
minus-solid
mobility
more
omni-channel
partners
pencil
platform
podcast
print
product
product-delivery
questions
refresh
reply
reporting
retail
robo-auto
sales-automation
scalability
search
share
star-solid
support
system-admin
thumbs-up-open
time-open
training
transportation
trash
twitter
twitter-solid
unlock
upload
user
user-interface
video
vision
warning
watch
workforce-intelligence
world-open
youtube-solid

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>

2.20.0

Image

Image Component in Bolt

Published

History

yarn add @bolt/components-image

Install

Source code

Dependencies

@bolt/components-ratio

lazysizes

Overview

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

Install via NPM

npm install @bolt/components-image

Image sizes

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

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

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

Then pass it into the component:

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

Usage

  {% include '@bolt-components-image/image.twig' with {
  src: "/src/images/turtle.jpg",
  alt: "A Turtle"
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
src	Source url for image.	`string`	—	—
alt	Alt tag for image.	`string`	—	—
lazyload	Lazyload can boost performance by loading images on demand, instead of on initial page load.	`boolean`	`true`	`true` or `false`
no_lazy	Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to `true`.	`boolean`	`false`	`true` or `false`
placeholder_color	A valid CSS background color property shown while image loads.	`string`	`hsl(233, 33%, 97%)`	—
placeholder_image	Image path or image data shown while image loads.	`string`	`data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==`	—
srcset	A comma seperated string of image urls and image widths, used for optimizing image loading performance.	`string`	—	—
sizes	A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.	`string`	`auto`	—
useAspectRatio	Use the `ratio` prop instead.	`boolean`	`true`	`true` or `false`
ratio	Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.	`string` , `boolean`	`auto`	—
max_width	Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".	`string`	—	—
width	Override the default width of the image. If no height is provided, aspect ratio will be maintained.	`number` , `string`	—	—
height	Override the default height of the image. If no width is provided, aspect ratio will be maintained.	`number` , `string`	—	—
cover	Set an image to fill its container.	`boolean`	`false`	`true` or `false`
imageAttributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
valign	Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top \| center \| bottom) or via specific pixel or percent offset (ex. 30%).	`string`	`center`	—
align	Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left \| center \| right) or via specific pixel or percent offset (ex. 30%).	`string`	`center`	—

640x480 jpg

500x500 jpg

1151x638 jpg

1151x638 jpeg

2712x2300 png

3000x5336 jpeg

124x33 svg

Src: Root Relative

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

Src: Source Set

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

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

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

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

Absolute src - not lazy loaded

Absolute src - lazy loaded

Jpg: Lazyload true

Jpg: Lazyload false

Png: Lazyload true

Png: Lazyload false

Svg: Lazyload: true

Svg: Lazyload: false

Custom Height and Width, JPEG (2:1)

Custom Height and Width, PNG (2:1)

Custom Height and Width, SVG (10:1)

Custom Max-Width, JPG (200px)

Image Zoom

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

Web Component Usage

Bolt Image is a web component that renders a semantic <img> tag with Bolt styles. All that's required to make a <bolt-image> are the src and alt attributes.

<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber"></bolt-image>

Responsize Images

Optionally, pass srcset and sizes to <bolt-image> for responsive images.

<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-320.jpg 320w" sizes="auto" alt="A Rock Climber"></bolt-image>

Setting the Aspect-ratio

Setting the aspect ratio on an image provides a placeholder while the image is loading. Do this by adding the ratio attribute with the image's aspect-ratio as slash-separated values, e.g. "4/3" or "400/300".

<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="4/3"></bolt-image>

Lazyloading

Lazyloading is on by default. Turn it off with the no-lazy attribute.

<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" no-lazy></bolt-image>

Custom Placeholder

Placeholder image and color options can be set via the attributes placeholder-image and placeholder-color where "image" is an image path and "color" is a valid CSS background-color. Note: the ratio attribute must be provided for placholder image or color to display.

<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="4/3" placeholder-color="#D3D3D3" placeholder-image="http://placehold.it/400x300"></bolt-image>

2.20.0

Link

Link Component

Published

History

yarn add @bolt/components-link

Install

Source code

Dependencies

This is a flex link with an icon. Very important to note that flex links are never to be mixed inline within a paragraph of non-link text because the text wraps differently and the icon hangs to the side.

ajv

Overview

Text link styles. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-link

Usage

  {% include "@bolt-components-link/link.twig" with {
  text: "This is a link",
  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-style attributes object with extra attributes to append to this component.	`object`	—	—
display	Display either an inline, block, or flex link (icons can hang on either side).	`string`	`inline`	`inline`, `flex`, `block`
valign	Controls the vertical alignment of text and icon.	`string`	`center`	`start` or `center`
text	Renderable text content for the link.	`string` , `object` , `array`	—	—
url	Contains a URL that the link points to. This may also be passed as part of `attributes`.	`string`	—	—
target	Specifies where to display the linked URL. This may also be passed as part of `attributes`.	`string`	—	—
icon	Bolt icon. Accepts the same options as Bolt Icon Component `@bolt-components-icon` plus an additional 'position' parameter that determines placement within the button.	`object`	—	@bolt-components-icon/icon.schema.json > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `name` Icon name Type: string — `background` Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than `none` will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes! Type: string `none`, `circle`, `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color palette. Picking an option other than `auto` will override the default colors based on the color theme is placed within. Type: string `auto`, `teal`, `blue`, `indigo`, `yellow`, `orange`, `gray`, `green`, `white`, `pink`
isHeadline	Whether this link should get special headline styling treatment.	`boolean`	—	—
href	Use url instead.		—	—

This is a text link

Inline link

This is an inline link with an icon before, and this is an inline link with an icon after. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.

Flex link

Block link

This is a block link with an icon. Very important to note that block links are never to be mixed inline within a paragraph of non-link text because they act as a paragraph themselves.

Icon before (default)

Icon after

Different icons

Text link

Web Component Usage

Bolt Link is a web component that renders a semantic link with Bolt styles. To make a simple link, wrap a semantic <a> element with a <bolt-link> element. Common HTML attributes such as href and target placed on the <a> would work as expected.

<bolt-link> <a href="https://pega.com" target="_blank">This is a link</a> </bolt-link>

Inline Links

When using inline links, do not add line breaks in or around your <bolt-icon> tag. Inline links will show the white-space added by line breaks, so removing them is necessary to eliminate unwanted space.

This is an inline link, and this is an inline link with an icon. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.

<p>This is an <bolt-link><a href="https://pega.com">inline link</a></bolt-link>, and this is an <bolt-link><a href="https://pega.com"><bolt-icon slot="before" name="info-open"></bolt-icon>inline link with an icon</a></bolt-link>. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.</p>

Links with Icons

To add icons to <bolt-link>, place a <bolt-icon> next to your link text. For icons to have the correct spacing, you must add the slot attribute to <bolt-icon>. The slot value can be before or after.

This is a link with icon

2.20.0

List

List Component in Bolt

Published

History

yarn add @bolt/components-list

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-list

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
items *	Generates an array of items, each can contain renderable content (i.e. a string, render array, or included pattern).	`array`	—	—
tag	Apply the semantic tag for the list.	`string`	`ul`	`ul`, `ol`, `div`, `span`
display	Display either an inline list of items or a block (stacked) list of items. Responsive options are also available for transforming from block to inline at specific breakpoints.	`string`	`block`	`block`, `flex`, `inline`, `inline@xxsmall`, `inline@xsmall`, `inline@small`, `inline@medium`
spacing	Control the spacing in between items.	`string`	`xsmall`	`none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`
separator	Display a separator in between items.	`string`	`none`	`none`, `solid`, `dashed`
inset	Turn spacing to the inside of each item.	`boolean`	`false`	`true` or `false`
align	Control the horizontal alignment of items.	`string`	`start`	`start`, `center`, `end`, `justify`
valign	Control the vertical alignment of items.	`string`	`center`	`start`, `center`, `end`
nowrap	Prevent inline/flex list items from wrapping to a second line.	`boolean`	`false`	`true` or `false`

Item 1

Item 2

Item 3

Inline list of different items

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

Item 1

Item 2

Item 3

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

ul

ol

div

span

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

Inline list with nowrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex list with nowrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Web Component Usage

Bolt Button is a web component, you can simply use <bolt-list> in the markup to make it render.

Item 1

Item 2

Item 3

<bolt-list> <bolt-list-item>Item 1</bolt-list-item> <bolt-list-item>Item 2</bolt-list-item> <bolt-list-item>Item 3</bolt-list-item> </bolt-list>

Basic Usage

All the props defined in the schema table can be used directly on the <bolt-list> element.

Item 1

Item 2

Item 3

<bolt-list display="inline" spacing="xsmall" separator="dashed" align="center" > <bolt-list-item>Item 1</bolt-list-item> <bolt-list-item>Item 2</bolt-list-item> <bolt-list-item>Item 3</bolt-list-item> </bolt-list>

Advanced Usage

Instead of passing plain text into each item, you may also pass other Bolt components or regular HTML.

Item 1

Item 2

Item 3

<bolt-list display="inline"> <bolt-list-item> <bolt-link url="https://pega.com"> Item 1 </bolt-link> </bolt-list-item> <bolt-list-item> <bolt-chip url="https://pega.com"> Item 2 </bolt-chip> </bolt-list-item> <bolt-list-item> <bolt-button url="https://pega.com"> Item 3 </bolt-button> </bolt-list-item> </bolt-list>

2.20.0

Logo

Logo Component in Bolt

Published

History

yarn add @bolt/components-logo

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-logo

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
invert	Set to true to invert the logo colors.	`boolean`	—	—

2.20.0

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag.	`object`	—	—
items	Generates an array of items, each item is a <bolt-trigger>. While the content prop for each item can accept anything custom content, plain text is the recommended format.	`array`	—	[items]: Type: `object` A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag. Properties: `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: `object` `content` Main content of the trigger (Twig only). Type: `string`, `array`, `object` `url` Contains a URL that the link points to. This may also be passed as part of `attributes`. Type: `string` `target` Specifies where to display the linked URL. This may also be passed as part of `attributes`. Type: `string` `type` Determines the button tag type for semantic buttons Type: `string` Enum: `button`, `submit`, `reset` `cursor` Type of cursor shown on hover. Type: `string` Enum: `auto`, `pointer`, `zoom-in`, `zoom-out` `on_click` The name of a method on the `on_click_target`. Type: `string` `on_click_target` `className` (e.g. "js-click-me") used in `querySelector` to reference a web component on the page. `onClick`, the `on_click` method name will be called on this element. Type: `string` `disabled` Make trigger unusable and un-clickable. Only applies to `button`. Type: `boolean`
title	Controls the inset spacing of each menu item.	`string`	—	—
spacing	Controls the inset spacing of each menu item.	`string`	`small`	`xsmall`, `small`, `medium`

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

Menu title

Create a title for the menu by using the title prop.

Menu with xsmall spacing

Menu with small spacing

Menu with medium spacing

Button and link items

An item can be either a button or link, and additional attributes can be passed by using the attributes prop.

Popover menu

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

Menu inside a xdark theme

Menu inside a dark theme

Menu inside a light theme

Menu inside a xlight theme

Web Component Usage

Bolt Menu is a web component, you can simply use <bolt-menu> in the markup to make it render.

Menu item 1

Menu item 2

Menu item 3

<bolt-menu> <bolt-menu-item> Menu item 1 </bolt-menu-item> <bolt-menu-item> Menu item 2 </bolt-menu-item> <bolt-menu-item> Menu item 3 </bolt-menu-item> </bolt-menu>

Prop Usage

Configure the menu with the properties specified in the schema.

Menu Options

Menu item 1 is a button

Menu item 2 is a link

<bolt-menu spacing="medium"> <span slot="title">Menu Options</span> <bolt-menu-item> Menu item 1 is a button </bolt-menu-item> <bolt-menu-item url="https://pega.com"> Menu item 2 is a link </bolt-menu-item> </bolt-menu>

2.20.0

Modal

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

Published

History

yarn add @bolt/components-modal

Install

Source code

Dependencies

@a11y/focus-trap

@bolt/components-text

Overview

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

Install via NPM

npm install @bolt/components-modal

Usage

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

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Used to apply additional HTML attributes to the outer <bolt-modal> tag.	`object`	—	—
width	Controls the width of the modal container.	`string`	`optimal`	`full`, `regular`, `optimal`, `auto`
spacing	Controls the spacing around the modal container.	`string`	`medium`	`none`, `small`, `medium`, `large`
theme	Controls the color theme of the modal container.	`string`	`xlight`	`none`, `xlight`, `light`, `dark`, `xdark`
scroll	Controls the scrolling area.	`string`	`container`	`overall` or `container`
uuid	Unique ID for modal, randomly generated if not provided.	`string`	—	—
slots	There are 3 sections (slots) within the modal container. By assigning the appropriate slot name, content will be passed into the respective section.	`object`	—	`default` The body section of the modal container. — `header` The header section of the modal container. — `footer` The footer section of the modal container. —

Advanced Schema Options

Open Accordion Close Accordion

disabled	Default `disabled` prop supported globally by most Bolt components.	`boolean`	—	—
no_shadow	Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—
no-shadow	Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—

The modal container's width can be adjusted by the width prop. The default is set to optimal.

Width Options

Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
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.

The modal container's spacing can be adjusted by the spacing prop. The default is set to medium.

Spacing Options

Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
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.

The modal container's coloring theme can be adjusted by the theme prop. The default is set to xlight.

Theme Options

Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
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.

The scrollable area can be adjusted by using the scroll prop. The default is set to container.

Scroll Options

Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).
	This makes the overall viewport area scrollable.
	This makes the modal container itself scrollable.

Trigger Options

This modal is triggered by a button. The Button component is the standard method to trigger a modal.

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

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

~~Link trigger~~ Link trigger is currently not supported.

Custom JavaScript Usage

You can write custom JavaScript to target the modal and attach behaviors. The following is an example of how you can use JavaScript to manipulate the Modal component. Please note that Bolt does not ship with any of this custom JavaScript.

Demo

Automatically open a modal

Use custom JavaScript to automatically open a modal on page load, after a short delay. Click on the "Activate JavaScript" button to see a demo. The page will reload and a modal will open after 3 seconds.

Custom JavaScript

Demo

Automatically close a modal

Use custom JavaScript to automatically close a modal after a set period of time. Click on the "Open Modal" button to see a demo. The modal will open and automatically close after 3 seconds.

Custom JavaScript

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.

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 .

Video Modal Usage

There are two options for playing a video in a modal. Both require some custom JavaScript.

Option 1: Modal triggers Video

Clicking a button calls a modal's show method. Custom JavaScript listens for the event and plays the video when it happens.

Demo

Custom JavaScript

Option 2: Video triggers Modal

Clicking a button calls a video's toggle method. Custom JavaScript listens for the event and opens the modal when it happens.

Demo

Custom JavaScript

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.

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.

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.

"on-click": "show", "on-click-target": "js-modal-123"

Web Component Usage

Modal is a web component. You can simply use <bolt-modal> in the markup to make it render. In the following examples, we use onclick to trigger the modal. However, the same options shown on the Trigger Options page are also available on the web component.

Open Modal

<bolt-button on-click="show" on-click-target="js-bolt-modal-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-demo"> This is a modal. </bolt-modal>

Basic Usage

The modal container has 3 sections (slots) for passing content, header, default, footer. To pass content to either the header or footer, slot must be defined.

Open Modal

<bolt-button on-click="show" on-click-target="js-bolt-modal-basic-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-basic-demo"> <bolt-text slot="header">This is the header</bolt-text> <bolt-text>This is the body (default).</bolt-text> <bolt-text slot="footer">This is the footer</bolt-text> </bolt-modal>

Trigger Usage

When using an open button that comes right before a <bolt-modal>, set onclick to this.nextElementSibling.show().

When using a close button that's inside a <bolt-modal>, set onclick to this.closest('bolt-modal').hide().

Open Modal

<bolt-button on-click="show" on-click-target="js-bolt-modal-trigger-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-trigger-demo"> <bolt-text>This modal has a close button along with the content.</bolt-text> <bolt-button on-click="hide">Close Modal</bolt-button> </bolt-modal>

Advanced Usage

The web component has all the options shown in the schema table. You can define each prop on the <bolt-modal> element. Use unique combinations to customize a modal to your liking.

Open Modal

<bolt-button on-click="show" on-click-target="js-bolt-modal-advanced-demo"> Open Modal </bolt-button> <bolt-modal width="optimal" spacing="none" theme="none" scroll="overall" class="js-bolt-modal-advanced-demo"> <bolt-image src="/images/content/backgrounds/background-robotics-customer-service.jpg" alt="This is an image"></bolt-image> </bolt-modal>

Server-side Rendered Web Components (Experimental)

The Modal component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!

Open Modal

{% filter bolt_ssr %} <bolt-button on-click="show" on-click-target="js-bolt-modal-ssr-demo"> Open Modal </bolt-button> <bolt-modal class="js-bolt-modal-ssr-demo"> This is a modal. </bolt-modal> {% endfilter %}

Section 1

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

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

Section 2

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

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

Section 3

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

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

Section 4

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

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

Section 5

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

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

Section 6

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

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

2.20.0

Navbar

Navbar Component in Bolt

Published

History

yarn add @bolt/components-navbar

Install

Source code

@bolt/components-nav-indicator

Dependencies

@bolt/components-nav-priority

@bolt/components-navlink

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

Overview

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

Install via NPM

npm install @bolt/components-navbar

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
theme	Color theme. Can be set to 'none' for a transparent background.	`string`	`dark`	`xlight`, `light`, `dark`, `xdark`, `none`
title	Navbar title. Icon is optional. Tag can be set to h1 to h6 depending on the page.	`object`	—	`tag` `h1`, `h2`, `h3`, `h4`, `h5`, `h6` `text` — `icon` `name` Name of the (optional) icon to be used. —
center	Determines if you want the Navbar content to be center aligned or not	`boolean`	—	`true` or `false`
width	Adjusts the Navbar's overall maximum width behavior -- either filling up the entire browser's total screen width (full) or just the component's parent container width (auto).	`string`	`full`	`full` or `auto`
links	(Inherited from nav-priority) Array of links	`array`	—	[items]: Type: `object` Properties: `text` Type: `string` `url` Type: `string`
moreText	(Inherited from nav-priority) Button text that displays when the Priority+ Nav Dropdown is displayed.	`string`	`More`	—
offset	(Inherited from nav-indicator) Number of pixels taken up by sticky items at the top of the page. Used for smooth scroll and gumshoe.	`integer`	—	—

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

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

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

Title Text

This provides maximum flexibility when coming up with creative solutions.

Theme: xlight

Theme: light

Theme: dark

Theme: xdark

Theme: none

Activate linked title by passing in an url

Remove theme and gradient for a transparent option

2.20.0

Ordered List

Ordered-list Component in Bolt

Published

History

yarn add @bolt/components-ol

Install

Source code

Dependencies

@bolt/components-li

Overview

Stylistic numbered list for article content.

Install via NPM

npm install @bolt/components-ol

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
contentItems	Use the items prop instead.	`array`	—	[items]: Type: `object` A single list item object with either a `text` or `contentItems` key Properties: `text` Type: `string` `contentItems` Passes to `@bolt/text.twig` Type: `object`
items *	All items can be simple text or `items`.	`array`	—	[items]: Type: `string, object, array` Renderable content (i.e. a string, render array, or included pattern) for a single list item.

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

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

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

Sub Item 5

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

2.20.0

Page Footer

(In Progress) Page Footer Component

Published

History

yarn add @bolt/components-page-footer

Install

Source code

Dependencies

@bolt/components-band

Overview

Component in progress

Install via NPM

npm install @bolt/components-page-footer

Content

Set content as arbitrary HTML:

{% set content %}
  <p>Whatever HTML content you want</p>
{% endset %}

Usage

  {% include "@bolt-components-page-footer/page-footer.twig" with {
  content: content
} only %}

2.20.0

Page Header

(In Progress) Page Header Component

Published

History

yarn add @bolt/components-page-header

Install

Source code

@bolt/components-typeahead

Dependencies

Overview

Component in progress

Install via NPM

npm install @bolt/components-page-header

Content

Set content as arbitrary HTML:

{% set content %}
  <p>Whatever HTML content you want</p>
{% endset %}

Usage

  {% include "@bolt-components-page-header/page-header.twig" with {
  content: content
} only %}

2.20.0

Bolt Pagination

Pagination Component in Bolt

Published

History

yarn add @bolt/components-pagination

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-pagination

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

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

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

Bolt Placeholder Example

xsmall Placeholder

small Placeholder

medium Placeholder

large Placeholder

xlarge Placeholder

Bolt Placeholder Example

2.20.0

Popover

A small overlay that opens on demand.

Published

History

yarn add @bolt/components-popover

Install

Source code

Dependencies

@popperjs/core

mousetrap

Overview

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

Install via NPM

npm install @bolt/components-popover

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-popover> tag.	`object`	—	—
trigger	Renders the trigger of the popover. Usually a link or button is used.	`object`	—	—
content	Renders the content of the popover, which can be structured content that may contain calls to action.	`any`	—	—
placement	Sets the preferred placement of the popover. The actual placement of the popover will be automatically adjusted based on the space available on screen.	`string`	`bottom`	`auto`, `top-start`, `top`, `top-end`, `left-start`, `left`, `left-end`, `right-start`, `right`, `right-end`, `bottom-start`, `bottom`, `bottom-end`
spacing	Controls the spacing around the popover content.	`string`	`small`	`none`, `xsmall`, `small`, `medium`
theme	Applies a Bolt color theme to the bubble that contains the main Popover content.	`string`	`none`	`none`, `xlight`, `light`, `dark`, `xdark`
boundary	Optionally allows you to specify a parent element's CSS selector to use as an outer boundary when calculating placement.	`string`	—	—
fallbackPlacements	An array of different placement options that Popper.js should try if there isn't enough space for the ideal placement. Normally this defaults to all placement options however this lets you limit the options to pick from in certain situations.	`array`	—	—
uuid	Unique ID for popover, randomly generated if not provided.	`string`	—	—

Preferred placement

Auto placement

Content spacing

Adjust the inset spacing of the content by using the spacing prop.

Popover menu

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

Content theme

Adjust the Bolt color theme of the content by using the theme prop.

Web Component Usage

Bolt Popover is a web component, you can simply use <bolt-popover> in the markup to make it render.

This triggers a popover

Content

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

<bolt-popover> <bolt-button size="small"> This triggers a popover </bolt-button> <div slot="content"> <bolt-text headline font-size="small">Content</bolt-text> <bolt-text font-size="xsmall">This is the content of the popover with a <bolt-link url="https://pega.com">call to action</bolt-link>.</bolt-text> </div> </bolt-popover>

Prop Usage

Configure the popover with the properties specified in the schema.

Popover Menu

Menu Item 1

Menu Item 2

Menu Item 3

<bolt-popover spacing="none" placement="top-start"> <bolt-button size="small"> Popover Menu </bolt-button> <div slot="content"> <bolt-menu> <bolt-menu-item> Menu Item 1 </bolt-menu-item> <bolt-menu-item> Menu Item 2 </bolt-menu-item> <bolt-menu-item> Menu Item 3 </bolt-menu-item> </bolt-menu> </div> </bolt-popover>

Search Filter

Search Filter Component in Bolt

In Progress (Unreleased)

History

Dependencies

@bolt/components-button-group

Overview

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

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

Install via NPM

npm install @bolt/search-filter

Usage

  {% include "@bolt-components-search-filter/search-filter.twig" with {
  "content": "Insert search filters here."
} 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	Renderable content (e.g. a string, render array, or included pattern) to display within a modal at mobile breakpoints. Typically, this is where the filters themselves go.		—	—

2.20.0

Share

Share Component in Bolt

Published

History

yarn add @bolt/components-share

Install

Source code

@bolt/components-copy-to-clipboard

Dependencies

@bolt/components-list

Overview

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

Install via NPM

npm install @bolt/components-share

Description

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

OG Tags

OG tags MUST be present for share functionality to work correctly (see example below)
The only currently supported share methods are:
- Facebook
- Twitter
- LinkedIn
- Email
- Copy to Clipboard (component)
Facebook only needs u (URL) to scrap the page's OG Tags
- Facebook Sharing API resources: https://developers.facebook.com/docs/sharing/reference/share-dialog#params_share
- Facebook Open Graph Debuger: https://developers.facebook.com/tools/debug/
Twitter Needs at least one of the following query vars:
- url (recommended -- URL included with the Twee)
- text (recommended -- re-populated text highlighted in the Tweet composer)
- via (Attribute the source of a Tweet to a Twitter username, no @ needed)
- hashtags (A comma-separated list of hashtags to be appended to default Tweet text)
- Twitter Tweet API resources: https://dev.twitter.com/web/tweet-button/parameters#tweet-content-parameters
- Twitter card validator: https://cards-dev.twitter.com/validator
LinkedIn only needs url to scrap the page's OG Tags, but also can include:
- title
- summary
- source
- LinkedIn Sharing API resources: https://developer.linkedin.com/docs/share-on-linkedin (click "Customized URL")
Email Recommended query vars:
- subject
- body

Example

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

Best Practices

Don't use the share tool with a page's related sections
Implement any "stickiness" and placement functionality on the platform the component is being used in
For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
Don't have the fixed position of the component overlap any "related content"

Usage

  {% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse"
    },
    {
      name: "twitter",
      url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
    },
    {
      name: "linkedin",
      url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
    },
    {
      name: "email",
      url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
    }
  ],
  copy_to_clipboard: {
    text_to_copy: "https://boltdesignsystem.com"
  },
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
text	Defines the label text in front of the social icons.	`string`	`Share this page`	—
size	Controls the size of icons and spacing.	`string`	`medium`	`small` or `medium`
align	Controls the horizontal alignment of label text and icons.	`string`	`start`	`start`, `center`, `end`
opacity	Controls the overall transparency of the share tool.	`integer`	`100`	`100`, `80`, `60`, `40`, `20`
sources	Social media sources to share to.	`array`	—	[items]: Type: `object` Properties: `name` Name of the social media source. Type: `string` Enum: `facebook`, `twitter`, `linkedin`, `email` `url` The specifically formed share URL with query string. Type: `string`
copy_to_clipboard		`object`	—	@bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `text` This property has been renamed trigger_text Type: string — `copiedText` Use the custom_confirmation property instead if you need to change the confirmation text. Type: string — `iconSize` Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size. Type: string — `url` This property has been renamed text_to_copy Type: string — `trigger_text` Text to use for the inital copy button. Ignored if the custom_trigger property is used. Type: string — `text_to_copy` The text to copy to the clipboard. Type: string — `custom_trigger` (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed. Type: string, object, array — `custom_transition` (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon. Type: string, object, array — `custom_confirmation` (optional) Custom content to show after a successful copy. Type: string, object, array —
inline	Button version has been removed so this prop is no longer needed.		—	—
copyToClipboard	Please use copy_to_clipboard.		—	—

Small Size

Medium Size

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

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

Align: start

Align: center

Align: end

xdark

dark

light

xlight

2.20.0

Stack

A container component that defines spacing between elements vertically

Published

History

yarn add @bolt/components-stack

Install

Source code

Dependencies

Overview

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

Install via NPM

npm install @bolt/components-stack

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-stack> tag.	`object`	—	—
spacing	Control the spacing in between items.	`string`	`medium`	`xlarge`, `large`, `medium`, `small`, `xsmall`, `none`
content	Content of the stack.	`string` , `array` , `object`	—	—

Advanced Schema Options

Open Accordion Close Accordion

no_shadow	Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—
no-shadow	Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—

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

This is another stack.

Multiple stacks with xlarge spacing

This stack has xlarge spacing.

Multiple stacks with large spacing

This stack has large spacing.

Multiple stacks with medium spacing

This stack has medium spacing.

Multiple stacks with small spacing

This stack has small spacing.

Multiple stacks with xsmall spacing

This stack has xsmall spacing.

Multiple stacks with none spacing

This stack has none spacing.

2.20.0

Sticky

Sticky Component in Bolt

Published

History

yarn add @bolt/components-sticky

Install

Source code

Dependencies

stickyfilljs

Overview

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

Install via NPM

npm install @bolt/components-sticky

Usage

  {% embed "@bolt-components-sticky/sticky.twig" %}
  {% block sticky_content %}

    // Sticky content

  {% endblock %}
{% endembed %}

2.20.0

Table

Table Component in Bolt

Published

History

yarn add @bolt/components-table

Install

Source code

Dependencies

himalaya

Overview

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

Install via NPM

npm install @bolt/components-table

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
headers	Generates top and side headers, each can contain an array of `cells`.	`object`	—	`top` `cells` Each item represents a cell in the top header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys. [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object` `side` `cells` Each item represents a cell in the side header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object`
rows *	Generates an array of rows, each can contain an array of `cells`.	`array`	—	`cells` Each item represents a cell in a row. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object`
footer	Generates a table footer, can contain an array of `cells`.	`object`	—	`cells` Each item represents a cell in the footer. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys [items]: Type: `any` Properties: `content` Type: `string` `attributes` Type: `object`
format	Display either a regular table or a more complex numeric table.	`string`	`regular`	`regular` or `numeric`
borderless	Removes the vertical border in between cells.	`boolean`	`false`	`true` or `false`
first_col_fixed_width	Sets the width of the first column to be as wide as the longest text.	`boolean`	`false`	`true` or `false`

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
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.	OpenSpan.Updater.Git.dll OpenSpan.Updater.Initializer.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.PreReqCheck.dll OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ServerClientInterface.Tester.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.X509tool.exe OpenSpan.UpdaterService.Remoting.dll OpenSpan.UpdaterService.exe
Build 1.1.354 — SR-44889	SR-44850	This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches.	ManagedOpenSsl.dll

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

Regular Format

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

Numeric Format

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

Remove the vertical border in between cells.

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

Set column widths to be flexible.

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

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

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

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	This cell spans 2 columns, 2 rows and has an utility class.
Footer	This cell spans 2 columns and has an utility class.		FC3	FC4

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

Pass different items into cells

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

Web Component Usage

Bolt Table is a web component that renders a semantic table with Bolt styles. To make a simple table, wrap a semantic <table> element with a <bolt-table> element.

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

<bolt-table> <table> <thead> <tr> <td></td> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <th>Row 2</th> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> <tr> <th>Row 3</th> <td>R3C1</td> <td>R3C2</td> <td>R3C3</td> </tr> </tbody> <tfoot> <tr> <th>Footer</th> <td>FC1</td> <td>FC2</td> <td>FC3</td> </tr> </tfoot> </table> </bolt-table>

Prop Usage

Configure the table with the properties specified in the schema.

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

<bolt-table format="numeric" borderless> <table> <thead> <tr> <td></td> <td>Pts</td> <td>Reb</td> <td>Ast</td> <td>Stl</td> <td>Blk</td> </tr> </thead> <tbody> <tr> <th>Michael Jordan</th> <td>70</td> <td>10</td> <td>2</td> <td>5</td> <td>1</td> </tr> <tr> <th>Toni Kukoc</th> <td>21</td> <td>15</td> <td>10</td> <td>3</td> <td>4</td> </tr> <tr> <th>Steve Kerr</th> <td>5</td> <td>2</td> <td>20</td> <td>5</td> <td>0</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>91</td> <td>27</td> <td>32</td> <td>13</td> <td>5</td> </tr> </tfoot> </table> </bolt-table>

Advanced Usage

Attributes and utility classes are supported on table headers and cells.

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

<bolt-table> <table> <thead> <tr> <td></td> <th colspan="2" class="u-bolt-color-indigo-light"> This cell spans 2 columns and has an utility class. </th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <th>Row 1</th> <td>R1C1</td> <td>R1C2</td> <td colspan="2" class="u-bolt-color-orange-dark"> This cell spans 2 columns and has an utility class. </td> </tr> <tr> <th>Row 2</th> <td>R2C1</td> <td>R2C2</td> <td colspan="2" rowspan="2" class="u-bolt-color-orange-dark"> This cell spans 2 columns, 2 rows and has an utility class. </td> </tr> <tr> <th>Row 3</th> <td>R3C1</td> <td>R3C2</td> </tr> </tbody> <tfoot> <tr> <th>Footer</th> <td colspan="2" class="u-bolt-color-teal"> This cell spans 2 columns and has an utility class. </td> <td>FC3</td> <td>FC4</td> </tr> </tfoot> </table> </bolt-table>

Accepted Data

Each table header or cell can accept any Bolt web components, HTML markup, or just plain text.

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

<bolt-table first-col-fixed-width> <table> <thead> <tr> <td></td> <th>Item number</th> <th>Description</th> <th>Assemblies</th> </tr> </thead> <tbody> <tr> <th> <bolt-text headline font-size="small" text-transform="uppercase" letter-spacing="wide"> Build 2.0.1.0 — SR-49969 </bolt-text> </th> <td> <bolt-button size="small" url="#!">SR-49941</bolt-button> </td> <td> This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. </td> <td> OpenSpan.UpdaterService.Remoting.dll<br> OpenSpan.Updater.ServerClientInterface.dll<br> OpenSpan.Updater.ScheduledTasks.dll<br> OpenSpan.Updater.PrePostOperation.dll<br> OpenSpan.Updater.Git.dll<br> OpenSpan.VersionFinder.exe<br> OpenSpan.UpdaterService.exe<br> OpenSpan.Updater.X509tool.exe<br> OpenSpan.Updater.UserHelper.exe<br> OpenSpan.Updater.UninstallHelper.exe<br> OpenSpan.Updater.RuntimeLauncher.exe<br> OpenSpan.Updater.InstallHelper.exe<br> OpenSpan.Updater.Initializer.exe </td> </tr> <tr> <th>Build 2.0.1.0 — SR-49969</th> <td>SR-44869</td> <td> <img src="http://fillmurray.com/200/200"> </td> <td>OpenSpan.Updater.Git.dll</td> </tr> <tr> <th rowspan="2">Build 1.1.360 — SR-44891</th> <td>SR-43163</td> <td> This hotfix adds a list of post-update tasks to the <span>RuntimeConfig.xml </span>file. These tasks are run after files that match a pattern you specify are updated. </td> <td> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-50.jpg 50w, /images/placeholders/tout-4x3-climber-100.jpg 100w, /images/placeholders/tout-4x3-climber-200.jpg 200w, /images/placeholders/tout-4x3-climber-320.jpg 320w, /images/placeholders/tout-4x3-climber-480.jpg 480w, /images/placeholders/tout-4x3-climber-640.jpg 640w" alt="A Rock Climber" ratio="64/48"></bolt-image> </td> </tr> <tr> <td> <bolt-chip tag="a" url="#!">SR-44850</bolt-chip> </td> <td> This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. </td> <td>ManagedOpenSsl.dll</td> </tr> </tbody> </table> </bolt-table>

2.20.0

Tabs

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

Published

History

yarn add @bolt/components-tabs

Install

Source code

Dependencies

@ungap/url-search-params

Overview

Install via NPM

npm install @bolt/components-tabs

Usage

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

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
panels	All of the tab panels. Each panel should contain a label and content.	`array`	—	[items]: Type: `object` Properties: `label` Tab label used in the navigation. Twig only. Type: `string` `content` Tab panel content. Type: `string`, `object`, `array` `selected` Set active state on tab. Only one active tab allowed at a time. Defaults to first tab. Type: `boolean` `id` Unique identifier for each tab label, may be used for deep linking. Type: `string`
align	Horizontal alignment of tab labels.	`string`	`start`	`start`, `center`, `end`
label_spacing	Set label spacing.	`string`	`small`	`small` or `medium`
panel_spacing	Set panel spacing.	`string`	`small`	`none`, `small`, `medium`
inset	Controls spacing placement on tab labels and panels.	`string`	`auto`	`auto`, `on`, `off`
selected_tab	- Minimum is 1 Set selected tab by number. To select the second tab, set to 2.	`integer`	`1`	—
scrollOffsetSelector	Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector.	`string`	—	—
scrollOffset	Additional offset for smooth scrolling, integer converted to pixel value.	`integer`	—	—

Tab label 1

Tab panel 1

Tab label 2

Tab panel 2

Tab label 3

Tab panel 3

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

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

A teaser

Eyebrow

This is a headline.

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

A table

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

An image

A video

Tabs

Tab label 1

Tab panel 1

Tab label 2

Tab panel 2

Tab label 3

Tab panel 3

An accordion

Accordion item 1

Open Accordion Close Accordion

This is the accordion content.

Accordion item 2

Open Accordion Close Accordion

This is the accordion content.

Accordion item 3

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

Use selected_tab prop to pre-selected a tab by number. To select the second tab, set selected_tab to 2. Defaults to first.

Tab label 1

Tab panel 1

Tab label 2

Tab panel 2

Tab label 3

Tab panel 3

Tabbed Band

A Tabbed Band is a high-level content container that utilizes a specific configuration of the Band and the Tabs components. Tabs will need the following props:

inset: "off", label_spacing: "medium", panel_spacing: "medium",

This is a Tabbed Band

This is Tab 1

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

This is Tab 2

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

This is Tab 3

Customer Decision Hub

Infuse real-time AI into every customer engagement

There’s nothing artificial about Pega’s proven AI. This always-on brain gets results. Using pragmatic artificial intelligence and decision management, you can improve response rates by up to 6X, NPS by 30 points, and get ROI as high as 500%.

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

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

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

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

2.20.0

Teaser

Teaser Component

Published

History

yarn add @bolt/components-teaser

Install

Source code

Dependencies

@bolt/components-logo

Overview

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

Install via NPM

npm install @bolt/components-teaser

Usage

  {% include "@bolt-components-teaser/teaser.twig" with {
  content: "Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  buttons: [
    {
      pattern: "button",
      style: "primary",
      text: "CTA 1"
    },
    {
      pattern: "button",
      style: "secondary",
      text: "CTA 2"
    }
  ]
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
eyebrow	Eyebrow text component	`object`	—	@bolt-components-headline/headline.schema.yml > Object details `text` Renderable text content of the headline. Type: string, object, array — `tag` Html tag. Type: string `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span`, `cite`, `div` `align` Text alignment. Type: string `left`, `center`, `right` `weight` Font weights. Type: string `light`, `bold`, `regular`, `semibold` `style` Font styles. Type: string `normal` or `italic` `size` Font size. Type: string `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge` `autoshrink` Automatically shrink the font size used in the `xxxlarge` headline size when 60 or more characters are used. Type: boolean — `transform` Text transformation. Type: string `uppercase`, `lowercase`, `capitalize` `url` If provided, turns headline into a link to given url. Type: string — `icon` Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by `@bolt-components-icon` or 3) the string "none" to explicitly remove default icons Type: — `quoted` Adds quoted styling to text. Type: boolean — `numberText` Text that displays in a small circle to the left of the main Headline text. Providing content will trigger the bullet to appear. Type: string, number — `numberColor` The optional background color of the Headline bullet. Uses inherited theme colors if unspecified. Type: string `teal`, `indigo`, `orange`, `purple`
headlines	An array of headline component objects	`array`	—	[items]: Type: `object` Headline text components
logo	Bolt logo component	`object`	—	@bolt-components-logo/logo.schema.yml > Object details `invert` Set to true to invert the logo colors. Type: boolean —
content	Body text of teaser	`string`	—	—
contentItems	Array of content item objects	`array`	—	[items]: Type: `object`
buttons	An array of button component objects	`array`	—	[items]: Type: `object` A button

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.

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.

2.20.0

Text

Text Component in Bolt

Published

History

yarn add @bolt/components-text

Install

Source code

Dependencies

Overview

Text component v2. This is still in progress and only available as a web component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-text

Usage

  <bolt-text>
  This is text.
</bolt-text>

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
text *	Text content of the headline.	`string`	—	—
tag	HTML semantic tags.	`string`	`p`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `div`, `span`, `cite`
display	Inline text or a block of text.	`string`	`block`	`inline` or `block`
color	Text color in context of theme colors.	`string`	`theme-body`	`theme-headline` or `theme-body`
align	Text alignment.	`string`	`inherit`	`inherit`, `start`, `center`, `end`
opacity	Opacity level.	`number`	`100`	`100`, `80`, `60`, `40`, `20`
quoted	Quoted text.	`boolean`	`false`	`true` or `false`
line-height	Line height in context of the typographic design.	`string`	`regular`	`tight`, `regular`, `loose`
letter-spacing	Letter spacing in context of the typographic design.	`string`	`regular`	`narrow`, `regular`, `wide`
text-transform	Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case.	`string`	`regular`	`regular`, `uppercase`, `lowercase`, `capitalize`
font-family	Font family in context of the typographic design.	`string`	`body`	`headline`, `body`, `code`
font-size	Font size in context of the typographic design.	`string`	`medium`	`xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`
font-weight	Font weight in context of the typographic design.	`string`	`regular`	`regular`, `semibold`, `bold`
font-style	Emphasized text.	`string`	`regular`	`regular` or `italic`
headline	A preset for headlines in context of the typographic design.	`boolean`	`false`	`true` or `false`
subheadline	A preset for subheadlines in context of the typographic design.	`boolean`	`false`	`true` or `false`
eyebrow	A preset for eyebrow in context of the typographic design.	`boolean`	`false`	`true` or `false`
url	If provided, turns headline into a link to given url.	`string`	—	—
util	Each item in the array will build a utility class. No need to include `u-bolt-`. For the web component use comma separated string.	`array`	—	—

Web Component Usage

Bolt Text is a web component, you can simply use <bolt-text> in the markup to make it render.

This is text.

<bolt-text> This is text. </bolt-text>

Typographic Design

The following are the official recipes for each piece of our typography. They will cover all common use cases. Only in edge cases, you'd want to break away and create your own recipes.

Headlines

This Is the XXXLarge Headline

This Is the XXLarge Headline

This Is the XLarge Headline

This Is the Large Headline

This Is the Small Headline

This Is the XSmall Headline

<bolt-text headline font-size="xxxlarge"> This Is the XXXLarge Headline </bolt-text> <bolt-text headline font-size="xxlarge"> This Is the XXLarge Headline </bolt-text> <bolt-text headline font-size="xlarge"> This Is the XLarge Headline </bolt-text> <bolt-text headline font-size="large"> This Is the Large Headline </bolt-text> <bolt-text headline font-size="small"> This Is the Small Headline </bolt-text> <bolt-text headline font-size="xsmall" text-transform="uppercase" letter-spacing="wide"> This Is the XSmall Headline </bolt-text>

Subheadlines

This Is the XXLarge Subheadline

This Is the XLarge Subheadline

This Is the Large Subheadline

<bolt-text subheadline font-size="xxlarge"> This Is the XXLarge Subheadline </bolt-text> <bolt-text subheadline font-size="xlarge"> This Is the XLarge Subheadline </bolt-text> <bolt-text subheadline font-size="large"> This Is the Large Subheadline </bolt-text>

Eyebrow

This Is the Eyebrow

<bolt-text eyebrow> This Is the Eyebrow </bolt-text>

Teaser

Teaser is a combination of text with clear information architecture. It is commonly used as a quick summary that draws the reader to a longer piece of content.

This is an eyebrow

This is a headline

This is a subheadline

This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.

<bolt-text eyebrow> This is an eyebrow </bolt-text> <bolt-text headline font-size="xxxlarge"> This is a headline </bolt-text> <bolt-text subheadline font-size="xxlarge"> This is a subheadline </bolt-text> <bolt-text> This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. </bolt-text>

Tag Usage

<bolt-text> allows for separation of semantics and visual. Using a semantically correct tag will not affect the appearance of the text.

This text has its tag prop defined as: h1

<bolt-text tag="h1"> This text has its tag prop defined as: h1 </bolt-text>

This text has its tag prop defined as: h2

<bolt-text tag="h2"> This text has its tag prop defined as: h2 </bolt-text>

This text has its tag prop defined as: h3

<bolt-text tag="h3"> This text has its tag prop defined as: h3 </bolt-text>

This text has its tag prop defined as: h4

<bolt-text tag="h4"> This text has its tag prop defined as: h4 </bolt-text>

This text has its tag prop defined as: h5

<bolt-text tag="h5"> This text has its tag prop defined as: h5 </bolt-text>

This text has its tag prop defined as: h6

<bolt-text tag="h6"> This text has its tag prop defined as: h6 </bolt-text>

This text has its tag prop defined as: p

<bolt-text tag="p"> This text has its tag prop defined as: p </bolt-text>

This text has its tag prop defined as: div

<bolt-text tag="div"> This text has its tag prop defined as: div </bolt-text>

This text has its tag prop defined as: span

<bolt-text tag="span"> This text has its tag prop defined as: span </bolt-text>

This text has its tag prop defined as: cite

<bolt-text tag="cite"> This text has its tag prop defined as: cite </bolt-text>

Display Usage

<bolt-text> can be defined as a paragraph of text (block display) or a piece of inline text (inline display).

This paragraph of text has block display, which means it will take up the full width of its container.

This paragraph of text also has block display, but within this paragraph, certain text can be inline display, and it can be styled differently than the rest of the paragraph.

<bolt-text display="block"> This paragraph of text has block display, which means it will take up the full width of its container. </bolt-text> <bolt-text display="block"> This paragraph of text also has block display, but within this paragraph, certain text can be <bolt-text display="inline" font-weight="bold" text-transform="uppercase">inline display</bolt-text>, and it can be styled differently than the rest of the paragraph. </bolt-text>

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>

Align Usage

<bolt-text> can be aligned horizontally. This only applies if display is set to block.

This text has its align prop defined as: inherit

<bolt-text display="block" align="inherit"> This text has its align prop defined as: inherit </bolt-text>

This text has its align prop defined as: start

<bolt-text display="block" align="start"> This text has its align prop defined as: start </bolt-text>

This text has its align prop defined as: center

<bolt-text display="block" align="center"> This text has its align prop defined as: center </bolt-text>

This text has its align prop defined as: end

<bolt-text display="block" align="end"> This text has its align prop defined as: end </bolt-text>

Opacity Usage

<bolt-text> can be adjusted in terms of opacity. The options are synced with Bolt's opacity scale.

This text has its opacity prop defined as: 100

<bolt-text opacity="100"> This text has its opacity prop defined as: 100 </bolt-text>

This text has its opacity prop defined as: 80

<bolt-text opacity="80"> This text has its opacity prop defined as: 80 </bolt-text>

This text has its opacity prop defined as: 60

<bolt-text opacity="60"> This text has its opacity prop defined as: 60 </bolt-text>

This text has its opacity prop defined as: 40

<bolt-text opacity="40"> This text has its opacity prop defined as: 40 </bolt-text>

This text has its opacity prop defined as: 20

<bolt-text opacity="20"> This text has its opacity prop defined as: 20 </bolt-text>

Quote Usage

<bolt-text> can be turned into a quote by using the quoted boolean prop.

This text is quoted.

This headline text is also quoted.

<bolt-text quoted> This text is quoted. </bolt-text> <bolt-text headline quoted> This headline text is also quoted. </bolt-text>

Line-height Usage

<bolt-text> has a few options for leading (line-height). Leading can be adjusted for legibility. The default is regular.

This text has
its line-height
prop defined as:
tight

<bolt-text line-height="tight"> This text has<br> its line-height<br> prop defined as:<br> tight </bolt-text>

This text has
its line-height
prop defined as:
regular

<bolt-text line-height="regular"> This text has<br> its line-height<br> prop defined as:<br> regular </bolt-text>

This text has
its line-height
prop defined as:
loose

<bolt-text line-height="loose"> This text has<br> its line-height<br> prop defined as:<br> loose </bolt-text>

Letter-spacing Usage

<bolt-text> has a few options for the spacing in between letters. It can be adjusted for legibility. The default is regular.

This text has its letter-spacing prop defined as: narrow

<bolt-text letter-spacing="narrow"> This text has its letter-spacing prop defined as: narrow </bolt-text>

This text has its letter-spacing prop defined as: regular

<bolt-text letter-spacing="regular"> This text has its letter-spacing prop defined as: regular </bolt-text>

This text has its letter-spacing prop defined as: wide

<bolt-text letter-spacing="wide"> This text has its letter-spacing prop defined as: wide </bolt-text>

Text-transform Usage

<bolt-text> has a few options for transforming letter case. It can be adjusted for legibility. The default is regular.

This text has its text-transform prop defined as: regular

<bolt-text text-transform="regular"> This text has its text-transform prop defined as: regular </bolt-text>

This text has its text-transform prop defined as: uppercase

<bolt-text text-transform="uppercase"> This text has its text-transform prop defined as: uppercase </bolt-text>

This text has its text-transform prop defined as: lowercase

<bolt-text text-transform="lowercase"> This text has its text-transform prop defined as: lowercase </bolt-text>

This text has its text-transform prop defined as: capitalize

<bolt-text text-transform="capitalize"> This text has its text-transform prop defined as: capitalize </bolt-text>

Font-family Usage

<bolt-text> has a few options to change typefaces. These options are relative to the types of text such as heading, body, and code. Each type is linked to a specific typeface. This method accounts for our evolving brand.

This text has its font-family prop defined as: headline

<bolt-text font-family="headline"> This text has its font-family prop defined as: headline </bolt-text>

This text has its font-family prop defined as: body

<bolt-text font-family="body"> This text has its font-family prop defined as: body </bolt-text>

This text has its font-family prop defined as: code

<bolt-text font-family="code"> This text has its font-family prop defined as: code </bolt-text>

Font-size Usage

<bolt-text> has font-size options to indicate information hierarchy.

This text has its font-size prop defined as: xsmall

<bolt-text font-size="xsmall"> This text has its font-size prop defined as: xsmall </bolt-text>

This text has its font-size prop defined as: small

<bolt-text font-size="small"> This text has its font-size prop defined as: small </bolt-text>

This text has its font-size prop defined as: medium

<bolt-text font-size="medium"> This text has its font-size prop defined as: medium </bolt-text>

This text has its font-size prop defined as: large

<bolt-text font-size="large"> This text has its font-size prop defined as: large </bolt-text>

This text has its font-size prop defined as: xlarge

<bolt-text font-size="xlarge"> This text has its font-size prop defined as: xlarge </bolt-text>

This text has its font-size prop defined as: xxlarge

<bolt-text font-size="xxlarge"> This text has its font-size prop defined as: xxlarge </bolt-text>

This text has its font-size prop defined as: xxxlarge

<bolt-text font-size="xxxlarge"> This text has its font-size prop defined as: xxxlarge </bolt-text>

Font-style Usage

<bolt-text> has font-style options to indicate simple emphasis.

This text has its font-style prop defined as: regular

<bolt-text font-style="regular"> This text has its font-style prop defined as: regular </bolt-text>

This text has its font-style prop defined as: italic

<bolt-text font-style="italic"> This text has its font-style prop defined as: italic </bolt-text>

Font-weight Usage

<bolt-text> has font-weight options to indicate emphasis hierarchy.

This text has its font-weight prop defined as: regular

<bolt-text font-weight="regular"> This text has its font-weight prop defined as: regular </bolt-text>

This text has its font-weight prop defined as: semibold

<bolt-text font-weight="semibold"> This text has its font-weight prop defined as: semibold </bolt-text>

This text has its font-weight prop defined as: bold

<bolt-text font-weight="bold"> This text has its font-weight prop defined as: bold </bolt-text>

Server-side Rendered Web Components (Experimental)

The <bolt-text> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!

This is text.

{% filter bolt_ssr %} <bolt-text> This is text. </bolt-text> {% endfilter %}

2.20.0

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.	`object`	—	—
sticky	When enabled, TOC will automatically use sticky positioning + add a `top` offset style based on the height of the `scrollOffsetSelector` plus the `scrollOffset` (if defined),	`boolean`	—	—
scrollOffsetSelector	Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector.	`string`	—	—
scrollOffset	Additional offset for smooth scrolling, integer converted to pixel value.	`integer`	—	—
items	Generates an array of items. The items represent the headlines of top level sections in an article.	`array`	—	[items]: Type: `object` Renders a linked item that points to the beginning of a particular section. Properties: `text` Renders the text for the linked item. Type: `string` `url` Renders the `href` for the linked item. This should be the `id` of the responding section. For example: `#section-one-name`. Type: `string` `active` Indicates that the item represents the current section being viewed. Type: `boolean`
header	Renders a header for the table of contents.	`string`	—	—
uuid	Unique ID for the table of contents, randomly generated if not provided.	`string`	—	—

Manually set an item as active

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

Visible header

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

Phase One

Iron Man. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

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

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis.

Phase Two

Iron Man 3. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque.

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et.

Phase Three

Captain America: Civil War. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum.

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

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet.

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

Phase One

Iron Man. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

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

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis.

Phase Two

Iron Man 3. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque.

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et.

Phase Three

Captain America: Civil War. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum.

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

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet.

Web Component Usage

Bolt Table of Contents is a web component, you can simply use <bolt-toc> in the markup to make it render.

Section One

Section Two

Section Three

<bolt-toc> <bolt-toc-item url="#section-one"> Section One </bolt-toc-item> <bolt-toc-item url="#section-two"> Section Two </bolt-toc-item> <bolt-toc-item url="#section-three"> Section Three </bolt-toc-item> </bolt-toc>

Basic Usage

All the props defined in the schema table can be used directly on the <bolt-toc> element and the <bolt-toc-item> element.

Phase One

Phase Two

Phase Three

<bolt-toc header="Marvel Cinematic Universe"> <bolt-toc-item url="#phase-one"> Phase One </bolt-toc-item> <bolt-toc-item url="#phase-two" active> Phase Two </bolt-toc-item> <bolt-toc-item url="#phase-three"> Phase Three </bolt-toc-item> </bolt-toc>

2.20.0

Tooltip

Floating label that briefly describes an element.

Published

History

yarn add @bolt/components-tooltip

Install

Source code

Dependencies

@popperjs/core

Overview

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

Install via NPM

npm install @bolt/components-tooltip

Usage

  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: "This is the tooltip trigger",
  content: "This is the tooltip content."
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-tooltip> tag.	`object`	—	—
trigger *	Renders the trigger of the tooltip.	`any`	—	—
content *	Renders the content of the tooltip. Plain text is preferred because this is supposed to be a simple label. For passing more complex content and actions, please use Popover instead.	`any`	—	—
placement	Sets the preferred placement of the tooltip. The actual placement of the tooltip will be automatically adjusted based on the space available on screen.	`string`	`top`	`auto`, `top-start`, `top`, `top-end`, `left-start`, `left`, `left-end`, `right-start`, `right`, `right-end`, `bottom-start`, `bottom`, `bottom-end`
uuid	Unique ID for the tooltip, randomly generated if not provided.	`string`	—	—
boundary	Optionally allows you to specify a parent element selector to use as an outer boundary when calculating placement.	`string`	—	—
fallbackPlacements	An array of different placement options that Popper.js should try if there isn't enough space for the ideal placement. Normally this defaults to all placement options however this lets you limit the options to pick from in certain situations.	`array`	—	—
direction	This prop is deprecated. Please use placement instead.	`any`	—	—
noWrap	This prop is deprecated. Please stop using it.	`any`	—	—
spacing	This prop is deprecated. Please stop using it.	`any`	—	—

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 for a second can display a small popup label containing more detailed description. When the mouse is moved again, the tooltip disappears. This is a useful means of providing additional details about a user interface without cluttering up the main interface.

Preferred placement

Preferred placement comes with fancy zoom-in transition.

Auto placement

Auto placement only comes with fade-in transition.

Web Component Usage

Bolt Tooltip is a web component, you can simply use <bolt-tooltip> in the markup to make it render.

CRM Customer relationship management

<bolt-tooltip> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>

Prop Usage

Configure the tooltip with the properties specified in the schema.

CRM Customer relationship management

<bolt-tooltip placement="top" uuid="target-this-unique-id"> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>

Advanced Usage

Any element can be passed as the trigger.

Download

File size: 25MB

<bolt-tooltip> <bolt-button>Download</bolt-button> <span slot="content">File size: 25MB</span> </bolt-tooltip>

2.20.0

Bolt Trigger

Trigger Component in Bolt

Published

History

yarn add @bolt/components-trigger

Install

Source code

Dependencies

This <a> has no outline on focus

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

Overview

Trigger is an unstyled component used to convey a call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-trigger

Description

Triggers add button or link behavior to any content without the default button or link styles.

Usage

  {% include "@bolt-components-trigger/trigger.twig" with {
  content: "This is a trigger"
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
content	Main content of the trigger (Twig only).	`string` , `array` , `object`	—	—
url	Contains a URL that the link points to. This may also be passed as part of `attributes`.	`string`	—	—
target	Specifies where to display the linked URL. This may also be passed as part of `attributes`.	`string`	—	—
type	Determines the button tag type for semantic buttons	`string`	`button`	`button`, `submit`, `reset`
cursor	Type of cursor shown on hover.	`string`	`pointer`	`auto`, `pointer`, `zoom-in`, `zoom-out`
on_click	The name of a method on the `on_click_target`.	`string`	—	—
on_click_target	`className` (e.g. "js-click-me") used in `querySelector` to reference a web component on the page. `onClick`, the `on_click` method name will be called on this element.	`string`	—	—
display	Set the display property	`string`	`inline`	`inline` or `block`
no_outline	Turn off the default outline on focus	`boolean`	`false`	—
disabled	Make trigger unusable and un-clickable. Only applies to `button`.	`boolean`	`false`	—

Trigger with a tag

This <a> is disabled

Trigger Image

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

Web Component Usage

Bolt Trigger is a web component. You can use it by simply including the <bolt-trigger> element in the markup.

This is a trigger

<bolt-trigger onclick="alert('Trigger clicked')"> This is a trigger </bolt-trigger>

Basic Usage

By default Bolt Trigger renders a semantic button tag. Set the url prop to render a semantic a tag.

This is a trigger

<bolt-trigger url="http://pega.com"> This is a trigger </bolt-trigger>

Additional Options

Customize the cursor style by setting the cursor prop.

This is a trigger

<bolt-trigger cursor="zoom-in"> This is a trigger </bolt-trigger>

Advanced Usage

Use the on-click and on-click-target props to call a method on another component. See schema for more info.

<bolt-trigger on-click="show" on-click-target="js-image-modal-456" cursor="zoom-in" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="640/480"></bolt-image> </bolt-trigger> <bolt-modal class="js-image-modal-456" spacing="none" theme="none" scroll="overall"> <bolt-trigger on-click="hide" on-click-target="js-image-modal-456" cursor="zoom-out" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" sizes="auto" ratio="640/480"></bolt-image> </bolt-trigger> </bolt-modal>

2.20.0

Bolt Typeahead

Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.

Published

History

yarn add @bolt/components-typeahead

Install

Source code

Dependencies

@bolt/components-form

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

Overview

Installation

npm install @bolt/components-typeahead

Features

Progressively enhanced simple html <form> fallback (via Twig)
Server-side pre-rendered SVG icons (when using Twig)!
Uses the new withEvents base class to allow for much deeper JavaScript customization
Fuzzy logic search / fuzzy matching using fuse.io
Keyboard combo-support (command+shift+f)
Wired up to use CSS Modules (once they ship in a future Bolt release)
Fully customizable behavior to handle partial vs full result matches, etc
Supports rendering to the Shadow DOM and the Light DOM

What's Next? (Future Updates)

Fully support theming system colors
JSDoc support / further improve docs and demos
Broader testing coverage
Look into adding <slot> support
More customization for additional use cases?
Multi-section support

API

JavaScript Properties/Attributes

Name	Type	Description
`items`	`array`	An array of objects that populates the dropdown

JavaScript Event Hooks

Name	Params	Description
`onInput`	`event`, `value`	Called every time the input value changes
`getSuggestions`	`value`	Called by `onSuggestionsFetchRequested` when re-rendering suggestions. Handles highlighting keywords in the search results in a React-friendly way + handles limiting the total number of results displayed
`onChange`	`event`, `newValue`, `method`	Called when a suggestion is selected. Includes info on how the particular item was selected (click, keyboard, etc)
`onSuggestionsFetchRequested`	`value`	Called every very time you need to gather / update suggestions to display. See onSuggestionsFetchRequested for more info.
`onSuggestionsClearRequested`		Called when clearing suggestions. See onSuggestionsClearRequested for more info.
`onSelected`	`event`, `suggestion`	Will be called every time suggestion is selected via mouse or keyboard. See onSuggestionSelected for more info.
`onRenderInput`	`value`	Fired when the input is being rendered

Additional references

React Autosuggest

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
max_results	The maximum number of typeahead results to display	`number`	`10`	—
items	An array of objects that's used to populate the suggestion list that appears below the input as the users type. This array of objects can be asynchronously fetched and should contain a `label`, `url`, and optionally `description`.	`array`	—	—
clear_input_text	Screenreader-specific text for the clear search button, intended to provide a longer, more descriptive explanation of the clear button's behavior.	`string`	`Clear search results`	—
submit_button_text	Screenreader-specific text for the submit button, intended to provide a longer, more descriptive explanation of the submit button's behavior.	`string`	`Submit search query`	—
input_label	Screenreader-specific label text associated with the search input.	`string`	—	—
input_placeholder	The placeholder text to display inside the Typeahead search input.	`string`	`Enter your search query`	—
input_value	Initial value to pre-populate the input field	`string`	—	—
input_name	Input element's name attribute used when pre-rendering the component	`string`	—	—
no_highlight	Disable text highlighting in matching search results (highlighting is enabled by default)	`boolean`	`false`	—

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

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

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

2.20.0

Unordered List

Unordered List Component in Bolt

Published

History

yarn add @bolt/components-ul

Install

Source code

Dependencies

@bolt/components-li

Be honest, respectful, trustworthy and helpful.

Overview

Stylistic bulleted list for article content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-ul

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.",
    include("@bolt-components-link/link.twig", {
      text: "Be honest, respectful, trustworthy and helpful.",
      url: "#!",
    }),
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} only %}

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	Use the items prop instead.	`array`	—	[items]: Type: `object` A single list item object with either a `text` or `contentItems` key Properties: `text` Item text Type: `string` `contentItems` Items pass to `@bolt/text.twig` Type: `array`
items	All items can be simple text or `items`.	`array`	—	[items]: Type: `string, object, array` Renderable content (i.e. a string, render array, or included pattern) for a single list item.

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.

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.

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 4

Item 5

Item 3

Item 4

Item 5

Avoid cluttering discussions with noise.

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

2.20.0

Video

Video Component in Bolt

Published

History

yarn add @bolt/components-video

Install

Source code

Dependencies

@bolt/components-ratio

Overview

Stylistic video. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/video

Usage

  {% include "@bolt/video.twig" with {
  videoId: "5609376179001",
  accountId: "1900410236",
  playerId: "r1CAdLzTW",
  showMeta: true,
  showMetaTitle: false
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
videoId	Brightcove ID for this video.	`string` , `number`	—	—
playerId	Brightcover Player ID.	`string`	—	—
accountID	ID of the Brightcove account that owns the video.	`string` , `number`	—	—
videoUuid	A unique identifying string, randomly generated if not provided.	`string`	—	—
share_description	A custom title to use in the share overlay	`string`	`Share This Video`	—
ratio	Maintain video ratio.	`boolean`	—	—
collapsed	Should the video be collapsed on load.	`boolean`	—	—
showMeta	Should the video show meta data.	`boolean`	`true`	—
showMetaTitle	Should the video show meta title.	`boolean`	`true`	—
controls	Should the video controls be available.	`boolean`	`true`	—
autoplay	Should the video auto-play on load.	`boolean`	`false`	—
loop	Should the video loop.	`boolean`	`false`	—
on_init	The `on_init` config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a `<bolt-video>` player instance when initializing. Please see the new recommended `enabled_plugins` and `disabled_plugins` options below.	`string`	—	—
enabled_plugins	Space-separated list of built-in `<bolt-video>` plugins for Brightcove to enable. Current include `social`, `email`, `playback`, and `cue`. For example: `<bolt-video enabled-plugins="cue social email playback">`.	`string`	—	—
disabled_plugins	Space-separated list of any built-in `<bolt-video>` plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the `playback` plugin). For example: `<bolt-video disabled-plugins="playback">`.	`string`	—	—
isBackgroundVideo	Background video feature will be removed with Bolt v3.0		—	—

Advanced Schema Options

Open Accordion Close Accordion

default_plugins	An array of the default `<bolt-video>` player plugins that are globally enabled by default.	`array`	—	`playback`
available_plugins	The built-in `<bolt-video>` player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript.	`array`	—	`playback`, `social`, `email`, `cue`

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

This video has showMeta set to false.

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

This video has controls set to false, you cannot interact with the video player but you can create external control to interact with it:

This video has external controls:

This video has external controls and an inline script:

This video has attributes for email share. Inline script is required for the email share.

This video has share_description set to Share me!.

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

This video has showMetaTitle set to false to hide the title from the video player, so you can pass the title to other markup.

Figure and Figcaption

Pega Adaptive Decision Manager

Headline with Video

Pega Adaptive Decision Manager

When used straight out of the box, the playback plugin is enabled by default.

This video has disabled_plugins set to playback. Therefore disabling the default playback plugin.

Accepted plugins: cue, social, playback, and email.

This video has enabled_plugins set to a few values. Therefore enabling the plugins defined in the values.

Accepted plugins: cue, social, playback, and email.

This video has an external plugins script defined through on_init.

This video has an external plugins script defined through on_init and enabled_plugins set to certain values.

H5P Placeholder

Page Subtitle

Page Title Goes Here Test

A short description goes here test.

Page Subtitle

Page Title Goes Here Test

13 Modules

12 Challenges

1 Mission

7 hrs 30 mins

Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Beginner

Pega Platform 8.3

Application Development

Case Management

Other

Page Subtitle

Page Title Goes Here Test

Main Search

Archived Search Results

Looking for instructor-led training?

Search Results

Looking for instructor-led training?

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Dashboard

Completed Training

Upload

Print

Sort by: Latest Activity

Created on: Oldest to Newest

Created on: Newest to Oldest

Business Process Modeling

MODULE

Completed: August 1, 2019

Last Updated: July 12, 2019

Configuring a Case Type

CHALLENGE

My Missions (12)

Mission

Harum unde nam.

7 Modules

1 Challenge

25% complete

Corrupti omnis adipisci consequuntur id atque rerum. Velit deleniti beatae sunt autem. Aut ut et voluptatem quas in numquam eveniet.

Last activity: 3 days ago

Mission

Quo ad.

8 Modules

1 Challenge

10% complete

Nemo rem quis possimus autem quia amet et. Repellat pariatur cum sint reiciendis numquam quis.

Last activity: 12/21/19

Assigned

Mission

Ipsum dolor voluptate ut.

2 Modules

1 Challenge

10% complete

Et cum quo optio voluptas pariatur animi. Amet quos et natus soluta accusantium repellat consequatur.

Last activity: 12/21/19

Mission

Sunt qui vitae id.

3 Modules

1 Challenge

25% complete

Ea sapiente doloribus eius minus. Hic minima itaque cumque culpa minus aut dignissimos. Deleniti aut aliquam nihil pariatur rerum molestiae.

Last activity: 3 days ago

Mission

Debitis quam aliquam.

9 Modules

1 Challenge

10% complete

Unde est magnam et ad sequi est quod. Unde cumque maxime eos et. Debitis voluptatem soluta rerum nisi quisquam laboriosam.

Last activity: 12/21/19

Assigned

Mission

Esse dolores suscipit facilis dolorum.

4 Modules

1 Challenge

10% complete

Aut aut tempore qui delectus. Autem itaque aliquam vero debitis sed explicabo. Vel minima quidem eos est aut.

Last activity: 12/21/19

Mission

A natus voluptatem.

9 Modules

1 Challenge

25% complete

Sint et adipisci sed consequuntur. Eligendi ex alias itaque et.

Last activity: 3 days ago

Mission

Qui animi tenetur quia.

4 Modules

1 Challenge

10% complete

Optio soluta architecto minus. Est qui autem facilis magnam.

Last activity: 12/21/19

Assigned

Mission

At aut tempore odit deleniti.

10 Modules

1 Challenge

10% complete

Sed aut eos impedit. Animi iusto voluptatem nemo nulla voluptatem nesciunt nostrum. Repudiandae dolorem pariatur est in.

Last activity: 12/21/19

Mission

Doloribus facere earum odit.

10 Modules

1 Challenge

25% complete

Tempore doloribus perspiciatis ea quia modi voluptatem incidunt consequatur. Ullam sed eum aliquid officia eum molestiae.

Last activity: 3 days ago

Mission

Est qui porro praesentium.

8 Modules

1 Challenge

10% complete

Dolorum beatae est ut atque eveniet voluptates. Tenetur perspiciatis dicta nostrum quasi voluptatem.

Last activity: 12/21/19

Assigned

Mission

Est illo.

7 Modules

1 Challenge

10% complete

Repudiandae aut eius eveniet. Et voluptas molestiae rerum voluptatum.

Last activity: 12/21/19

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Welcome back Justin!

Let's change the way the world builds software.

My Favorite Training
My Completed Training

My Missions

Add Mission

In Progress

Module

Impedit aspernatur officia aut.

8 Topics

40 mins remaining

In et voluptatem accusantium aut nostrum et facilis velit. Repellendus tempora autem error est delectus. Odio repellat quo placeat.

Last activity: 3 days ago

Module

Eius ducimus est similique fuga.

7 Topics

9 Modules

1 Challenge

25% complete

Velit et quo cumque et et quasi. Cumque quo et nesciunt sit officia dolor ducimus.

New Training

Mission

Odit voluptatem expedita tempora animi.

4 Modules

1 Challenge

25% complete

Ab aut quod molestias reprehenderit maxime. Sit enim aspernatur molestiae repellendus accusantium dicta.

Module

Harum fugiat rerum.

5 Topics

In progress

Enim sunt laudantium sint voluptatum id aspernatur. Eveniet cupiditate hic facilis. Rerum ducimus minus beatae cupiditate dicta sed.

Module

Nobis deleniti voluptatibus.

6 Topics

40 mins remaining

Non placeat ducimus modi doloribus harum. Consectetur sed enim ea ea ut. Eum sed ex nemo harum quis quaerat numquam.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Welcome back Justin!

Let's change the way the world builds software.

My Favorite Training
My Completed Training

My Missions

Mission

Veritatis distinctio quae fuga.

2 Modules

1 Challenge

25% complete

Recusandae laudantium aut illo occaecati quidem vero nulla. Id similique consectetur doloremque aut temporibus fugit quia laboriosam.

Last activity: 3 days ago

Mission

Repellat pariatur corrupti hic.

10 Modules

1 Challenge

10% complete

Adipisci aut ut id beatae iste vero non qui. Voluptatem eos qui assumenda nesciunt. Fugit deserunt qui natus amet quia sed.

Last activity: 12/21/19

Assigned

Mission

Rerum quibusdam ut eos.

10 Modules

1 Challenge

10% complete

Accusantium doloribus officia illum ut. Illum perferendis temporibus nobis quae est molestiae et maxime. Debitis itaque enim provident aut illo.

Last activity: 12/21/19

Mission

Omnis voluptatibus reiciendis.

4 Modules

1 Challenge

25% complete

Quam quia qui qui suscipit quos quisquam beatae ea. Provident soluta voluptas consequatur corrupti maiores.

Last activity: 3 days ago

Mission

Laborum voluptatem reiciendis et.

8 Modules

1 Challenge

10% complete

Et commodi recusandae officia voluptatem enim voluptatem. Culpa sequi voluptatem qui voluptas ea sed enim. Omnis nostrum illo voluptatem corporis debitis dolorem ipsum.

Last activity: 12/21/19

Assigned

Mission

Et nam magni sit.

2 Modules

1 Challenge

10% complete

Tenetur enim vero aut. Libero praesentium esse ipsam et dolorum accusantium. Dolores incidunt qui aut expedita rem.

Last activity: 12/21/19

Mission

Dolor qui ea similique.

4 Modules

1 Challenge

25% complete

Animi aut suscipit labore excepturi. Omnis blanditiis id quo omnis. Autem rerum non non excepturi sed et ut.

Last activity: 3 days ago

Mission

Rerum iure cum.

8 Modules

1 Challenge

10% complete

Quia accusantium magnam voluptates totam ipsam. Reiciendis nisi et dolor et. Saepe voluptatum sequi ab inventore provident suscipit eius.

Last activity: 12/21/19

Assigned

Mission

Error ducimus doloremque quos.

2 Modules

1 Challenge

10% complete

Voluptates qui cupiditate molestias officiis est et. Et minima dolore sint harum repudiandae culpa.

Last activity: 12/21/19

Mission

Iusto eum dolorem expedita.

2 Modules

1 Challenge

25% complete

Amet debitis sunt impedit aut dolores exercitationem tempore. Cupiditate natus voluptatem autem quis. Voluptas praesentium facilis et labore quia.

Last activity: 3 days ago

Mission

Sint eos est.

7 Modules

1 Challenge

10% complete

Optio id est accusantium et quisquam officiis. Necessitatibus neque alias eos officiis eligendi rerum cumque.

Last activity: 12/21/19

Assigned

Mission

Aut quaerat aut impedit.

6 Modules

1 Challenge

10% complete

Mollitia cum voluptate qui accusantium. Non assumenda quisquam hic minus sit incidunt.

Last activity: 12/21/19

In Progress

Module

Quia ea officiis.

5 Topics

40 mins remaining

Velit amet adipisci omnis qui eum consequuntur sint. Est porro harum deserunt sed.

Last activity: 3 days ago

Module

Tempore id sit sunt.

6 Topics

2 Modules

1 Challenge

25% complete

Quae temporibus quos reprehenderit qui doloremque ad. Nemo aut illo itaque occaecati ipsum labore mollitia. Ea placeat nam officiis modi laudantium adipisci iure.

New Training

Mission

Nulla recusandae ducimus.

2 Modules

1 Challenge

25% complete

Ea quidem quasi ut ullam sapiente. Reiciendis quas ut iure velit repellat doloribus.

Module

In eos maiores.

3 Topics

In progress

Ipsa in quo recusandae et maxime non accusantium officia. Adipisci dolor provident dolorem nostrum. Est ut optio molestiae quaerat molestias aut tenetur.

Module

Quo vel officia.

5 Topics

40 mins remaining

Minima animi veritatis nemo. Inventore aut voluptatem beatae itaque temporibus corrupti. Nesciunt exercitationem et aspernatur qui officia vel doloremque.

Logo Placeholder

Manufacturing & High Technology

Contact

Placeholder for helper text and did-you-mean text.

Close search

choose a mission.
complete the challenges.
earn bragging rights.

Infinity is just the beginning.

Achieve your Pega Certification

Show the world how great you are.

A Pega certification confirms that you and your team have the skills, knowledge and experience to architect and implement world-class Pega solutions.

Future proof your career.

Join our thriving Pega certified professional ecosystem and stay relevant and valuable.

Build fast. Empower your team.

Projects that leverage Pega certified professionals see reduced costs and faster times to market by increasing team efficiency and minimizing errors.

Browse Missions and path types

Browse Missions by Product

Browse Missions by Industry

Insurance

Technical Paths

Build strategic applications to help solve real-world problems for today’s fast-paced business environment.

Business Paths

Ensure that business users align their strategic business goals with IT initiatives to ensure project success.

Join the community and share your ideas.

Our open ecosystem is changing the way the world builds software - and redefining who gets to build it.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Main Search

Archived Search Results

Looking for instructor-led training?

This content has been archived.

Sort by

Type

Proin viverra (1040)

Phasellus leo dolor (503)

Aenean vulputate (167)

Maecenas ullamcorper (96)

Skill Level

Proin viverra (1040)

Phasellus leo dolor (503)

Aenean vulputate (167)

Maecenas ullamcorper (96)

View archived training

Mission

Corrupti maxime veniam ut.

25 topics

Completed

Occaecati ad magnam tempora ipsa. Repellendus ea rerum itaque id. Quidem quae eos officiis hic consequatur.

Module

Assumenda debitis expedita.

Neque consequuntur vel tempora velit. Nobis ea atque qui nulla nihil. Nemo harum cumque est ut. Doloremque modi reprehenderit cumque minima error totam.

Module

Name of module that will take up two lines of text

Hic soluta qui rem vero eos quis quam. Rerum mollitia aut magni sint voluptatem quibusdam eum. Blanditiis qui nisi fugiat veniam at corrupti.

Mission Test

Non adipisci ipsum dolore.

Unde omnis officiis nisi incidunt qui et. Magni praesentium sequi asperiores illo autem. Sint consectetur est rerum neque incidunt.

Mission Exercise

A nihil dignissimos aut.

Esse recusandae magnam cum ad id iusto qui. Dignissimos ad odio reprehenderit eveniet assumenda quia laboriosam. Laborum rerum minima qui suscipit aliquid vero.

Challenge

Autem corporis mollitia beatae.

Molestiae et expedita aut vitae perspiciatis. Omnis ratione aliquam iure et culpa. Veritatis voluptate qui aut in veniam qui et. Nesciunt illum quis eaque voluptas sed quae.

Mission

Doloremque iste.

Assumenda quod adipisci provident ab adipisci. Sed iste nostrum vel. Asperiores qui odit eum quia rerum sint amet. Repellat veritatis quas voluptas et.

Module

Provident voluptatem qui odio.

Dignissimos quos eligendi asperiores rem. Quia sapiente qui temporibus nulla enim. Quod eos pariatur est omnis debitis non tempore. Qui veritatis quia possimus maiores.

Instructor-led Training

View the class schedule to see the latest in person training

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Search Results

Looking for instructor-led training?

Challenge

(

Clear filters

)

Sort by

Type

Proin viverra (1040)

Phasellus leo dolor (503)

Aenean vulputate (167)

Maecenas ullamcorper (96)

Skill Level

Proin viverra (1040)

Phasellus leo dolor (503)

Aenean vulputate (167)

Maecenas ullamcorper (96)

View archived training

Mission

Aspernatur omnis totam non.

17 topics

Completed

Nobis nam necessitatibus vero et aperiam doloribus veritatis est. Eaque suscipit ratione necessitatibus omnis ipsam labore sit. Ullam id optio et quia sed dignissimos. Magni fuga ut autem consequatur deserunt. Voluptas eum quia voluptatem modi.

Module

Voluptas ut.

Veritatis ad cumque ullam qui sit. Consectetur minima vel dignissimos molestias. Excepturi quidem consequatur amet eos nulla ea. Quas quod est ut corrupti minus dolorem quia.

Module

Name of module that will take up two lines of text

Assumenda error et beatae eos architecto non nam. Ipsa molestias nobis qui consequuntur autem sunt earum quis. Magnam odio eos labore commodi. Fugit delectus eos voluptas.

Mission Test

Ut excepturi esse.

Et sint reprehenderit et eius in omnis animi. Et aut perspiciatis sed error similique ipsum. Iure eius soluta atque quaerat.

Mission Exercise

Sed aut deleniti porro.

Accusamus et eligendi non quibusdam. Ipsa aliquid repudiandae iste in aut. Et quis animi est qui. Dignissimos architecto nulla animi rerum dolorem aspernatur.

Challenge

Iste maiores vitae non.

Nam earum et non. Autem ullam sint et odit error ad. Dolorem maxime sit maiores iste magni sunt. Commodi sed quia sint ea et et.

Mission

Aut debitis eum nobis.

Eum vel qui enim repudiandae dicta aut vero. Tempora incidunt impedit modi et aut quaerat consequatur sint. Voluptatem a natus odit ipsam atque.

Module

Recusandae nostrum ipsa.

Quis labore similique pariatur odit voluptatem quae porro. Eum reiciendis magni soluta cum aut minima. Quos inventore earum quia vitae iure enim modi. Pariatur ex tempora quia quae sapiente exercitationem.

Instructor-led Training

View the class schedule to see the latest in person training

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Search Results

Looking for instructor-led training?

Sort by

Type

Proin viverra (1040)

Phasellus leo dolor (503)

Aenean vulputate (167)

Maecenas ullamcorper (96)

Skill Level

Proin viverra (1040)

Phasellus leo dolor (503)

Aenean vulputate (167)

Maecenas ullamcorper (96)

View archived training

Mission

Adipisci sequi laudantium et.

3 topics

Completed

Deserunt ipsum quasi cumque occaecati accusamus eligendi delectus unde. Voluptas eos et voluptatum non eligendi. Ut doloribus harum ut esse voluptas illo. Vel et impedit tempore doloremque.

Module

Itaque eaque eos qui.

Quod saepe nisi aut. Sunt nisi sequi incidunt consectetur dolores. Ut consequatur vitae labore voluptas.

Module

Name of module that will take up two lines of text

Ut vero incidunt molestias iure. Est ut nisi tempora voluptas dolor fuga. Tempore dolorem eos totam distinctio et dolores. Quae molestiae officia numquam voluptatem ut voluptas.

Mission Test

Delectus sit.

Inventore voluptatem quia dignissimos aut excepturi iste. Architecto dicta numquam culpa recusandae vero. Est impedit quia ipsa ut suscipit ut.

Mission Exercise

Quo in sequi.

Doloribus aut animi est ipsum eos omnis. Quae et ipsum asperiores dolore nesciunt necessitatibus. Quia architecto omnis ut accusantium tenetur.

Challenge

Maiores illo quia error harum.

Dignissimos quae dolores eum quam aperiam et quisquam animi. Earum accusantium fugiat eos quis. Voluptate quos ea ratione corrupti ipsa possimus.

Mission

Iusto quaerat quam eum magni.

Similique placeat ut explicabo quisquam tenetur voluptates quos. Deleniti molestiae quasi ducimus. Quia atque error et voluptas voluptatem atque. Suscipit optio aperiam expedita fugiat.

Module

Eum similique dolorum amet.

Quisquam et placeat voluptatem reprehenderit. Nam totam deserunt reprehenderit provident autem vero tempora. Autem quia dolor quia reiciendis.

Instructor-led Training

View the class schedule to see the latest in person training

Logo Placeholder

Name of Mission will go here

Contact

Placeholder for helper text and did-you-mean text.

Close search

Certification Exam

Name of Certification goes here

60 Questions

90 mins

Passing Score: 70%

The Certified System Architect (CSA) certification is for developers and technical staff members who want to learn how to develop Pega applications. This certification provides a baseline measurement on your knowledge of Pega applications. The CSA 7.4 exam includes scenario questions, multiple choice questions and drag/drop items. If multiple answers are required, the text states how many responses are needed.

First Tag

Second Tag

Prerequisites:

Exam Topics (% of exam)

Pega Platform (8%)

Case Lifecycle (25%)

Case Data Modeling (17%)

Business Policy Automation (13%)

User Views (20%)

Reports (12%)

Testing (5%)

Before you begin...

The Certified System Architect Test is proctored by Pearson VUE. Users must create a Pearson VUE account if you do not already have one and register for the exam through the Pearson VUE site. There are two exam delivery options:

Take an exam at a test center, or

Take an exam via Online Proctored delivery

(e.g., in a quiet, uninterrupted room in your home or office, proctored via webcam).

Create Pearson VUE Account

Did you find this content helpful?

28% found this useful

Want to help us improve this content?

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Mission Test

Mission Name Goes Here

60 Questions

90 mins

Passing Score Needed: 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

H5P Placeholder

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Mission Test

Mission Name Goes Here

60 Questions

90 mins

Passing Score Needed: 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

H5P Goes Here

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Mission Test

Mission Name Goes Here

60 Questions

90 mins

Passing Score Needed: 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

H5P Placeholder

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Page Subtitle

Mission Name Goes Here

13 Modules

12 Challenges

1 Mission

7 hrs 30 mins

Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Beginner

Pega Platform 8.3

Application Development

Case Management

Other

Hide Completed

Mission

Facere reprehenderit.

7 topics

Completed

Ab ducimus amet enim. Qui rerum vitae corporis delectus eum voluptatem modi. Nesciunt maiores quia accusantium non amet provident. Doloribus dolores vel accusantium rerum molestiae cum repellat rerum.

Completed (1)

Module

Name of module that will take up two lines of text

Impedit natus voluptates quo est suscipit et. Perferendis repudiandae eligendi dolorum nam quo voluptas. Voluptatem quis temporibus tempore animi nobis ipsam molestiae tempora. Et ut dolores cum qui accusantium.

Mission Test

Quia saepe facere ea.

Dolor neque fugiat non amet rerum enim. Dolorem sit molestiae impedit non non similique. Qui ut nesciunt eos dolor commodi. Inventore voluptas impedit similique rerum doloremque.

Completed (2)

Mission

Sit incidunt maiores.

Dolorum alias adipisci quaerat architecto qui possimus dolores. Corrupti nihil omnis repellendus consequatur praesentium rerum. Distinctio saepe voluptatem non vel et ad.

Module

Omnis perspiciatis dignissimos.

Ea deleniti consequatur hic corrupti. Velit ipsum harum enim ea commodi. Voluptate nisi repudiandae cupiditate soluta est dolor autem. Quibusdam voluptates enim quas sequi rerum qui.

Achievement Badge Awarded

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Page Subtitle

Mission Name Goes Here

13 Modules

12 Challenges

1 Mission

7 hrs 30 mins

Other

An introduction to using Pega Platform to develop applications that advance the digital transformation of organizations. Test

Beginner

Pega Platform 8.3

Application Development

Case Management

Other

Hide Completed

Mission

Fugiat provident sunt.

20 topics

Completed

Quia aperiam dicta sint error. Adipisci iusto maxime atque qui voluptatem dolor exercitationem. Aut ut ut repudiandae quisquam. Omnis fugiat commodi minima autem.

Module

Veritatis quisquam magni.

Vel deserunt ipsa soluta. Sit et rerum iste alias aliquid voluptates. Vel inventore tenetur incidunt vel quibusdam.

Module

Name of module that will take up two lines of text

Quod fugiat dolorem velit non laborum nihil. Amet saepe officia et quo delectus. Aspernatur ea et quam rerum ducimus vel temporibus.

Mission Test

Rem praesentium porro.

Quos nulla pariatur qui velit. Aut quam ut iste illum et quia tenetur. Eum sit sit libero qui ut deleniti. Dicta non itaque eum maiores pariatur voluptatem culpa.

Mission Exercise

Neque vel repudiandae cumque.

Ex praesentium esse voluptate deserunt. Culpa in nam illum fuga qui voluptatem enim. Nihil quae quia atque voluptatum incidunt eum praesentium.

Challenge

Nostrum est dolor omnis.

Est earum a fuga. Aliquid illo voluptate sint sit. Eaque sit aliquam suscipit voluptas blanditiis non.

Mission

Quaerat nisi.

Accusamus in sed neque. Ad qui rerum corporis voluptates nemo quis. Porro velit et hic maxime quia impedit distinctio.

Module

Voluptatem quia unde repellat.

Explicabo est qui natus perferendis quia totam autem. Voluptatem in laudantium vel explicabo suscipit. Molestias ut deleniti aut aspernatur dignissimos ut corrupti. Molestias culpa qui numquam sit.

Achievement Badge Awarded

Logo Placeholder

Name of Mission will go here

Contact

Placeholder for helper text and did-you-mean text.

Close search

Module

Module name goes here

4 Topics

30 Mins

Create data types to model the attributes of an entity and establish a common context for a group of fields.

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

This module is available in the following Missions:

Name of Mission

Adding another mission here

Topics

Data types

10 mins

Creating a data type

5 mins

Creating a data type

5 mins

Module Quiz

3 Questions

Module Quiz

3 Questions

Module Quiz

3 Questions

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Challenge

Configuring a case type

14 Steps

2 hr 10 mins

First Tag

Second Tag

1Scenario

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.

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh.

H5P Embed

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

How to update a rule

System architects often secure rulesets to prevent unauthorized or unintended changes to rules. When you edit the rules in a secured ruleset, you either check out the rule or perform a private edit.

Rule check out and check in

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

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

Checking out a rule creates a copy of the original rule in your personal ruleset and prevents other system architects from checking the rule out until you check in your changes.

The personal ruleset occupies the top spot in the ruleset stack. The rules in your personal ruleset override rules in the rest of the application. In the Dev Studio header, click the Checkouts icon to view a list of the rules you have checked out. After you update the rule and test the changes, you check in the rule. This updates the application ruleset with a new version of the rule. After you update the rule and test the changes, you check in the rule. This updates the application ruleset with a new version of the rule. When updating a rule in App Studio, App Studio automatically manages the check-out/check-in process for you. When updating a rule in App Studio, App Studio automatically manages the check-out/check-in process for you. This allows you to test your changes to the rule without affecting other system architects.

Private edit

A private edit provides a nonexclusive check out of a rule. This allows other system architects to edit a rule at the same time. Private edits are useful for quick debugging without interrupting development by other team members. This option is not available in App Studio.

It is a best practice to lock older versions of a ruleset in order to prevent changes. For rules in a locked ruleset, a lock icon is displayed on the rule form.

Data type best practices

A private edit provides a nonexclusive check out of a rule. This allows other system architects to edit a rule at the same time. Private edits are useful for quick debugging without interrupting development by other team members. This option is not available in App Studio.

H5P Embed

Did you find this content helpful?

28% found this useful

Want to help us improve this content?

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

Sign Up
Learn More
Read More

Customer Retention

Personalized. Not Creepy.
Sales Effectiveness

Create Sales Superstars
Operations & IT

Stop Coding. Start Designing.

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

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Whiteboard
03:17

Whiteboard
03:17

Top aligned inline List Item #1
Inline List Item #2
Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

Sign Up
Learn More
Read More

Customer Retention

Personalized. Not Creepy.
Sales Effectiveness

Create Sales Superstars
Operations & IT

Stop Coding. Start Designing.

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

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Whiteboard
03:17

Whiteboard
03:17

Top aligned inline List Item #1
Inline List Item #2
Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

Sign Up
Learn More
Read More

Customer Retention

Personalized. Not Creepy.
Sales Effectiveness

Create Sales Superstars
Operations & IT

Stop Coding. Start Designing.

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

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Whiteboard
03:17

Whiteboard
03:17

Top aligned inline List Item #1
Inline List Item #2
Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

Sign Up
Learn More
Read More

Customer Retention

Personalized. Not Creepy.
Sales Effectiveness

Create Sales Superstars
Operations & IT

Stop Coding. Start Designing.

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

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Whiteboard
03:17

Whiteboard
03:17

Top aligned inline List Item #1
Inline List Item #2
Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

Sign Up
Learn More
Read More

Customer Retention

Personalized. Not Creepy.
Sales Effectiveness

Create Sales Superstars
Operations & IT

Stop Coding. Start Designing.

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

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Whiteboard
03:17

Whiteboard
03:17

Top aligned inline List Item #1
Inline List Item #2
Inline List Item #3

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Customer Service

We're able to predict that you're going to call before you need to actually contact us.

Powered by real AI, Pega Customer Service delivers game-changing results for enterprises.

Get Real

Customer Retention

Personalized. Not Creepy.
Sales Effectiveness

Create Sales Superstars
Operations & IT

Stop Coding. Start Designing.

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

What's Trending

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

There’s a real alternative to the Salesforce.com hype: Pega CRM.

Considering Salesforce.com? Don’t fall for the hype. See why today’s leading enterprises choose Pega CRM.

Product Information
Industry Solutions
Training and Certification
Vision and Technology
Services and Partners
Career Opportunities

Logo Placeholder

Open menu Close menu

Contact

営業効率

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

最高販売配信責任者Larik Hall

今すぐ営業目標を上げる

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

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

トレンドとは

iBPMSでの2017MAGIC QUADRANT

Gartnerは、最新のiBPMSレポートにおいてペガがトップであることを認めています。

Robotics and AI Are Changing the World of Work

Marketforce の最近の調査によると、上級管理者の 69% が労働力の一環として知能機械の導入を考えていることがわかりました。

トランサヴィア：エンドツーエンドのカスタマージャーニー

トランサヴィアはPega CRMのカスタマージャーニー全体を通じて同社のサービスやセールスを提供しています。

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

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

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

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Products

CRM Applications for Real-Time Engagement

Pega’s AI powered CRM Suite is transforming the way enterprises drive greater engagement across the entire customer journey.

Call to Action

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

Analyst Reports

See all analyst reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Watch Birgit König, Ph.D., CEO, Allianz Health Germany, share how the Pega platform meets rapidly changing customer expectations.

See How Pega Can Help Your Business

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

CRM Applications

Dynamically recommend next-best-actions for your customers.

Call to Action

Explore the Pega CRM Suite

Move past traditional CRM systems to a true journey-enabled, customer engagement suite. Learn how Pega is helping enterprises revolutionize their customer engagement with end-to-end automation and real-time AI on the only unified CRM platform.

Get to know Pega Marketing

Download the data Sheet

Download the Overview document

View Pricing for Pega Marketing

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Analyst Reports

See all analyst reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Watch Birgit König, Ph.D., CEO, Allianz Health Germany, share how the Pega platform meets rapidly changing customer expectations.

See How Pega Can Help Your Business

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

CRM Applications

Dynamically recommend next-best-actions for your customers.

Call to Action

Explore the Pega CRM Suite

Move past traditional CRM systems to a true journey-enabled, customer engagement suite. Learn how Pega is helping enterprises revolutionize their customer engagement with end-to-end automation and real-time AI on the only unified CRM platform.

Get to know Pega Marketing

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Product feature 1

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Product feature 2

Maximize Value with Next Best Action Intelligence

zzzBlow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Product feature 3

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Product feature 4

Maximize Value with Next Best Action Intelligence

zzzBlow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Maximize Value with Next Best Action Intelligence

Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.

Analyst Reports

See all analyst reports

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Article

Gartner Magic Quadrant for the CRM Customer Engagement Center

Simplify and automate to reduce costs and improve agility.

Watch Birgit König, Ph.D., CEO, Allianz Health Germany, share how the Pega platform meets rapidly changing customer expectations.

See How Pega Can Help Your Business

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

White Paper

Insert Page Title Here

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:

Sales Automation and Stuff

CRM

White Paper

Pega.com

Related resources

Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

White Paper

CSAA Insurance Group: Transforming the Customer Experience

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:

Sales Automation and Stuff

CRM

White Paper

Pega.com

Related resources

Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

White Paper

PegaWORLD 2012 Video: Using Technology to Address Gaps in Care, Increase Medication Adherence and Improve Health Outcomes at Alere Health

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:

Sales Automation and Stuff

CRM

White Paper

Pega.com

Related resources

Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

White Paper

New ways to engage your customers

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:

Sales Automation and Stuff

CRM

White Paper

Pega.com

Related resources

Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...
Asset type
Asset Title comes From ECM Enterprise Content...

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

In The News

See the latest updates and media coverage about Pega from around the world.

Featured Press Releases

See all press releases

Jan 18 2018

Pegasystems to Present at the Needham Growth Conference

CAMBRIDGE, Mass. – January 11, 2018 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced that its chief financial officer, chief...

Jan 18 2018

Pega Receives Highest Scores in Two Use Cases in Gartner’s Critical Capabilities for the CRM Customer Engagement Center

CAMBRIDGE, Mass. – December 26, 2017 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced it received the highest scores in the business-...

Jan 04 2018

Pegasystems Announces Quarterly Cash Dividend

CAMBRIDGE, Mass. – December 15, 2017 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced a quarterly cash dividend of $0.03 per share,...

Featured Media Coverage

See all media coverage

Jan 22 2018

A New CRM Bill of Rights for the Future Empowered Enterprise

Jeff Nicholson of Pega provides insight into what companies should expect from CRM vendors.

Jan 11 2018

6 Customer Experience Trends to Watch in 2018

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

Dec 26 2017

3 Reasons Your AI-Driven Customer Experiences are Falling Short

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

Related resources

First resource

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Optional resource type

Second resource

Simplify and automate to reduce costs and improve agility.

Third resource

Simplify and automate to reduce costs and improve agility.

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

Press Releases

Pegasystems Launches Pega Community to Empower Anyone to Create Better Software

New community fosters collaborative approach to developing Pega apps for both experienced and new developers

LAS VEGAS – June 5, 2018 – Pegasystems Inc. (NASDAQ: PEGA), the software company empowering customer engagement at the world’s leading enterprises, today announced Pega Community, an open online community empowering Pega users of all experience levels to build better software without coding. This new community allows anyone – from novice to expert – to access the latest resources and tutorials to unlock the power of Pega Infinity™, Pega’s next generation digital transformation suite.

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

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.

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

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

Industries

Healthcare

Hospitality

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.

Register Now!

Become a PegaWorld Insider

Stay up-to-date on all the latest PegaWorld news and announcements.

Sign up

Connect to start a conversation

#PegaWorld18

Placeholder for this page's header

2018 Agenda

Session: spark talk

Alan's keynote

Date and Location

June 3, 2018, 10:00A - 11:00A

MGM Grand Hotel, Room 2014

Speaker(s)

Alan Trefler

President and CEO

Pegasystems

Micheal Hines

President

Cisco

Winifred Gomez

Vice President

Accenture

Insert Event Description Here. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.

What you'll learn

The growing importance and demands of a unified adtech and martech world

Four foundational use cases for unifying your DMP

The role of decisioning technology

Topics

Industries

Healthcare

Hospitality

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.

Register Now!

Become a PegaWorld Insider

Stay up-to-date on all the latest PegaWorld news and announcements.

Sign up

Connect to start a conversation

#PegaWorld18

Placeholder for this page's header

2018 Agenda

Session: spark talk

What Aflac is Learning About Consumer Expectations Through Monitoring Tech Disruptions

Date and Location

June 4, 2018, 2:00P - 4:00P

MGM Grand Hotel, Room 2046

Speaker(s)

Alan Trefler

President and CEO

Pegasystems

Micheal Hines

President

Cisco

Winifred Gomez

Vice President

Accenture

Insert Event Description Here. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.

What you'll learn

The growing importance and demands of a unified adtech and martech world

Four foundational use cases for unifying your DMP

The role of decisioning technology

Topics

Industries

Healthcare

Hospitality

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.

Register Now!

Become a PegaWorld Insider

Stay up-to-date on all the latest PegaWorld news and announcements.

Sign up

Connect to start a conversation

#PegaWorld18

Logo Placeholder

Fill out this form with LinkedIn

Contact

Placeholder for helper text and did-you-mean text.

Close search

Pega Events

CRM Applications for Real-Time Engagement

Pega’s AI powered CRM Suite is transforming the way enterprises drive greater engagement across the entire customer journey.

January 25, 2018
10:00 AM EST
New York, NY

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market."

The growing importance and demands of a unified adtech and martech world

Four foundational use cases for unifying your DMP

The role of decisioning technology

The unified DMP solution offered by Merkle | Comet and Pega® Customer Decision Hub, Pega’s decisioning technology—providing a bi-directional integration of your third-party DMP and marketing technology

Event Agenda

11:00 - 12:00 pm

Registration

11:00 - 12:00 pm

Networking Lunch

11:00 - 12:00 pm

Welcome & Keynote

11:00 - 12:00 pm

Customer Engagement Program: Panel Discussion, Demos, Presentations

11:00 - 12:00 pm

Networking Reception

Register now

(all fields are required)

Location Details

This Is The Place Where The Event Is Happening

123 Sesame St.

New York, NY 10012

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat.

Hear From Our Industry Leaders

Highlights from 2017

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #3

Simplify and automate to reduce costs and improve agility.

Event Sponsors

Related Resources

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #2

Simplify and automate to reduce costs and improve agility.

Article

Headline #3

Simplify and automate to reduce costs and improve agility.

Register now

(all fields are required)

Fill out this form with LinkedIn

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

ROBOTIC AUTOMATION

Automation to Get Work Done

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market."

Whitepaper

Anthem: Service Desktop

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

Transformational Results

321% ROI in less than 12 months. 75% cost savings. 75% productivity improvements. These are transformational outcomes. Getting there takes more than just a few robots. You need one unified automation engine.

Use business process management to orchestrate people and systems. Deploy RPA to take repetitive work out of your operation. Use case management to manage it all from end to end.

You define service level agreements, route work, and apply rules and advanced intelligence. You can jumpstart with RPA, sure – but you’ll be able to fly past the 20% improvement companies see from robotics alone.

Why? Because Pega’s capabilities are unified on one platform. No duct tape. No wiring a bunch of things together. You think about outcomes from end to end. Your technology should be able to get that end to end work done.

Whitepaper

Anthem: Service Desktop

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

Give Your Employees a Robot

Imagine if you could give back five minutes of every employee’s day. You can if you free them from wrangling across systems and process siloes for information. How? Software robots that automate the desktop tasks that frustrate your people and slow them down. We call these “productivity bots.”

Productivity bots collaborate with your employees to bridge systems and process siloes. They do work like tabbing, searching, and copying and pasting – so your people can focus on your customers.

Leveraging productivity bots that simplify the employee experience injects instant ROI into your business. In just two to three weeks you'll turn all your service agents, back-office workers, or front-line sellers into productivity ninjas. They’ll be happier. You’ll be happier. And your customers will be happier.

Whitepaper

Anthem: Service Desktop

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

Find Improvement Opportunities

It’s 3 p.m. Do you know how your employees are doing? What are they struggling with? What best practices have they discovered? How do you help them be more effective?

Logo Placeholder

Contact

Placeholder for helper text and did-you-mean text.

Close search

3 Capabilities Insurers Need for Outstanding Customer Engagement

By Kate Fowler, Sep 25 2018

Digital technology is changing how clients engage with insurers.

Remember the old days when customers could only conduct business either in person or over the phone? Now insurers need to be able to engage via the internet, mobile devices, email, call center, customer service agents, virtual voice assistants, chatbots, and whatever devices come next. Channels are evolving constantly and customers expect insurers to keep up. They expect you to meet them on their channel of choice and not the other way around.

Why are expectations so high? Insurance consumers, both retail and commercial, are already experiencing real-time service across multiple channels from their banks, retailers, suppliers, third-party information services, etc. They are looking at the insurance industry and asking, "Why can’t my insurer do this?" They are expecting an informed and personalized experience every time they engage with you.

The reality is, customer service is not about how many channels you have – it’s about how you service your customers across those channels.

Most insurers have implemented the ability to connect with clients and agents over many of the above-mentioned channels, but a customer’s experience often varies from channel to channel. If a customer switches channels, they likely have to start from scratch and must repeat their problem and information again. This can be frustrating for both the consumer and the insurance provider.

However, this problem can’t be fixed with the old method of just "throwing more people at it." Instead, to provide real-time, contextual service that meets and exceeds customers' expectations, insurers should leverage strategic investments in digital technology that connect their channels and data, plus core functionality that's leveraged across all channels.

There are three changes insurers need to make right now to create a proactive, digital, client-focused platform for customer engagement.

1. Empower 1-to-1 engagement with real-time AI: Artificial Intelligence can help provide the personalized engagement that insurance consumers value. By analyzing and applying machine learning to each customer’s historical, cross-channel data you will be able to anticipate client needs, provide proactive service, and grow the value of your relationship with each client. Two of the most effective applications of AI in the insurance industry are powering intelligent virtual assistants, like chatbots, or providing guided next best actions to call center agents. AI helps insurers provide consistency with established internal policies and guidelines, and personalized service.

2. Connect the front and back office with end-to-end robotic automation and case management: Bridge the gap between your back-end legacy systems and your digital front end by connecting data and workers using robotic process automation (RPA) and case management. RPA automates data integrations and eliminates the tedious search / copy / paste of a customer’s history across process silos that typically slow down productivity. Case management orchestrates this data with your processes, people, robots, and applications to adaptively manage customer journeys to completion.

3. Unite experiences across channels: Engage with customers and maintain the context of a conversation across a variety of channels and devices by making omni-channel access a priority. This means integrating multi-channel systems with case management and re-using functionality across channels to create a single, connected conversation with customers.

Change doesn’t have to take multiple years or costs millions of dollars.

These three changes can significantly increase the opportunity for consumer retention by providing a frictionless, digital consumer experience. To start, plan for and focus on customer journeys and outcomes. Then combine out-of-the-box product capabilities with an agile methodology.

Insurers are already realizing tremendous business value and return on investment from engaging with customers on their preferred channel, connecting conversations across digital ecosystems with case management, robotics, and end-to-end automation, and using AI as a guide for personalized, client-centric, outcome-driven experiences.

Learn More

Discover how manufacturing and high-tech enterprises are optimizing operations and delivering spectacular service with Pega.
Read how a leading global auto manufacturer automates quality inspection and monitoring.
Download Forrester’s "The Growing Importance of Process to Digital Transformation" to learn how process initiatives increasingly focus on digital transformation – and the approaches organizations are taking to accomplish their new goals.
See how to transform your quality management processes to deliver value faster and digitize value streams from end to end.
Read Setrag Khoshafian’s blog on how IoT and real-time Lean Six Sigma are affecting process improvements and digital transformation.
Learn what it takes to make the necessary and dramatic changes in how a business thinks about its customers, its people, and its technology to survive and thrive in digital. Read Alan Trefler’s eBook, “Build for Change: Revolutionizing Customer Engagement through Continuous Digital Innovation."

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.

Powerful software. Powered by you.

Placeholder for rest of the page

Eyebrow

Headline

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

Logo Placeholder

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

Contact

Placeholder for helper text and did-you-mean text.

Close search

WYSIWYG Elements to Bolt Components

Ideal CKEditor Config

Bolt needs to create an example of CKEditor that can map to web components, and all the related Bolt components need to become web components.

  ClassicEditor
  .create( document.querySelector( '#editor' ), {
    heading: {
      options: [
        { model: 'paragraph', view: 'bolt-text', title: 'Paragraph' },
        { model: 'headline1', view: 'bolt-text', title: 'Headline xxxlarge h1', attributes: { headline: true, font-size: 'xxxlarge', tag: 'h1' } },
        { model: 'headline2', view: 'bolt-text', title: 'Headline xxlarge h2', attributes: { headline: true, font-size: 'xxlarge', tag: 'h2' } },
        { model: 'headline3', view: 'bolt-text', title: 'Headline xlarge h3', attributes: { headline: true, font-size: 'xlarge', tag: 'h3' } },
        { model: 'headline4', view: 'bolt-text', title: 'Headline large h4', attributes: { headline: true, font-size: 'large', tag: 'h4' } },
        { model: 'headline5', view: 'bolt-text', title: 'Headline small h5', attributes: { headline: true, font-size: 'small', tag: 'h5' } },
        { model: 'headline6', view: 'bolt-text', title: 'Headline xsmall h6', attributes: { headline: true, font-size: 'xsmall', tag: 'h6' } },
        { model: 'subheadline1', view: 'bolt-text', title: 'Subheadline xxlarge', attributes: { subheadline: true, font-size: 'xxlarge', tag: 'p' } },
        { model: 'subheadline2', view: 'bolt-text', title: 'Subheadline xlarge', attributes: { subheadline: true, font-size: 'xlarge', tag: 'p' } },
        { model: 'subheadline3', view: 'bolt-text', title: 'Subheadline large', attributes: { subheadline: true, font-size: 'large', tag: 'p' } },
        { model: 'eyebrow', view: 'bolt-text', title: 'Eyebrow', attributes: { eyebrow: true, tag: 'p' } },
        { model: 'link', view: 'bolt-text', title: 'Link', attributes: { eyebrow: true, tag: 'a' } },
        { model: 'blockquote', view: 'bolt-blockquote', title: 'Blockquote' },
        { model: 'ordered-list', view: 'bolt-ordered-list', title: 'Ordered list' },
        { model: 'unordered-list', view: 'bolt-unordered-list', title: 'Unordered list' },
        { model: 'code', view: 'bolt-code-snippet', title: 'Code snippet' },
      ]
    }
  } )
  .then( ... )
  .catch( ... );

CKEditor Docs

The docs show that mapping each style option to a specific tag and class is possible, but we need to figure out if it can do attributes as well. Otherwise, we'd have to make sure our web components can work without any attributes.

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

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

2.20.0

Animate

Animations for Bolt Design System

Published

History

yarn add @bolt/components-animate

Install

Source code

Dependencies

Overview

The Bolt Animate Component

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

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

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

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

2.20.0

Editor

Next Generation live editor for Bolt Web Components

Published

History