accordion docs

Accordion

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-accordion/accordion.twig" with {
  items: [
    {
      trigger: "Accordion item 1",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 2",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 3",
      content: "This is the accordion content.",
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Accordion
Prop Name Description Type Default Value Option(s)
items

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

array
  • See below
single

Allow only one section to open at a time.

boolean false
no_separator

Hides the separator in between items.

boolean false
box_shadow

Creates a box shadow around the accordion.

boolean false
spacing

Controls the inset spacing of each item.

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

Vertically align the accordion trigger content and trigger icon.

string center
  • top or center
scroll_offset_selector

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

string
scroll_offset

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

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

Trigger content of an item.

string , object , array Toggle Accordion
content

Expandable content of an item.

string , object , array
open

Automatically expand an item on page load.

boolean false
inactive

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

boolean false
id

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

string
open_label

Accessible label for the open trigger to expand an item.

string Open Accordion
close_label

Accessible label for the close trigger to collapse an item.

string Close Accordion
uuid
(deprecated)

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

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

accordion

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

accordion single variations

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

Single open item

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

Multiple open items (default)

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

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

Accordion with separators

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

Accordion without separators

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

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

Box shadow

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

Box shadow, no separator

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

No box shadow

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

accordion spacing variations

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

Spacing: none

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

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

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

Spacing: xsmall

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

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

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

Spacing: small

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

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

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

Spacing: medium

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

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

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

Spacing: large

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

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

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

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

Icon Valign: top

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

Icon Valign: center

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

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

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

Inactive Accordion item
Open Accordion Close Accordion

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

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

accordion theme variations

Accordion inside various themes

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

Accordion with shadow inside various themes

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

accordion content variations

Using the grid inside trigger and content

Open Accordion Close Accordion

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

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

Get the presentation Watch video

12:00 PM

Lunch & Networking

Open Accordion Close Accordion

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

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

Get the presentation Watch video
Open Accordion Close Accordion

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

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

Get the presentation Watch video

Pass various components into the content

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

This is a headline

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

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

Example Q&A

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

accordion deep linking

Deep link to an accordion item by adding a query string to the URL with "selected-accordion-item" as the name and the item ID as the value. For example: ?selected-accordion-item=item-3.
This is the accordion content.
This is the accordion content.
This is the accordion content.
Placeholder "fixed" element, should not overlap active accordion item when page first loads.
Deep linking will auto-scroll to your selected accordion item. If there is a "fixed" element on the page, it may overlap your tabs. To fix this, use scroll_offset_selector to select the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scroll_offset for any additional adjstments. See a demo: ?selected-accordion-item=item-3.
This is the accordion content.
This is the accordion content.
This is the accordion content.

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

Basic usage: spacing

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

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

Advanced usage: content spacing

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

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

Advanced usage: trigger spacing

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

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

accordion web component

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

action blocks docs

Action blocks

A grid layout of actions consist of icon and text.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% set icon %}
  {% include "@bolt-components-icon/icon.twig" with {
    name: "icon-name",
    background: "circle",
    size: "large"
  }%}
{% endset %}

{% include "@bolt-components-action-blocks/action-blocks.twig" with {
  items: [
    {
      text: "Item 1",
      url: "#!",
      media: icon,
    },
    {
      text: "Item 2",
      url: "#!",
      media: icon,
    },
    {
      text: "Item 3",
      url: "#!",
      media: icon,
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Action blocks
Prop Name Description Type Default Value Option(s)
attributes

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

object
spacing

Spacing surrounding each action block.

string medium
  • xsmall , small , medium
max_items_per_row

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

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

Vertical alignment of the content inside each action block.

string start
  • start , center , end
borderless

Removes the border in between each action block.

boolean false
content

Free form content to populate the action blocks

string , array , object
children
(deprecated)

Use content prop instead.

items

Content items to populate the action blocks.

array
  • See below
maxItemsPerRow
(deprecated)

Use max_items_per_row prop instead.

align
(deprecated)

Use valign prop instead.

border
(deprecated)

Use borderless prop instead.

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

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

object
text
string
url
string
media

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

string , object , array
icon
(deprecated)

Use media prop instead and pass a fully rendered icon

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

action blocks

Action Blocks inside a xlight themed container

Action Blocks inside a light themed container

Action Blocks inside a dark themed container

Action Blocks inside a xdark themed container

background docs

Bolt Background

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focal_point: {
    vertical: "center",
    horizontal: "center"
  },
  content_items: [
    {
      pattern: "image",
      src: "/images/content/backgrounds/background-tall-4.jpg"
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
opacity

Overlay opacity

string medium
  • none , light , medium , heavy , full
shape_group

Add a Bolt Background Shapes group.

string none
  • A , B , none
shape_alignment

Alignment of shape group.

string right
  • left or right
fill

Type of fill to use for the overlay.

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

Color of the fill to use in the overlay.

string default
  • default , pink , navy , black , indigo
focal_point

Where the opacity background should originate.

object
    • horizontal

      Currently only reverses gradient on 'left'.

      • center , left , right
content_items

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

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

Use opacity instead

shapeGroup
(deprecated)

Use shape_group instead.

shapeAlignment
(deprecated)

Use shape_alignment instead.

fillColor
(deprecated)

Use fill_color instead.

focalPoint
(deprecated)

Use focal_point instead.

contentItems
(deprecated)

Use content_items instead.

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

background

Opacity: None

Visualization & Simulation

Imagine the Future with Decision Hub

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

Opacity: Light

Visualization & Simulation

Imagine the Future with Decision Hub

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

Opacity: Medium

Visualization & Simulation

Imagine the Future with Decision Hub

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

Opacity: Heavy

Visualization & Simulation

Imagine the Future with Decision Hub

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

Opacity: Full

Visualization & Simulation

Imagine the Future with Decision Hub

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

background focal variations

Heavy Opacity with Left Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

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

Heavy Opacity with Right Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

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

background shapes variations

Background Shapes: Shape Group A

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

Visualization & Simulation

Imagine the Future with Decision Hub

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

Background Shapes: Shape Group B

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

Visualization & Simulation

Imagine the Future with Decision Hub

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

Background Shapes: Shape Group A, Alignment Left

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

Visualization & Simulation

Imagine the Future with Decision Hub

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

background fill variations

Fill: Color

Visualization & Simulation

Imagine the Future with Decision Hub

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

Fill: Gradient

Visualization & Simulation

Imagine the Future with Decision Hub

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

background valign variations

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

valign: center

Visualization & Simulation

Imagine the Future with Decision Hub

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

valign: top

Visualization & Simulation

Imagine the Future with Decision Hub

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

valign: bottom

Visualization & Simulation

Imagine the Future with Decision Hub

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

valign: 25%

Visualization & Simulation

Imagine the Future with Decision Hub

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

background shapes docs

Background shapes

Pega branded shapes, for use with background component.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-background-shapes/background-shapes.twig" with {
  shapeGroup: "B"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
shapeGroup

The shapeGroup to use to build the shapes layout.

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

background shapes

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

shapeGroup: A

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

shapeGroup: B

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

band docs

Band

A general content container with spacing and background options.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-band/band.twig" with {
  content: "This is a band.",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the band.

string , array , object
pinned_content

Pinned content of the band.

object
    • upper

      Pinned to the upper area of the band.

        • content

          A pinned area can contain 1 or more items.

        • align

          Horizontal alignment of a single item.

          • start , center , end
    • lower

      Pinned to the lower area of the band.

        • content

          A pinned area can contain 1 or more items.

        • align

          Horizontal alignment of a single item.

          • start , center , end
tag

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

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

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

string center
  • start , center , end
size

Controls the vertical spacing of the band.

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

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

boolean true
theme

Controls the theme of the band.

any dark
  • none , xlight , light , dark , xdark , xxdark
row_gutter
(deprecated)

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

content_row_start
(deprecated)

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

items
(deprecated)

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

fullBleed
(deprecated)

This prop has been renamed. Please use full_bleed.

contentTag
(deprecated)

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

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

band

This is a band.

band size variations

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

band theme variations

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

band tag variations

Setting the container's HTML tag to: div

This is a band.

Setting the container's HTML tag to: article

This is a band.

Setting the container's HTML tag to: section

This is a band.

Setting the container's HTML tag to: header

This is a band.

Setting the container's HTML tag to: footer

This is a band.

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

This is a band.

band full bleed variations

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

Full bleed

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

This is a band.

Not full bleed

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

This is a band.

band with pinned content

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

upper pinned 1
upper pinned 2
upper pinned 3

This Is a Headline

This Is a Subheadline

lower pinned 1
lower pinned 2
lower pinned 3

This Is a Headline

This Is a Subheadline

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

This Is a Headline

This Is a Subheadline

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

Deprecated items prop usage

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

New pinned_content prop usage

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

band with background

This Band Has a Backround Image

band nested

This Band Has 2 Bands Nested Inside

Nested band 1
Nested band 2

band flag

This Is a Flag

With text on the left and CTAs on the right.

band feature

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

This is a paragraph.

band collection

Image description Image description

Collection 1

This is a button
Image description Image description

Collection 2

This is a button
Image description Image description

Collection 3

This is a button

banner docs

Banner

A content container that delivers important messages to the user.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-banner/banner.twig" with {
  content: "This is the banner content."
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

any
status

Sets the status that the banner is trying to convey.

string information
  • error , warning , success , information
align

Sets the text alignment of the content.

string center
  • start , center , end
Install Install
  npm install @bolt/components-banner
Dependencies @bolt/core-v3.x @bolt/lazy-queue

banner

This is a banner

banner status variations

Status
This banner is trying to convey error
This banner is trying to convey warning
This banner is trying to convey success
This banner is trying to convey information

banner align variations

Text alignment
This banner's text is aligned to the start
This banner's text is aligned to the center
This banner's text is aligned to the end

banner with web component

Web Component Usage Bolt Banner is a web component, you can simply use <bolt-banner> in the markup to make it render.
This is a banner
<bolt-banner> This is a banner </bolt-banner>
Prop Usage Configure the banner with the properties specified in the schema.
You passed this challenge on May 21, 2020. View Details
<bolt-banner status="success" align="start"> You passed this challenge on <strong>May 21, 2020</strong>. <a href="https://pega.com" class="e-bolt-text-link">View Details</a> </bolt-banner>

block list docs

Block List

A vertical list with separators.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-block-list/block-list.twig" with {
  items: [
    include("@bolt-components-link/link.twig", {
      text: "Link 1",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    include("@bolt-components-link/link.twig", {
      text: "Link 2",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    include("@bolt-components-link/link.twig", {
      text: "Link 3",
      url: "#!",
      icon: {
        name: "chevron-right",
        position: "before"
      }
    }),
    "Simple text example"
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
items

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

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

      Renderable content (i.e. a string, render array, or included pattern) for a single list item

Install Install
  npm install @bolt/components-block-list
Dependencies @bolt/core-v3.x @bolt/lazy-queue

block list

block list theme variation

Theme: xlight


Theme: light


Theme: medium


Theme: dark


Theme: xdark


blockquote docs

Blockquote

Pullquote layout with author info.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "<p>The greater danger for most of us lies not in ... achieving our mark.</p>"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

<

p> tags.

string
size

Text size.

string xlarge
  • large , xlarge , xxlarge
weight

Text weight.

string semibold
  • semibold or bold
alignItems

Aligns items left, center, or right.

string left
  • left , center , right
border

Add a border.

string vertical
  • vertical , horizontal , none
indent

Indent text.

boolean false
fullBleed

Width of the brower window.

boolean false
no_quotes

Hide quotation marks.

boolean false
lang

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

string
logo

Add a logo component.

object
author

Author of the quote.

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

blockquote

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: left

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: center

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: right

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote indent variation

Indent: True

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Indent: False

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote border variation

Border: vertical

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: horizontal

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: none

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

fullBleed: false

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

fullBleed: true

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote quote variation

No quotes

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Multiple Paragraph Content

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

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

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

English

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

German

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

French

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Japanese

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote theme variation

theme: xlight

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: light

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: dark

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: xdark

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote weight variation

weight: semibold

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

weight: bold

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote size variation

size: large

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

size: xlarge

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

size: xxlarge

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

Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote web component

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

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

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

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

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

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

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

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

breadcrumb docs

Breadcrumb

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-breadcrumb/breadcrumb.twig" with {
  contentItems: [
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Home',
      attributes: {
        href: '#!'
      }
    }),
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Landing Page',
      attributes: {
        href: '#!'
      }
    }),
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Sub Page',
      attributes: {
        href: '#!'
      }
    }),
    include('@bolt-elements-text-link/text-link.twig', {
      content: 'Current Page',
      attributes: {
        href: '#!'
        'aria-current': 'page',
      }
    }),
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
contentItems

Breadcrumb pieces.

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

      Renderable content (i.e. a string, render array, or included pattern) for a single breadcrumb

Install Install
  npm install @bolt/components-breadcrumb
Dependencies @bolt/core-v3.x

breadcrumb

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

breadcrumb use case popover

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

breadcrumb use case band

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Breadcrumb Band Stacking On Top of Featured Band ^

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

Background and Theming

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

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

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

Background and Theming

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

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

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

Background and Theming

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

deprecated button docs

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

button group docs

Button Group

An inline list of buttons.

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

{% set button_2 %}
  {% include "@bolt-components-button/button.twig" with {
    text: "About Pega",
    hierarchy: "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

Set the HTML tag for the button group container.

string
  • ul or ol
buttons

An array of buttons.

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

      Items should be passed as renderable content (i.e. a string, render array, or included pattern). Passing anything besides a Bolt button is not supported.

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

button group

button group icon only

1 Button(s)

2 Button(s)

3 Button(s)

4 Button(s)

5 Button(s)

card replacement docs

Card

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

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

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

// Custom overall content
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
  content: "Pass completely custom content to the card-replacement, without the styles of the card-replacement body.",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Card
Prop Name Description Type Default Value Option(s)
attributes

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

object
tag

HTML tag that contains the card-replacement content.

string article
  • div , article , figure
horizontal

Displays the card media + body horizontally.

boolean
height

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

string full
  • auto or full
border_radius

Controls the border-radius of the card-replacement.

string small
  • small or large
spacing

Controls the spacing of the card-replacement.

string medium
  • small or medium
theme

Controls the theme of the individual card-replacement.

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

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

object
    • url

      Address for the link.

    • text

      Visually hidden text for link, included for accessibility.

    • attributes

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

media

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

object
body

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

object
    • eyebrow

      Regular eyebrow.

    • headline

      Headline pre-defined to size large.

    • paragraph

      Regular paragraph of text.

    • content

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

    • attributes

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

actions

Actions section of the card-replacement, accepts buttons.

array
  • See below
content

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

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

Action link text.

string
url

Action link url.

string
external

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

boolean
icon

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

string
attributes

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

object
Advanced Schema Options
raised

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

boolean
Install Install
  npm install @bolt/components-card-replacement
Dependencies @bolt/components-background @bolt/components-button @bolt/components-list @bolt/components-teaser @bolt/components-video @bolt/core-v3.x @bolt/lazy-queue wc-context

Card - Basic Example

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Card - Horizontal

Default horizontal card Image alt. Image alt.

This is an eyebrow

This Is a Headline

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

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

This card's media is 80px wide

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

This is a button
Image alt. Image alt.

This card's media is 150px wide

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

This is a button
Image alt. Image alt.

This card's media is 25% wide

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

This is a button
Image alt. Image alt.

This card's media is 50% wide

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

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

This card's media is 80px wide

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

Visit the Pega website
Image alt Image alt

This card's media is 150px wide

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

Visit the Pega website
Image alt Image alt

This card's media is 25% wide

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

Visit the Pega website
Image alt Image alt

This card's media is 50% wide

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

Image alt. Image alt.

This is an eyebrow

This card's `action` is an internal link

This is a paragraph.

This is an internal button
Image alt. Image alt.

This is an eyebrow

This card's `action` is an external link

This is a paragraph.

This is an external button
Image alt. Image alt.

This is an eyebrow

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

This is a paragraph.

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

This is an eyebrow

This card's `action` has no icon

This is a paragraph.

This is a button with no icon

Card - With Two Actions

Image alt. Image alt.

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

Card - Theme Colors

Inside XDARK Parent Container

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

Inside DARK Parent Container

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

Inside LIGHT Parent Container

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

Inside XLIGHT Parent Container

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

XLIGHT Themed card-replacement

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

This is a button

LIGHT Themed card-replacement

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

This is a button

DARK Themed card-replacement

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

This is a button

XDARK Themed card-replacement

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

This is a button

NONE Themed card-replacement

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

This is a button

Card - Height Options

Image alt. Image alt.

This card has auto height.

This is a button
Image alt. Image alt.

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

This is a button
Image alt. Image alt.

This card also has full height.

This is a button

Card - Video Example

With a video as the media

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

Go to pega.com

With a video as the media and an overall link

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

Card - Freeform Content

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

A Rock Climber A Rock Climber

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

Passing free-form content for the entire card

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.


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

This is an eyebrow

This is a headline.

This is body text.

This is a button

Card - Border Radius

Image alt. Image alt.

This card has large border radius

This is a paragraph.

This is a button
Image alt. Image alt.

This card has large border radius

This is a paragraph.

This is a button

Card - Spacing

Image alt. Image alt.

This card has small spacing

This is a paragraph.

This is a button
Image alt. Image alt.

This card has medium spacing

This is a paragraph.

This is a button

Card - Web Component Usage

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

chip docs

Chip

Pill like container for displaying meta data text.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a chip',
  url: 'https://pega.com',
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
text *

Text content of the chip.

string , array , object
size

Controls the size of the chip.

string small
  • xsmall , small , medium
border_radius

Controls the border radius of the chip.

string full
  • full , small , none
color

Controls the color of the chip.

string gray
  • error , warning , success , navy , teal , orange , yellow , wine , pink , berry , violet , gray
url

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

string
target

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

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

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

object
tag

DEPRECATED - tag is automatically determined by URL.

iconOnly

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

boolean false
Advanced Schema Options
no_shadow

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

boolean
no-shadow

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

boolean
Install Install
  npm install @bolt/components-chip
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

chip

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

chip url variations

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

chip size variations

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

chip icon variations

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

chip color variations

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

chip list docs

Chip List

An inline list of chips.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-chip-list/chip-list.twig" with {
  items: [
    {
      text: "Chip 1",
      url: "#!"
    },
    {
      text: "Chip 2",
      url: "#!"
    },
    {
      text: "Chip 3",
      url: "#!"
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
items

An array of Chips.

array
  • [items]:
    • Type:object
size

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

string
  • xsmall , small , medium
truncate

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

number
collapsible

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

boolean false
id

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

string
contentItems
(deprecated)

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

array
  • [items]:
    • Type:object

      Chip.

Advanced Schema Options
expanded

Shows truncated items.

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

chip list

Chip list with links

Chip list with text

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

chip list size

chip list truncate

Truncated chip list

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

chip list collapsible

Truncated chip list that can collapse after expanding

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

code snippet docs

Code Snippet

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-code-snippet/code-snippet.twig" with {
  display: "block",
  lang: "html",
  content: "Some code snippet"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
display

Defines if the code text is inline or block.

string block
  • block or inline
lang

Language of the code text.

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

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

string light
  • light , dark , none
Install Install
  npm install @bolt/components-code-snippet
Dependencies @bolt/core-v3.x @bolt/lazy-queue prismjs

code snippet

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

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

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

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 { props } from '@bolt/core-v3.x/utils';

twig:

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

light:

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

dark:

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

none:

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

code snippet web component

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

Headline

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

content pagination docs

Content Pagination

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-content-pagination/content-pagination.twig' with {
  parent: {
    content: 'System Administrations',
    tooltip_content: 'Parent topic',
    link_attributes: {
      href: 'https://pega.com',
    },
  },
  previous: {
    content: 'Configuring system settings',
    tooltip_content: 'Previous topic',
    link_attributes: {
      href: 'https://pega.com',
    },
  },
  next: {
    content: 'Configuring user avatar',
    tooltip_content: 'Next topic',
    link_attributes: {
      href: 'https://pega.com',
    },
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
parent

Set the parent page link.

object
    • content

      Text content of the link.

    • tooltip_content

      Text content of the tooltip.

    • link_attributes

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

previous

Set the previous page link.

object
    • content

      Text content of the link.

    • tooltip_content

      Text content of the tooltip.

    • link_attributes

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

next

Set the next page link.

object
    • content

      Text content of the link.

    • tooltip_content

      Text content of the tooltip.

    • link_attributes

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

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

content pagination

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

copy to clipboard docs

Copy to Clipboard

A function to copy a string to the clipboard.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
  text_to_copy: "https://boltdesignsystem.com"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
trigger_text

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

string Copy Link
text_to_copy *

The text to copy to the clipboard.

string
custom_trigger

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

string , object , array
custom_transition

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

string , object , array
custom_confirmation

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

string , object , array
text
(deprecated)

This property has been renamed trigger_text

string Copy Link
copiedText
(deprecated)

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

string Copied!
iconSize
(deprecated)

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

string medium
url
(deprecated)

This property has been renamed text_to_copy

string
Install Install
  npm install @bolt/components-copy-to-clipboard
Dependencies @bolt/components-icon @bolt/components-link @bolt/core-v3.x @bolt/lazy-queue clipboard

copy to clipboard

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

Custom confirmation

device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

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

{% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  content: content,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
deviceName

Name of the device.

string
  • ipad , iphone8 , macbook
color

Device color.

string
  • black , silver , gold
orientation

Device orientation.

string
  • portrait or landscape
content

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

any
image
(deprecated)

Pass a rendered image as content instead.

magnify
(deprecated)

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

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

device viewer

device viewer ipad variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

device viewer video

dropdown docs

Dropdown

A responsive menu.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% embed "@bolt-components-dropdown/dropdown.twig" with {
  title: "Toggle Menu",
  collapse: true
} %}
  {% block content %}
    {% include "@bolt-components-list/list.twig" with {
      inset: true,
      spacing: "small",
      items: [
        include('@bolt-elements-text-link/text-link.twig', {
          content: "Link 1",
          attributes: {
            href: '#!'
          }
        }),
        include('@bolt-elements-text-link/text-link.twig', {
          content: "Link 2",
          attributes: {
            href: '#!'
          }
        }),
        include('@bolt-elements-text-link/text-link.twig', {
          content: "Link 3",
          attributes: {
            href: '#!'
          }
        }),
      ]
    } only %}
  {% endblock %}
{% endembed %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
title

The toggle title text

string
center

True to center the toggle title

boolean false
collapse

True to hide toggle until mobile screen size

boolean false
content

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

any
Install Install
  npm install @bolt/components-dropdown
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue classnames ev-emitter handorgel

dropdown

dropdown center

dropdown collapse

dropdown collapse center

Open Dropdown Close Dropdown

dropdown theme variations

dropdown long header

Open Dropdown Close Dropdown

dropdown web component

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

figure docs

Figure

A media container for a complimentary graphic within an article.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% set image %}
  {% include "@bolt-components-image/image.twig" with {
    src: "/images/placeholders/500x500.jpg"
  } only %}
{% endset %}
{% include "@bolt-components-figure/figure.twig" with {
  media: {
    content: image
  },
  caption: "Figure caption."
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
media

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

object
caption

Caption for the figure.

string , object , array
content
(deprecated)

Figure contains no content. Only media and caption.

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

figure

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

figure media variations

Image Figure

Fig. 1: This is an image.

Icon Figure

Fig. 2: This is an icon.

Video Figure

Fig. 3: This is a video.

Table Figure

Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
Fig. 4: This is a table.

figure with web component

Web Component Usage Bolt Figure is a web component. Use the custom element <bolt-figure> to wrap your figure media and caption. The figure media must have the attribute slot="media" or be wrapped by an element with that attribute. Everything else inside the <bolt-figure> tag is considered the caption. We recommend simply using text with optional inline markup (as seen below).
This is a caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit text link.
<bolt-figure> <bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" slot="media"></bolt-image> This is a caption. Lorem ipsum <em>dolor sit amet</em>, consectetur adipiscing elit <a href="#">text link</a>. </bolt-figure>

form docs

Form

A collection of fieldset and inputs.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% set form_children %}
  {% set label %}
    {% include "@bolt-components-form/form-label.twig" with {
      title: "This is the label",
      displayType: "block"
    } only %}
  {% endset %}
  {% set input %}
    {% include "@bolt-components-form/form-input.twig" with {
      attributes: {
        placeholder: "This is the placeholder text.",
        required: true,
        type: "text",
      },
    } only %}
  {% endset %}
  {% include "@bolt-components-form/form-element.twig" with {
    labelDisplay: "before",
    label: label,
    children: input
  } only %}
  {% include "@bolt-components-form/form-button.twig" with {
    text: "Submit",
    attributes: {
      type: "submit",
    }
  } only %}
{% endset %}
{% include "@bolt-components-form/form.twig" with {
  children: form_children
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
icon_size

Customize the size of the input icon used

medium
Install Install
  npm install @bolt/components-form
Dependencies @bolt/components-button @bolt/components-headline @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue
We promise not to sell your email address
The username you entered is already taken.

form label positions

labelDisplayType: "floating"

labelDisplayType: "block", labelDisplay: "before"

form element demo radio

Select an alignment

form element auto format

form element demo checkbox

Select toppings

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

form element demo select

form element demo textarea

form full campaign landing

Get the Report

(all fields are required)

form inline inputs

Inline inputs: auto width

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

Inline inputs: flexible width

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

form card theme variations

Get the Report

(all fields are required)

Get the Report

(all fields are required)

Get the Report

(all fields are required)

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

grid docs

Bolt Grid

A flexible 12-column grid with responsive breakpoint options.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-grid/grid.twig" with {
  gutter: "medium",
  row_gutter: "medium",
  items: [
    {
      column_start: "1",
      column_span: "1",
      row_start: "1",
      row_span: "1",
      valign: "start",
      content: "Item Content",
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
gutter

Spacing between the columns of the grid.

string medium
  • none , small , medium , large
row_gutter

Spacing between the rows of the grid.

string medium
  • none , small , medium , large
items

Array of grid items to render inside the grid.

array
    • attributes

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

    • content

      Content to render inside each grid item.

    • valign

      Vertical alignment of the grid item itself.

      • start , center , end
    • column_start

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

    • column_span

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

    • row_start

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

    • row_span

      The number of rows the grid item should span across.

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

grid

Bolt Grid is a 12-column grid design approach

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

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

grid start and span

Column start and column span

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

Common usage

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

Aside
Main
Aside

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

Main
Aside

Row start and row span

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

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

All possible start and span options

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

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

grid gutter variations

None Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Small Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Medium Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Large Gutter

Span 4 columns
Span 4 columns
Span 4 columns

grid row gutter variations

None Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Small Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Medium Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Large Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Each item can span from 1 to 12 columns

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

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

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

Item 1
Item 2

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

Item 1
Item 2

Each item can span from 1 to 12 rows

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

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

Responsive breakpoint options

Use the @breakpoint options to do advanced responsive layouts.

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

grid item align variations

Horizontal item alignment

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

Standard alignments

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

Column start at 1 and span 4

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

Column start at 5 and span 4

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

Column start at 9 and span 4

Advanced alignments

Offset by 1 column from the center.

Column start at 4 and span 8

Offset by 1 column from the start.

Column start at 2 and span 2

grid item valign variations

Vertical item alignment

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

Start

Item
Item
Item

Center

Item
Item
Item

End

Item
Item
Item

Traditional Columns and Rows

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

headline docs

Headline

Specific combinations of typographic styles for displaying text.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-headline/headline.twig" with {
  text: "This is a headline",
} only %}

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

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

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

{% include "@bolt-components-headline/lead.twig" with {
  text: "This is a lead",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
text *

Renderable text content of the headline.

string , object , array
tag

Set the semantic HTML tag for the headline.

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

Set the text alignment of the headline.

string
  • left , center , right
weight

Set the weight of the headline.

string regular
  • light , bold , regular , semibold
style

Set the style fo the headline.

string normal
  • normal or italic
size

Set the size of the headline.

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

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

boolean true
target

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

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

Text transformation.

string
  • uppercase , lowercase , capitalize
url

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

string
icon

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

object , string , string
quoted

Adds quoted styling to text.

boolean
numberText

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

string , number
numberColor

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

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

headline

This is an eyebrow

This is a headline

This is a subheadline

This is text

This is a lead

headline tag variations

This headline is <h1> and xxxlarge size

This headline is <h2> and xxlarge size

This headline is <h3> and xlarge size

This headline is <h4> and large size

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

This text is <p> and medium size.

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

headline align variations

This headline is aligned left

This headline is aligned center

This headline is aligned right

This is light weight and normal text

This is light weight and italic text

This is bold weight and normal text

This is bold weight and italic text

This is regular weight and normal text

This is regular weight and italic text

This is semibold weight and normal text

This is semibold weight and italic text

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

headline icon variations

Headline w/ Icon Position before

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!

What we do at Pega is brilliant!
What we do at Pega is brilliant!

Headline w/ Icon Position after

What we do at Pega is brilliant!

Headline w/ Default Icon Position

What we do at Pega is brilliant!

Headline w/ Icon Options

What we do at Pega is brilliant!

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

(Deprecated) Headline w/ Left Icon Position

What we do at Pega is brilliant!

(Deprecated) Headline w/ Right Icon Position

What we do at Pega is brilliant!

headline quoted variation

What we do at Pega is brilliant!

headline numbered

Numbered Headline

Basic Usage

7 Example numbered headline (w/o numberColor)

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

42 Example numbered headline (w/ numberColor)

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

Up to 3 digits supported

7 Single-digit

42 Double-digit

123 Triple-digit


Icons Supported

1Numbered Headline With Left Icon

2Numbered Headline With Right Icons


Align Support

1 Numbered Headline - Left

2 Numbered Headline - Center

3 Numbered Headline - Right


4 Numbered Eyebrow

1 Numbered Headline (xxxlarge)

2 Numbered Subheadline (xxlarge)

3 Numbered Text


1 Numbered Headline (xxsmall)

2 Numbered Headline (xsmall)

3 Numbered Headline (small)

5 Numbered Headline (large)

6 Numbered Headline (xlarge)

7 Numbered Headline (xxlarge)

8 Numbered Headline (xxxlarge)


numberColor

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

1 Numbered Headline w/ Number

2 Numbered Headline w/ Number

3 Numbered Headline w/ Number

4 Numbered Headline w/ Number

A Numbered Headline w/ Letter

B Numbered Headline w/ Letter

C Numbered Headline w/ Letter

D Numbered Headline w/ Letter


Theming

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

1 Without numberColor

2 Without numberColor

3 Without numberColor

4 Without numberColor

hero docs

Bolt Hero

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-hero/hero.twig" with {
  content: "Hero content goes here",
  background: "/images/heros/hero-background--yellow.svg",
  image: "/images/heros/hero-foreground--yellow.png",
  theme: "dark",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
content

The content to display in the Hero

string , array , object
theme

Color theme to use within the Hero.

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

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

string
custom_background

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

string , object , array
image

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

string
image_srcset

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

string
imageAlign

Adjusts the Hero Image's horizontal alignment

string center
  • left , center , right
imageValign

Adjusts the Hero Image's vertical alignment

string middle
  • top , middle , bottom
imageMinWidth

Customizes the min width of the Hero Image

string none
imageMaxWidth

Customizes the maximum width of the Hero Image

string 450px
reverseOrder

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

boolean false
attributes

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

object
Install Install
  npm install @bolt/components-hero
Dependencies @bolt/components-band @bolt/components-image @bolt/core-v3.x @bolt/global

Basic Usage

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

Hero Title

Reverse Desktop Order

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

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

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

While Heros don't require an image...

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

< type="button" href="../../patterns/40-components-band/index.html" class="e-bolt-button e-bolt-button--secondary" >Band Component Docs

Image Minimum Width

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

A Prominent Headline Certainly Helps

This one even includes a tagline.

Image Horizontal Alignment

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

It's show time.

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

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

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

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

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

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

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

Oliver Zeeb Team Lead, Application Development
W&W-Gruppe
This demo passes an image into the custom_background prop. This allows you to customize any of the available Image component props, such as align or valign.

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

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

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

icon docs

Icon

Pega branded icon system.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
name

Icon name

, string
background

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

string none
  • none , circle , square
size

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

string
  • small , medium , large , xlarge
color

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

string auto
  • auto , teal , navy , yellow , orange , gray , pink , berry , wine , violet
Install Install
  npm install @bolt/components-icon
Dependencies @bolt/core-v3.x @bolt/lazy-queue svg-baker-runtime

icon

icon size variation


icon theme variation

Icons inside a xdark theme

Icons inside a dark theme

Icons inside a light theme

Icons inside a xlight theme

icon color variation

auto

teal

navy

yellow

orange

gray

pink

berry

wine

violet

icon adding custom icons

Custom SVG Icons

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

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


Adding Custom SVG Icons to Bolt

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

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

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

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

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

Adding a Custom SVG Icon - Retain Original Colors

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

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

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

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

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

icon custom colors

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

via Web Component:

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

via Twig Include:

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

icon name variations


  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bell-solid

  • bolt-logo-colored

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • dollar-open

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • flag-solid

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • heart-open

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • lock-solid

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pega-cart

  • pega-catalyst

  • pega-chat

  • pega-chat-question

  • pega-chat-typing

  • pega-compass

  • pega-connection-hierachy

  • pega-database

  • pega-disability

  • pega-healthcare

  • pega-map

  • pega-network

  • pega-phone-call

  • pega-pie-chart

  • pega-plane

  • pega-process-fabric

  • pega-send-submit

  • pega-setting

  • pega-shuffle

  • pega-thumbs-up

  • pega-timer

  • pega-wifi

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid

  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bell-solid

  • bolt-logo-colored

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • dollar-open

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • flag-solid

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • heart-open

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • lock-solid

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pega-cart

  • pega-catalyst

  • pega-chat

  • pega-chat-question

  • pega-chat-typing

  • pega-compass

  • pega-connection-hierachy

  • pega-database

  • pega-disability

  • pega-healthcare

  • pega-map

  • pega-network

  • pega-phone-call

  • pega-pie-chart

  • pega-plane

  • pega-process-fabric

  • pega-send-submit

  • pega-setting

  • pega-shuffle

  • pega-thumbs-up

  • pega-timer

  • pega-wifi

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid

icon pega branding

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

pega-cart

pega-catalyst

pega-chat

pega-chat-question

pega-chat-typing

pega-compass

pega-connection-hierachy

pega-database

pega-disability

pega-healthcare

pega-map

pega-network

pega-phone-call

pega-pie-chart

pega-plane

pega-process-fabric

pega-send-submit

pega-setting

pega-shuffle

pega-thumbs-up

pega-timer

pega-wifi

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

icon with web component

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

image docs

Image

A container for displaying responsive image.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-image/image.twig' with {
  src: "/src/images/turtle.jpg",
  alt: "A Turtle"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
src

Source url for image.

string
alt

Alt tag for image.

string
lazyload

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

boolean true
no_lazy

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

boolean false
placeholder_color

A valid CSS background color property shown while image loads.

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

Image path or image data shown while image loads.

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

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

string
sizes

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

string auto
useAspectRatio
(deprecated)

Use the ratio prop instead.

boolean true
ratio

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

string , boolean auto
max_width

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

string
valign

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

string center
align

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

string center
cover

Set an image to fill its container.

boolean false
width
(deprecated)

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

height
(deprecated)

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

imageAttributes
(deprecated)

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

object
Advanced Schema Options
zoom
(deprecated)

Support will be dropped along with device viewer magnify

boolean false
Install Install
  npm install @bolt/components-image
Dependencies @bolt/components-ratio @bolt/core-v3.x @bolt/element @bolt/lazy-queue lazysizes

image

A Rock Climber A Rock Climber

image size variations

640x480 jpg

A Rock Climber A Rock Climber

500x500 jpg

Bill Murray Bill Murray

1151x638 jpg

Mountains Mountains

1151x638 jpeg

Mountains

2712x2300 png

decision hub chart

3000x5336 jpeg

device screenshot device screenshot

124x33 svg

logo paypal svg

image source variations

Src: Root Relative

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

Src: Source Set

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

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

Bill Murray Bill Murray

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

Bill Murray Bill Murray

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

Bill Murray Bill Murray

Absolute src - not lazy loaded

Wikipedia Example

Absolute src - lazy loaded

Wikipedia Example

image lazyload variations

Jpg: Lazyload true

Bill Murray Bill Murray

Jpg: Lazyload false

Bill Murray Bill Murray

Png: Lazyload true

decision hub chart

Png: Lazyload false

decision hub chart

Svg: Lazyload: true

logo paypal svg

Svg: Lazyload: false

logo paypal svg

Custom Height and Width, JPEG (2:1)

Bill Murray Bill Murray

Custom Height and Width, PNG (2:1)

decision hub chart

Custom Height and Width, SVG (10:1)

logo paypal svg

Custom Max-Width, JPG (200px)

rocks in Yosemite rocks in Yosemite

image with web components

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

list docs

List

Minimal layout container for displaying a group of items.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-list/list.twig" with {
  display: "inline",
  spacing: "xsmall",
  align: "start",
  valign: "center",
  items: [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
items

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

array
tag

Apply the semantic tag for the list.

string ul
  • ul , ol , div , span
display

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

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

Control the spacing in between items.

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

Display a separator in between items.

string none
  • none , solid , dashed
inset

Turn spacing to the inside of each item.

boolean false
align

Control the horizontal alignment of items.

string start
  • start , center , end , justify
valign

Control the vertical alignment of items.

string center
  • start , center , end
nowrap

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

boolean false
Install Install
  npm install @bolt/components-list
Dependencies @bolt/core-v3.x @bolt/lazy-queue wc-context

list

Item 1
Item 2
Item 3

list item variations

Inline list of different items

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

Inline list of chips

Item 1 Item 2 Item 3

Inline list of buttons

Item 1 Item 2 Item 3

list display variations

Block

Item 1
Item 2
Item 3

Flex

Item 1
Item 2
Item 3

Inline

Item 1
Item 2
Item 3

Inline@xxsmall

Item 1
Item 2
Item 3

Inline@xsmall

Item 1
Item 2
Item 3

Inline@small

Item 1
Item 2
Item 3

Inline@medium

Item 1
Item 2
Item 3

Inline@breakpoint

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

list spacing variations

Block list with spacing (none)

Item 1
Item 2
Item 3

Block list with spacing (xxsmall)

Item 1
Item 2
Item 3

Block list with spacing (xsmall)

Item 1
Item 2
Item 3

Block list with spacing (small)

Item 1
Item 2
Item 3

Block list with spacing (medium)

Item 1
Item 2
Item 3

Block list with spacing (large)

Item 1
Item 2
Item 3

Block list with spacing (xlarge)

Item 1
Item 2
Item 3

Flex list with spacing (none)

Item 1
Item 2
Item 3

Flex list with spacing (xxsmall)

Item 1
Item 2
Item 3

Flex list with spacing (xsmall)

Item 1
Item 2
Item 3

Flex list with spacing (small)

Item 1
Item 2
Item 3

Flex list with spacing (medium)

Item 1
Item 2
Item 3

Flex list with spacing (large)

Item 1
Item 2
Item 3

Flex list with spacing (xlarge)

Item 1
Item 2
Item 3

Inline list with spacing (none)

Item 1
Item 2
Item 3

Inline list with spacing (xxsmall)

Item 1
Item 2
Item 3

Inline list with spacing (xsmall)

Item 1
Item 2
Item 3

Inline list with spacing (small)

Item 1
Item 2
Item 3

Inline list with spacing (medium)

Item 1
Item 2
Item 3

Inline list with spacing (large)

Item 1
Item 2
Item 3

Inline list with spacing (xlarge)

Item 1
Item 2
Item 3

list separator variations

Solid separators in a block list

Item 1 Item 2 Item 3

Solid separators in a flex list

Item 1 Item 2 Item 3

Solid separators in a inline list

Item 1 Item 2 Item 3

Dashed separators in a block list

Item 1 Item 2 Item 3

Dashed separators in a flex list

Item 1 Item 2 Item 3

Dashed separators in a inline list

Item 1 Item 2 Item 3

list inset variations

Regular spacing in a block list

Item 1
Item 2
Item 3

Inset spacing in a block list

Item 1
Item 2
Item 3

Regular spacing in a inline list

Item 1
Item 2
Item 3

Inset spacing in a inline list

Item 1
Item 2
Item 3

Regular spacing in a flex list

Item 1
Item 2
Item 3

Inset spacing in a flex list

Item 1
Item 2
Item 3

Regular vs inset spacing

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

The advantage of using regular spacing style

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

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

Item 1
Item 2
Item 3

The advantage of using inset spacing style

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

Item 1
Item 2
Item 3

^ This list is inside a colored box.

list align variations

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

Horizontally align inline items: start

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: start

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: start

Item 1
Item 2
Item 3

Horizontally align inline@small items: start

Item 1
Item 2
Item 3

Horizontally align inline@medium items: start

Item 1
Item 2
Item 3

Horizontally align inline items: center

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: center

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: center

Item 1
Item 2
Item 3

Horizontally align inline@small items: center

Item 1
Item 2
Item 3

Horizontally align inline@medium items: center

Item 1
Item 2
Item 3

Horizontally align inline items: end

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: end

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: end

Item 1
Item 2
Item 3

Horizontally align inline@small items: end

Item 1
Item 2
Item 3

Horizontally align inline@medium items: end

Item 1
Item 2
Item 3

Horizontally align inline items: justify

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: justify

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: justify

Item 1
Item 2
Item 3

Horizontally align inline@small items: justify

Item 1
Item 2
Item 3

Horizontally align inline@medium items: justify

Item 1
Item 2
Item 3

list valign variations

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

Vertically align inline items: start

Item 1
Item 2
Item 3

Vertically align inline items: center

Item 1
Item 2
Item 3

Vertically align inline items: end

Item 1
Item 2
Item 3

Vertically align flex items: start

Item 1
Item 2
Item 3

Vertically align flex items: center

Item 1
Item 2
Item 3

Vertically align flex items: end

Item 1
Item 2
Item 3

list tag variations

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

ul

Item 1 Item 2 Item 3

ol

Item 1 Item 2 Item 3

div

Item 1 Item 2 Item 3

span

Item 1 Item 2 Item 3

list nowrap variations

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

Inline list with nowrap

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

Flex list with nowrap

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

list with web component

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

listing teaser docs

Listing Teaser

An interactive UI element that summarizes a particular listing.

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

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

object
layout

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

string horizontal
  • vertical , horizontal , responsive
gutter

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

string small
  • small , medium , large
signifier

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

any
headline

Render the headline of the listing.

object
    • text

      Renderable text content of the headline.

    • tag

      Set the semantic HTML tag for the headline.

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

      Set the size of the headline.

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

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

eyebrow_items

Render an array of eyebrow text for the listing.

array
meta_items

Render an array of meta data for the listing.

array
status

Set the status of the listing.

object
    • solved

      Mark the listing as solved.

    • solved_label

      Set a custom label for the "solved indicator".

    • locked

      Mark the listing as locked.

    • locked_label

      Set a custom label for the "locked indicator".

    • replies

      Set the count of replies.

    • views

      Set the count of views.

action_menu

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

any
share_menu

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

any
description

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

any
warning

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

any
chip_list

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

object
reply

Render a preview of a reply to the post.

any
callout

Render a callout section to feature important notes.

object
    • attributes

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

    • content

      Render the content of the callout.

variant

Set the style variant of the listing teaser.

string transparent
  • transparent or card
inset_spacing

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

string medium
  • xsmall , small , medium
Install Install
  npm install @bolt/components-listing-teaser
Dependencies @bolt/components-button @bolt/components-headline @bolt/components-icon @bolt/components-menu @bolt/components-popover @bolt/core-v3.x @bolt/elements-text-link

listing teaser

Basic Listing Teaser The Listing Teaser component can be used to display specific information of a particular listing, article, or thread. It is commonly used on listing pages. Important Notes: The whole listing UI is clickable. The headline of the listing is a link element that is expanding its click target. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Warning! This is a warning message.
  • Solved
  • Locked
  • 33 Replies
  • 6k Views
Twig
// Set a signifier variable {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'questions', size: 'large', color: 'teal', } only %} {% endset %} // Use the variable in the signifier prop {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This is a listing', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], status: { solved: true, locked: true, replies: '33', views: '6k', }, description: 'This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', warning: 'Warning! This is a warning message.', } only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser signifier

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

listing teaser headline

Listing Teaser Headline The headline’s size, HTML tag, and link attributes can be customized via props. Important Notes: While any size can be used, large and xlarge are recommended. Based on the structure of a particular page, the proper HTML tag should be defined via the tag prop. When using the link_attributes prop, an <a> element is wrapped around the headline text. The prop allows you to pass common link attributes such as href and target. Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'This listing has an xlarge headline', tag: 'h3', size: 'xlarge', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], } only %}
HTML
Not available in plain HTML. Please use Twig.
Listing Status, Action Menu, and Share Menu A listing can have various statuses, use the proper prop to mark the relevant status. A popover action menu can be added by using the action_menu prop. Important Notes: The solved status label can be customized. The locked status label can be customized. It is recommended to pass the Menu component in the action_menu prop. Additionally use the Menu component’s title prop to create a label for the action menu. It is mandatory to pass the Share component with menu display in the share_menu prop. Demo
Twig
// Set up action menu and share menu variables {% set demo_action_menu %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'Reply', icon_before: icon_reply, }, { content: 'Favorite', icon_before: icon_heart, }, { content: 'Subscribe', icon_before: icon_eye, }, ] } only %} {% endset %} {% set demo_share_menu %} {% include '@bolt-components-share/share.twig' with { display: 'menu', size: 'small', text: 'Share this listing', sources: [ { name: 'facebook', attributes: { href: 'https://www.facebook.com/sharer/sharer.php?u=https://pega.com&src=sdkpreparse' } }, { name: 'twitter', attributes: { href: 'https://twitter.com/intent/tweet?url=https://pega.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!' } }, { name: 'linkedin', attributes: { href: 'https://www.linkedin.com/shareArticle?url=https://pega.com' } }, { name: 'email', attributes: { href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com' } } ], copy_to_clipboard: { text_to_copy: 'https://pega.com' }, } only %} {% endset %} // Use the variables in action_menu and share_menu props {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { headline: { text: 'This listing has every status and menu possible', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted 8 hours 15 minutes ago', 'Last activity: 2 minutes ago', ], status: { solved: true, solved_label: 'Completed', locked: true, locked_label: 'Archived', replies: '33', views: '6k', }, action_menu: demo_action_menu, share_menu: demo_share_menu, } only %}
HTML
Not available in plain HTML. Please use Twig.
Listing Meta Data and More A listing can have meta data, a short description, and a warning. Important Notes: Meta data can be passed via the meta_items prop, each item is visually separated by a pipe. Extra content can be passed to the description prop. It will appear below the meta data. Truncating with an ellipsis and a read more button is optional. Warning content can be passed to the warning prop. It will appear below the description. A warning icon is appended at the start. Meta data, description, and warning may contain links, use the link element to render a link. This will generate a link that is not blocked by the headline link. Demo
  • Posted by username on May 21, 2020
  • Last activity: 2 minutes ago

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

Warning! This is a warning message.

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

listing teaser reply

Listing Reply A listing can show one relevant reply at a time. Content can be added by using the reply prop. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago

Replied on Aug 21, 2021

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

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

Go to reply

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

listing teaser variant

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

listing teaser callout

Listing Teaser Callout A listing teaser can have a callout section. Any content can be rendered as the callout. Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago

This is a callout headline

This is callout text.

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

listing teaser layout

Listing Teaser Layout and Gutter By default, a listing teaser has a horizontal layout, but it can be changed to vertical or responsive (content will wrap under the signifier at the small breakpoint). Demo
  • Posted 8 hours 15 minutes ago
  • Last activity: 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias libero repellendus, dolorum vitae iste iure quas tempora! Distinctio hic ducimus excepturi adipisci est libero quia! Explicabo mollitia ad voluptatum impedit!
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: signifier, headline: { text: 'This listing has a responsive layout', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, layout: 'responsive', gutter: 'medium', } only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Academy Training List Training List is a way to display the progression a particular course. Important Notes: A training list is composed of the Listing Teaser component and the List component with solid separators. solved_label is used for customizing the solved status label text. locked_label is used for customizing the locked status label text. Demo
Twig
// Set up a particular training {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'brand-orbit', size: 'large', color: 'teal', } only %} {% endset %} {% set demo_training %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This training is both completed and archived', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Module', 'Completed August 18, 2019', 'Last updated August 11, 2019', ], status: { solved: true, solved_label: 'Completed', locked: true, locked_label: 'Archived', }, warning: 'This training has a warning.' } only %} {% endset %} // Render a list to display trainings {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_training, ] } only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Collaboration Center Post List Post List is a way to display activities in Pega’s Collaboration Center. Important Notes: A post list is composed of the Listing Teaser component and the List component with solid separators. Demo
  • Posted by mikemai on Jun 6, 2020
  • Last activity: 8 hours 15 minutes ago

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

  • 26 Replies
  • 666 Views
  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hours 26 minutes ago
  • Solved
  • Locked
  • 2 Replies
  • 56 Views
Twig
// Set up a particular post {% set demo_icon %} {% include '@bolt-components-icon/icon.twig' with { name: 'questions', size: 'large', color: 'teal', } only %} {% endset %} {% set demo_action_menu %} {% include '@bolt-components-menu/menu.twig' with { title: 'More actions', items: [ { content: 'Reply', icon_before: icon_reply, }, { content: 'Favorite', icon_before: icon_heart, }, { content: 'Subscribe', icon_before: icon_eye, }, ] } only %} {% endset %} {% set demo_post %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_icon, headline: { text: 'This is a post with actions (also favorited and subscribed)', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Posted by <a href="https://collaborate.pega.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mikemai</a> on Apr 9, 2020', 'Last activity: 8 hours 26 minutes ago', ], description: description, reply: reply, status: { solved: true, locked: true, replies: '2', views: '56', }, action_menu: demo_action_menu, } only %} {% endset %} // Render a list to display posts {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_post, ] } only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Article List Article List is a way to display teasers for a list of articles. Important Notes: An article list is composed of the Listing Teaser component and the List component with solid separators. Keep in mind the signifier and headline vertically center align with each other. When using image as the signifier, it is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline. Demo
Twig
// Set up a particular article {% set demo_thumbnail %} <img src="/image.jpg" alt="" width=32 height=32> {% endset %} {% set demo_share_menu %} {% include '@bolt-components-share/share.twig' with { display: 'menu', size: 'small', text: 'Share this article', sources: [ { name: 'facebook', attributes: { href: 'https://www.facebook.com/sharer/sharer.php?u=https://pega.com&src=sdkpreparse' } }, { name: 'twitter', attributes: { href: 'https://twitter.com/intent/tweet?url=https://pega.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!' } }, { name: 'linkedin', attributes: { href: 'https://www.linkedin.com/shareArticle?url=https://pega.com' } }, { name: 'email', attributes: { href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com' } } ], copy_to_clipboard: { text_to_copy: 'https://pega.com' }, } only %} {% endset %} {% set demo_article %} {% include '@bolt-components-listing-teaser/listing-teaser.twig' with { signifier: demo_thumbnail, headline: { text: 'This is an article', tag: 'h3', size: 'large', link_attributes: { href: 'https://pega.com' }, }, meta_items: [ 'Category', 'Duration', 'Posted by Name', ], share_menu: demo_share_menu, } only %} {% endset %} // Render a list to display articles {% include '@bolt-components-list/list.twig' with { spacing: 'small', inset: true, separator: 'solid', items: [ demo_article, ] } only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Search Result List Search Result List is a way to display teasers for a list of search results. Demo
  • Product

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

Looking for deployment guides for your environment?

Select your version to view documentation.

  • Collaboration Center

  • Question

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

Related videos

  • Video

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

  • Video

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

  • Video

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

  • Challenge

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

  • Discussion

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

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

  • Challenge

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

  • Module

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

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

logo docs

Logo

A container for displaying responsive logo.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-logo/logo.twig" with {
  src: "/images/content/logos/logo-paypal.svg"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
invert

Set to true to invert the logo colors.

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

logo invert variation

menu docs

Menu

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-menu/menu.twig' with {
  items: [
    {
      content: 'Menu Item 1',
    },
    {
      content: 'Menu Item 2',
      attributes: {
        target: '_blank',
      },
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Menu
Prop Name Description Type Default Value Option(s)
attributes

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

object
items

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

array
  • See below
content

Custom content for menu items.

string , array , object
title

Controls the inset spacing of each menu item.

string
spacing

Controls the inset spacing of each menu item.

string small
  • xsmall , small , medium
Menu: items
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the trigger (Twig only).

string , array , object
url

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

string
target

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

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

Determines the button tag type for semantic buttons

string button
  • button , submit , reset
cursor

Type of cursor shown on hover.

string pointer
  • auto , pointer , zoom-in , zoom-out
on_click

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

string
on_click_target

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

string
onClick
(deprecated)

Use on_click instead.

onClickTarget
(deprecated)

Use on_click_target instead.

disabled

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

boolean false
icon_before

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

object
icon_after

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

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

menu

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

menu title variations

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

menu spacing variations

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

menu use case icons

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

menu use case popover

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

menu use case theming

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

modal docs

Modal

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-elements-button/button.twig" with {
  content: "Open Modal",
  attributes: {
    type: 'button',
    "data-bolt-modal-target": ".js-target-name",
  }
} only %}

{% include "@bolt-components-modal/modal.twig" with {
  content: "This is a modal",
  attributes: {
    class: "js-target-name"
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
width

Controls the width of the modal container.

string optimal
  • full , regular , optimal , auto
spacing

Controls the spacing around the modal container.

string medium
  • none , small , medium , large
persistent

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

boolean false
persistent_return_url

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

string
theme

Controls the color theme of the modal container.

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

Controls the scrolling area.

string container
  • overall or container
uuid

Unique ID for modal, randomly generated if not provided.

string
Install Install
  npm install @bolt/components-modal
Dependencies @a11y/focus-trap @bolt/components-button @bolt/components-text @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue tabbable

modal

This is the modal container's header.

This is the modal container's body

This is the modal container's body.

This is the modal container's footer.

modal width variations

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

modal spacing variations

The modal container's spacing can be adjusted by the spacing prop. The default is set to medium. Spacing Options
This is a modal set to none spacing. This removes the spacing inside the modal container.
This is a modal set to small spacing. This sets small inset spacing on the modal container.
This is a modal set to medium spacing. This sets medium inset spacing on the modal container.
This is a modal set to large spacing. This sets large inset spacing on the modal container.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).

modal theme variations

The modal container's coloring theme can be adjusted by the theme prop. The default is set to xlight. Theme Options
This is a modal set to none theme. This makes the modal container transparent.
This is a modal set to xlight theme. This sets the xlight theme on the modal container.
This is a modal set to light theme. This sets the light theme on the modal container.
This is a modal set to dark theme. This sets the dark theme on the modal container.
This is a modal set to xdark theme. This sets the xdark theme on the modal container.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).

modal scroll variations

The scrollable area can be adjusted by using the scroll prop. The default is set to container. Scroll Options
Tall image Tall image This makes the overall viewport area scrollable.
Tall image Tall image This makes the modal container itself scrollable.
Additional Notes: this prop only applies to viewports equal to or above the small breakpoint (~600px).

modal trigger variations

Trigger Options
This modal is triggered by a button. The Button component is the standard method to trigger a modal.
A Rock Climber A Rock Climber

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

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

Link trigger This modal is triggered by a link. Buttons are preferred for opening a modal, but you can use a link in a pinch.

modal usage javascript

Toggle the Modal You can toggle a modal either by adding the data-bolt-modal-target data attribute to a trigger element, or by calling the Modal's show() and hide() methods directly via JavaScript. Data attribute Use the data attribute data-bolt-modal-target on a trigger element to toggle a modal. The value of the data attribute must be a valid CSS selector that matches your target modal. When you click the trigger the modal will show if currently hidden or it will hide if currently shown. Demo This modal was shown via the data-bolt-modal-target data attribute. The same data attribute is used on the button below to hide the modal. JavaScript Use the Modal's show() and hide() methods to toggle a modal. Before calling any methods on the modal you must first wait for the Modal component to be ready. See the demo below for reference. Demo This modal was shown by calling the show() method. The hide() method will be called when you click the button below. Custom JavaScript <script> const modal = document.querySelector('.js-bolt-modal--js-demo'); const showButton = document.querySelector('.js-bolt-modal-trigger--open'); const hideButton = document.querySelector('.js-bolt-modal-trigger--close'); // Promise ensures Modal is defined before calling hide/show customElements.whenDefined('bolt-modal').then(() => { showButton.addEventListener('click', () => { modal.show(); }) hideButton.addEventListener('click', () => { modal.hide(); }) }); </script>
Image Modal Usage <bolt-trigger> is needed to create an image modal that gets triggered from either the Image component or the Device Viewer component. The following are examples of how you can assemble the necessary pieces together. Please note that you should use the width prop on <bolt-modal> to accommodate your needs, optimal width is about 70 characters wide, full width will take up the width of the page.
Enlarge image and show caption Create a thumbnail image trigger and pass a figure with image and caption into the modal content. Note: make sure you upload a high-resolution image (up to 2880px wide) if you intend to show the image as big as possible. Modal width is set to auto and image max-width is set to 1000px.
Image description. Image description.

This is the caption for the image.

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

This is the caption for the image.

modal usage video

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

modal usage content

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

This Is a Headline

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

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

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

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

Sign in to view PegaWorld live stream

modal usage persistent

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

Template Instructions

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

Sign in to view restricted content

modal usage form

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

Get the report

(all fields are required)

modal with web component

Web Component Usage Modal is a web component. You can simply use <bolt-modal> in the markup to make it render. In the following examples, we use data-bolt-modal-target to trigger the modal. However, the same options shown on the Usage Javascript page are also available on the web component.
This is a modal.
<button type="button" class="e-bolt-button" data-bolt-modal-target=".js-bolt-modal-demo"> Open Modal </button> <bolt-modal class="js-bolt-modal-demo"> This is a modal. </bolt-modal>
Basic Usage The modal container has 3 sections (slots) for passing content, header, default, footer. To pass content to either the header or footer, slot must be defined.
This is the header This is the body (default). This is the footer
<button type="button" class="e-bolt-button" data-bolt-modal-target=".js-bolt-modal-basic-demo"> Open Modal </button> <bolt-modal class="js-bolt-modal-basic-demo"> <bolt-text slot="header">This is the header</bolt-text> <bolt-text>This is the body (default).</bolt-text> <bolt-text slot="footer">This is the footer</bolt-text> </bolt-modal>
Advanced Usage The web component has all the options shown in the schema table. You can define each prop on the <bolt-modal> element. Use unique combinations to customize a modal to your liking.
<button type="button" class="e-bolt-button" data-bolt-modal-target=".js-bolt-modal-advanced-demo"> Open Modal </button> <bolt-modal width="optimal" spacing="none" theme="none" scroll="overall" class="js-bolt-modal-advanced-demo"> <bolt-image src="/images/content/backgrounds/background-robotics-customer-service.jpg" alt="This is an image"></bolt-image> </bolt-modal>

navbar docs

Navbar

Layout container that consist of secondary navigation system.

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

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

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

object
    • content

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

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

          Name of the (optional) icon to be used.

    • hide_text

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

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

      Make the Navbar title a link.

        • attributes

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

    • secondary_content

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

links

Content of navbar links. Navbar ul is expected here.

any
content

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

any
spacing

Controls the inset spacing of the navbar

string small
  • none , xsmall , small , medium
width

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

string full
  • full or auto
center

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

boolean false
static

Set the navbar to be static instead of sticky.

boolean false
theme

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

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

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

integer
sticky_offset

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

integer
sticky_offset_selector

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

string
scroll_offset

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

integer
uuid

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

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

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

object
content *

Content of navbar ul. Navbar li are expected here.

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

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

object
link *

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

object
    • attributes

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

    • content

      Content of the link.

    • icon

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

        • position

          Where to position the icon within the button

          • before or after
        • attributes

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

        • name

          Icon name

        • background

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

          • none , circle , square
        • size

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

          • small , medium , large , xlarge
        • color

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

          • auto , teal , navy , yellow , orange , gray , pink , berry , wine , violet
current

Automatically mark a navbar link as current

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

navbar

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

navbar spacing

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

navbar center

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

navbar width

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

navbar static

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

navbar theme

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

navbar hide title text

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

navbar scroll offset

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

navbar sticky offset

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

navbar multiple

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

navbar custom content

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

ol docs

Ordered List

Vertical list of numbered items.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-ol/ol.twig" with {
  items: [
    "Do not include any data or information in your posts that are confidential!",
    "Apply basic practices for collaborative work.",
    "Be honest, respectful, trustworthy and helpful.",
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Ordered List
Prop Name Description Type Default Value Option(s)
attributes

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

object
contentItems
(deprecated)

Use the items prop instead.

array
  • See below
items *

All items can be simple text or items.

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

      Renderable content (i.e. a string, render array, or included pattern) for a single list item.

Ordered List: items
Prop Name Description Type Default Value Option(s)
text
string
contentItems

Passes to @bolt/text.twig

object
Install Install
  npm install @bolt/components-ol
Dependencies @bolt/components-li @bolt/core-v3.x @bolt/lazy-queue

ol

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

ol theme variation

Theme: xlight

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

Theme: light

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

Theme: dark

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

Theme: xdark

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

Theme: medium

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

ol nested items

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

ol with web component

Web Component Usage

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

Example

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

Simple usage

Item 1 Item 2 Item 3 Item 4 Item 5

Nesting of lists (ol and ul)

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

Theme variations

Theme: xlight

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: light

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: dark

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: xdark

Item 1 Item 2 Item 3 Item 4 Item 5

page header docs

Page Header

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

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

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

object
content *

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

string , array , object
secondary_content

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

string , array , object
logo *

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

object
    • attributes

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

    • image_src

      Set the path to the logo image.

    • label

      Set a label (visually hidden) for the logo.

subheadline

Text or other content to display next to the logo.

any
cta

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

object
theme

Set the color theme of the page header.

string
  • xlight , light , dark , xdark
static

Set the page header to be static instead of sticky.

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

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

object
content *

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

string , array , object
Page Header Search Panel
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

string , array , object
Page Header Nav Ul
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

string , array , object
category *

Indicate which set of navigation this nav ul is rendering.

string
  • site , related-sites , user
popover_position

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

string
  • edge-start or edge-end
flat

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

boolean false
wrap_site_nav_items

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

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

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

object
link

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

object
    • attributes

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

    • content

      Content of the link.

    • desktop_heading

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

children

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

object
content

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

string , array , object
current

Set the nav li as the current item. This only applies if nav ul category is set to "site".

boolean false
full_width

Set the nav li width to full. This only applies if nav ul category is set to "site".

boolean false
view_all

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

boolean false
popover

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

boolean false
selected

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

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

page header

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

pagination docs

Bolt Pagination

A navigation system for browsing search results.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-pagination/pagination.twig" with {
  current: 5,
  total: 10,
  first: {
    href: 'page-1-url'
  },
  previous: {
    href: 'page-4-url'
  },
  pages: {
    3: {
      href: 'page-3-url'
    },
    4: {
      href: 'page-4-url'
    },
    5: {
      href: 'page-5-url'
    },
    6: {
      href: 'page-6-url'
    },
    7: {
      href: 'page-7-url'
    }
  },
  next: {
    href: 'page-6-url'
  },
  last: {
    href: 'page-10-url'
  }
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
align

Horizontally align the items.

string center
  • start , end , center
total *

Total pages within the pagination

integer
current *

Current page selected

integer
pages *

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

array , object
first

A link object for the first page

object
    • href

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

    • attributes

      A Drupal-style attributes object for this link.

previous

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

object
    • href

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

    • attributes

      A Drupal-style attributes object for this link.

next

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

object
    • href

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

    • attributes

      A Drupal-style attributes object for this link.

last

A link object for the last page

object
    • href

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

    • attributes

      A Drupal-style attributes object for this link.

previousText

Text to be displayed for the previous anchor

string Previous
nextText

Text to be displayed for the next anchor

string Next
Install Install
  npm install @bolt/components-pagination
Dependencies @bolt/core-v3.x

pagination

pagination theme variations

pagination count variations

pagination align variations

Internationalization Support

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

Align start

Align end

Align center

Pagination on the Left, Something on the Right

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

placeholder docs

Bolt Placeholder

Placeholder element only used in Pattern Lab demos.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-placeholder/placeholder.twig" with {
  text: "Bolt Placeholder Example",
  size: "large",
  animated: true
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
size

How large is this placeholder?

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

Should this placeholder have an animated border?

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

placeholder

Bolt Placeholder Example
Bolt Placeholder Example

placeholder sizes variations

xsmall Placeholder
small Placeholder
medium Placeholder
large Placeholder
xlarge Placeholder

popover docs

Popover

A small overlay that opens on demand.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-popover/popover.twig' with {
  trigger: 'This is the popover trigger',
  content: 'This is the popover content.'
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
trigger

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

object
content

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

any
placement

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

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

Controls the event that triggers the popover to show.

string click
  • click or hover
spacing

Controls the spacing around the popover content.

string small
  • none , xsmall , small , medium
theme

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

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

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

string
fallbackPlacements

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

array
uuid

Unique ID for popover, randomly generated if not provided.

string
Install Install
  npm install @bolt/components-popover
Dependencies @bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue

popover

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

popover placement variations

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

popover spacing variations

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

popover use case menu

Popover Menu Create a popover menu by combining the Popover and Menu components. Important Notes: It is recommended to set the spacing to none because the Menu component already has spacing built in. Demo
Twig
{% set trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'This triggers a popover menu', attributes: { type: 'button' } } only %} {% endset %} {% set content %} {% include '@bolt-components-menu/menu.twig' with { title: 'Choose one of these', items: [ { content: 'Menu item 1', }, { content: 'Menu item 2', }, { content: 'Menu item 2', }, ] } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: trigger, content: content, spacing: 'none', } only %}
HTML
<bolt-popover> <button type="button" class="e-bolt-button"> This triggers a popover </button> <div slot="content"> <bolt-menu> <bolt-menu-item> Menu Item 1 </bolt-menu-item> <bolt-menu-item> Menu Item 2 </bolt-menu-item> <bolt-menu-item> Menu Item 3 </bolt-menu-item> </bolt-menu> </div> </bolt-popover>
Custom Popover Bubble Width The popover bubble width is set to 250px by default, but it can be customized per use case by defining the --c-bolt-popover-bubble-width CSS custom property via inline style. Important Notes: It is recommended to always use the CSS function min() when customizing the popover bubble width. This ensures the width will never break page layouts. The following example uses min(80vw, 500px), which means the width is set to 500px unless the browser width is smaller than 500px, then the width will become 80% of the browser width. Keep in mind that the min() function is not supported in Microsoft Edge 42 and older. If you need to support such old browser, you should set the custom width to a plain old absolute value such as 500px. Demo

This Is an Eyebrow

This Is a Headline

This is a paragraph.

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

popover theme variations

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

progress bar docs

Progress Bar

Visual indicator for the progression of an activity.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-progress-bar/progress-bar.twig" with {
  value: 65,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
value *

The current value.

number
valueFormat

The data format that the current value should display.

string percent
  • percent or step
max
- Minimum is 1

The maximum value.

number 100
animated

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

boolean false
Advanced Schema Options
min

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

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

progress bar basic usage

0%
65%
100%

progress bar value format

Percent format
65%
Step format
65 / 100

progress bar max

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

progress bar animated

Animated
75%

progress bar theming

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

progress bar in toolbar

Progress bar in toolbar
65%
65%
65%
Stepper progress
1 / 5
Custom JavaScript <script type="text/javascript"> window.addEventListener('load', function() { const progressBar = document.querySelector('.js-bolt-progress-bar-stepper'); const progressBarBackward = document.querySelector( '.js-bolt-progress-bar-stepper-back', ); const progressBarForward = document.querySelector( '.js-bolt-progress-bar-stepper-forward', ); if (progressBarBackward) { progressBarBackward.addEventListener('click', () => { if (progressBar.value > 0) { progressBar.value -= 1; } }); } if (progressBarForward) { progressBarForward.addEventListener('click', () => { if (progressBar.value < progressBar.max) { progressBar.value += 1; } }); } if (progressBar) { progressBar.addEventListener('rendered', function() { if (progressBar.value === 1) { progressBarBackward.setAttribute('disabled', ''); } if (progressBar.value === progressBar.max) { progressBarForward.setAttribute('disabled', ''); } if (progressBar.value > 1) { progressBarBackward.removeAttribute('disabled'); } if (progressBar.value < progressBar.max) { progressBarForward.removeAttribute('disabled'); } }); } }); </script>
Loading animation
50%
Custom JavaScript <script type="text/javascript"> window.addEventListener('load', function() { const progressBar = document.querySelector('.js-bolt-progress-bar-loading'); const progressBarReset = document.querySelector( '.js-bolt-progress-bar-loading-reset', ); let progressBarInitialValue; function autoIncrementProgressBar() { progressBarInitialValue = progressBar.value; const myVar = setInterval(myTimer, 250); function myTimer() { progressBar.value += 1; if (progressBar.value >= progressBar.max) { clearInterval(myVar); progressBar.animated = false; progressBarReset.removeAttribute('disabled'); progressBarReset.textContent = 'Click to reset'; } } } if (progressBar) { autoIncrementProgressBar(); } if (progressBarReset && progressBar) { progressBarReset.addEventListener('click', () => { progressBar.value = progressBarInitialValue; progressBar.animated = true; progressBarReset.setAttribute('disabled', ''); progressBarReset.textContent = 'Hang tight before resetting...'; autoIncrementProgressBar(); }); } }); </script>
Web Component Usage Bolt progress-bar is a web component, you can simply use <bolt-progress-bar> in the markup to make it render.
<bolt-progress-bar value=65></bolt-progress-bar>
Prop Usage Configure the <bolt-progress-bar> with the properties specified in the schema.
<bolt-progress-bar value=7 value-format="step" max=12 animated></bolt-progress-bar>

ratio docs

Bolt Ratio

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-ratio/ratio.twig" with {
  children: '<img src="https://via.placeholder.com/350x150">',
  ratio: "350/150",
  attributes: {
    style: [
      "max-width: 400px;",
      "margin: 0 auto;",
    ]
  }
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
children

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

string , object , array
ratio

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

string
aspectRatioWidth
(deprecated)

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

number
aspect-ratio-width
(deprecated)

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

number
aspectRatioHeight
(deprecated)

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

number
aspect-ratio-height
(deprecated)

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

number
Advanced Schema Options
no_css_vars

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

boolean
no-css-vars

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

boolean
no_shadow

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

boolean
no-shadow

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

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

ratio no shadow no css vars

ratio no shadow

ratio 1x1

ratio 21x9 web component

ratio 4x3

ratio

search filter docs

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

share docs

Share

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-share/share.twig' with {
  sources: [
    {
      name: 'facebook',
      attributes: {
        href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse'
      }
    },
    {
      name: 'twitter',
      attributes: {
        href: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
      }
    },
    {
      name: 'linkedin',
      attributes: {
        href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
      }
    },
    {
      name: 'email',
      attributes: {
        href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
      }
    }
  ],
  copy_to_clipboard: {
    text_to_copy: 'https://boltdesignsystem.com'
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Share
Prop Name Description Type Default Value Option(s)
attributes

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

object
text

Defines the label text in front of the social icons.

string Share this page
size

Controls the size of icons and spacing.

string medium
  • small or medium
align

Controls the horizontal alignment of label text and icons.

string start
  • start , center , end
opacity

Controls the overall transparency of the share tool.

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

Social media sources to share to.

array
  • See below
display

Controls the display of the share options.

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

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

copyToClipboard
(deprecated)

Please use copy_to_clipboard.

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

Name of the social media source.

string
  • facebook , twitter , linkedin , email
attributes

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

object
url
(deprecated)

Please pass the href value through the source attributes object.

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

share

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

share size variations

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

share display variations

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

share opacity variations

Opacity Inline share is available in various opacities. Use the opacity prop to control it. Important Notes: Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression. Opacity does not work with menu display. Demo
Twig
{% include '@bolt-components-share/share.twig' with { opacity: 60, sources: var_foo, copy_to_clipboard: var_bar, } only %}
HTML
Not available in plain HTML. Please use Twig.

share align variations

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

share theme variations

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

share use case custom title

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

side nav docs

 This component is a work in progress.

stack docs

Stack

A content container that defines spacing between elements vertically.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-stack/stack.twig" with {
  content: "This is one stack."
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
spacing

Control the spacing in between items.

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

Content of the stack.

string , array , object
Install Install
  npm install @bolt/components-stack
Dependencies @bolt/core-v3.x @bolt/lazy-queue

stack

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

stack spacing variations

Multiple stacks with xlarge spacing

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

Multiple stacks with large spacing

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

Multiple stacks with medium spacing

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

Multiple stacks with small spacing

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

Multiple stacks with xsmall spacing

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

Multiple stacks with none spacing

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

sticky docs

Sticky

A content container that enables content to be sticky.

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

    // Sticky content

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

table docs

Table

Content container for tabular content.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-table/table.twig" with {
  headers: {
    top: {
      cells: [
        "Column 1",
        "Column 2",
        "Column 3",
      ]
    },
    side: {
      cells: [
        "Row 1",
        "Row 2",
        "Row 3",
        "Footer",
      ]
    }
  },
  rows: [
    {
      cells: [
        "R1C1",
        "R1C2",
        "R1C3",
      ]
    },
    {
      cells: [
        "R2C1",
        "R2C2",
        "R2C3",
      ]
    },
    {
      cells: [
        "R3C1",
        "R3C2",
        "R3C3",
      ]
    }
  ],
  footer: {
    cells: [
      "FC1",
      "FC2",
      "FC3",
    ]
  }
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
headers

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

object
    • top
        • cells

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

          • See below
    • side
        • cells

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

          • See below
rows *

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

array
    • cells

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

      • See below
footer

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

object
    • cells

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

      • See below
format

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

string regular
  • regular or numeric
borderless

Removes the vertical border in between cells.

boolean false
first_col_fixed_width

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

boolean false
caption

Set a table caption, displayed below the table content.

string
Install Install
  npm install @bolt/components-table
Dependencies @bolt/core-v3.x @bolt/lazy-queue himalaya

table

With Rows Only

R1C1 R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 R3C2 R3C3

With Top Headers

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

With Side Headers

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

With Top and Side Headers

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

With Headers and Footer

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

Real Example

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

table format variations

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

Regular Format

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

Numeric Format

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

table borderless

Remove the vertical border in between cells.

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

Set column widths to be flexible.

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

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

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

table cell attributes

Add attributes to table cells.

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

table theme variations

xdark

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

dark

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

light

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

xlight

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

table item variations

Pass different items into cells

Item number Description Assemblies

Build 2.0.1.0 — SR-49969

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

table caption

With Caption

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

table with web component

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

tabs docs

Tabs

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-tabs/tabs.twig" with {
  panels: [
    {
      label: "Tab label 1",
      content: "Tab panel 1.",
    },
    {
      label: "Tab label 2",
      content: "Tab panel 2.",
    },
    {
      label: "Tab label 3",
      content: "Tab panel 3.",
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Tabs
Prop Name Description Type Default Value Option(s)
panels

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

array
  • See below
align

Horizontal alignment of tab labels.

string start
  • start , center , end
label_spacing

Set label spacing.

string small
  • small or medium
panel_spacing

Set panel spacing.

string small
  • none , small , medium
inset

Controls spacing placement on tab labels and panels.

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

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

integer 1
scrollOffsetSelector

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

string
scrollOffset

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

integer
Tabs: items
Prop Name Description Type Default Value Option(s)
label

Tab label used in the navigation. Twig only.

string Tab
content

Tab panel content.

string , object , array
selected

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

boolean false
id

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

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

tabs

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

tabs inset

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

tabs align

Align: start
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Align: center
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
Align: end
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3

tabs theme

Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.
Tab label 1
Tab panel 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta ut tortor id luctus. Cras fermentum pretium ipsum sit amet tempus. Sed lobortis dui ante, feugiat pharetra turpis dapibus sit amet. Donec hendrerit diam vel ante hendrerit ornare. Donec non aliquam nisi.
Tab label 2
Tab panel 2. Aliquam dignissim non ligula et condimentum. Donec et luctus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis dui velit. Proin hendrerit turpis eu elementum rhoncus.
Tab label 3
Tab panel 3. Curabitur fermentum dolor sed dignissim lobortis. Curabitur rutrum arcu velit, a placerat nunc sodales at. Sed vel mi ac lectus volutpat accumsan nec in ipsum. In hac habitasse platea dictumst. Morbi lobortis pellentesque ultricies. Cras ultrices sapien quis tellus porttitor consequat.

tabs content

A text group

Eyebrow

This is a headline.

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

A table
Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
An image
Mountains Mountains
A video
Tabs
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
An accordion
This is the accordion content.
This is the accordion content.
This is the accordion content.
A carousel
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Previous Next
Tab label 1
Tab panel
Tab label 2
Tab panel
A very long tab label
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel
Tab label 1
Tab panel
Tab label 2
Tab panel
Tab label 3
Tab panel
Tab label 4
Tab panel
Tab label 5
Tab panel
Tab label 6
Tab panel

tabs selected tab

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

tabs use case tabbed band

Tabbed Band A Tabbed Band is a high-level content container that utilizes a specific configuration of the Band and the Tabs components. Tabs will need the following props: inset: "off", label_spacing: "medium", panel_spacing: "medium",

This is a Tabbed Band

This is Tab 1

Maximize Value with Next Best Action Intelligence

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

This is Tab 2
Maximize Value with Next Best Action Intelligence

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

This is Tab 3

Customer Decision Hub

Infuse real-time AI into every customer engagement

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

Call to Action

tabs deep linking

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

tabs web component

Web Component Usage Tabs is a web component. Add the <bolt-tabs> element containing multiple <bolt-tabs-panel> elements to create a set of tabs. Inside each <bolt-tab-panel> mark the "label" content with the attribute slot="label". Everything else is considered tab "content".
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<bolt-tabs> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Prop Usage Configure the tabs with the properties specified in the schema.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<bolt-tabs panel-spacing="small" align="center"> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>
Advanced Usage Two advanced options are shown below. Automatically show a <bolt-tab-panel> by setting selected-tab on <bolt-tabs> or by adding selected to a single <bolt-tab-panel>.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3
<!-- Use `selected-tab` to set selected tab --> <bolt-tabs selected-tab="2"> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs> <!-- Use `selected` to set selected tab --> <bolt-tabs> <bolt-tab-panel> <bolt-text slot="label">Tab label 1</bolt-text> <bolt-text>Tab panel 1</bolt-text> </bolt-tab-panel> <bolt-tab-panel selected> <bolt-text slot="label">Tab label 2</bolt-text> <bolt-text>Tab panel 2</bolt-text> </bolt-tab-panel> <bolt-tab-panel> <bolt-text slot="label">Tab label 3</bolt-text> <bolt-text>Tab panel 3</bolt-text> </bolt-tab-panel> </bolt-tabs>

teaser docs

Teaser

An interactive UI element that summarizes a particular resoruce.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-teaser/teaser.twig' with {
  signifier: image,
  headline: {
    text: 'Some awesome Title',
    link_attributes: {
      href: 'https://www.pega.com',
    }
  },
} %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
layout

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

string vertical
  • vertical , horizontal , responsive
gutter

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

string medium
  • small , medium , large
type

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

string
  • pdf , video , external-link
signifier

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

object
eyebrow_text

Set the helper info above the headline.

string
headline

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

object
    • text

      Renderable text content of the headline.

    • tag

      Set the semantic HTML tag for the headline.

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

      Set the size of the headline.

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

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

subheadline

Set the subheadline text and size.

object
    • text

      Set the subheadline text content.

    • size

      Set the size of the subheadline.

      • xxlarge , xlarge , large
    • tag

      Set the semantic HTML tag for the subheadline.

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

Set a brief description of the resource.

object
    • content

      Content of the description..

    • show_on_hover

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

time

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

string
like

Render the like button. Link element is expected here.

object
share

Render the share button. Share menu is expected here.

object
chip_list

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

object
status
object
    • locked

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

    • views

      Render the view count.

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

teaser

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

teaser layout

Teaser Layout There are currently three layout options, vertical, horizontal, and responsive. The default option is vertical. Important Notes: Vertical or responsive teaser accepts 16:9 aspect ratio signifier. Any other aspect ratio will automatically be cropped to a 16:9 ratio. Horizontal teaser accepts 1:1 (square) aspect ratio signifier. Any other aspect ratio will automatically be cropped to a 1:1 ratio. Demo
Alt text. Alt text.
The signifier is using a 16:9 aspect ratio image. Aliquip sint mollit irure eiusmod duis aliquip duis qui nostrud enim ea aute in enim.
Alt text. Alt text.
The signifier is using a 1:1 aspect ratio image. Aliquip sint mollit irure eiusmod duis aliquip duis qui nostrud enim ea aute in enim. Do et eiusmod sint velit est do exercitation qui minim.
Alt text. Alt text.
The signifier is using a 16:9 aspect ratio image. Duis dolore labore cillum excepteur aute veniam dolore consectetur est sint exercitation sit. Dolor eiusmod officia laborum tempor. Enim eiusmod Lorem laboris aliqua dolore.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { layout: 'horizontal', signifier: image, headline: { text: 'This is the teaser headline', link_attributes: { href: 'https://www.pega.com', } }, } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser gutter

Gutter Size for Horizontal and Responsive Teasers The space between columns on the horizontal and responsive teasers can be modified with the gutter prop. It can be small, medium, or large. Demo
Alt text. Alt text.
Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna. Enim eiusmod Lorem laboris aliqua dolore. Dolor eiusmod officia laborum tempor.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { layout: 'horizontal', gutter: 'large', ... } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser chips

Teaser Chips If you would like to show chips at the bottom of the teaser, just pass rendered Chip List component into the chip_list prop. Demo
Alt text. Alt text.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim. Id consectetur dolor voluptate eu veniam anim adipisicing dolor ut occaecat officia fugiat magna reprehenderit.
Video Research
Twig
{% set chip_list %} {% include '@bolt-components-chip-list/chip-list.twig' with { size: 'xsmall', items: [ { text: 'Video', }, { text: 'Research', }, ], } only %} {% endset %} {% include '@bolt-components-teaser/teaser.twig' with { chip_list: chip_list, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

teaser type and time

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

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

teaser status and actions

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

teaser text options

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

teaser description on hover

Show Description on Hover The teaser description has the show_on_hover boolean prop. When it is set to true, the description appears as an overlay above the signifier and it is truncated at 80 characters. Demo
Alt text. Alt text.
7 pages
Long description. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Twig
{% include '@bolt-components-teaser/teaser.twig' with { description: { content: 'This is the description', show_on_hover: true, }, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

text docs

Text

Pega branded typography system.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  <bolt-text>
  This is text.
</bolt-text>
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
text *

Text content of the headline.

string
tag

HTML semantic tags.

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

Inline text or a block of text.

string block
  • inline or block
color

Text color in context of theme colors.

string theme-body
  • theme-headline or theme-body
align

Text alignment.

string inherit
  • inherit , start , center , end
opacity

Opacity level.

number 100
  • 100 , 80 , 60 , 40 , 20
quoted

Quoted text.

boolean false
line-height

Line height in context of the typographic design.

string regular
  • tight , regular , loose
letter-spacing

Letter spacing in context of the typographic design.

string regular
  • narrow , regular , wide
text-transform

Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case.

string regular
  • regular , uppercase , lowercase , capitalize
font-family

Font family in context of the typographic design.

string body
  • headline , body , code
font-size

Font size in context of the typographic design.

string medium
  • xsmall , small , medium , large , xlarge , xxlarge , xxxlarge
font-weight

Font weight in context of the typographic design.

string regular
  • regular , semibold , bold
font-style

Emphasized text.

string regular
  • regular or italic
headline

A preset for headlines in context of the typographic design.

boolean false
subheadline

A preset for subheadlines in context of the typographic design.

boolean false
eyebrow

A preset for eyebrow in context of the typographic design.

boolean false
util

Each item in the array will build a utility class. No need to include u-bolt-. For the web component use comma separated string.

array
Install Install
  npm install @bolt/components-text
Dependencies @bolt/components-link @bolt/core-v3.x @bolt/lazy-queue

text

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

text typographic recipes

Typographic Design The following are the official recipes for each piece of our typography. They will cover all common use cases. Only in edge cases, you'd want to break away and create your own recipes. Headlines
This Is the XXXLarge Headline This Is the XXLarge Headline This Is the XLarge Headline This Is the Large Headline This Is the Small Headline This Is the XSmall Headline
<bolt-text headline font-size="xxxlarge"> This Is the XXXLarge Headline </bolt-text> <bolt-text headline font-size="xxlarge"> This Is the XXLarge Headline </bolt-text> <bolt-text headline font-size="xlarge"> This Is the XLarge Headline </bolt-text> <bolt-text headline font-size="large"> This Is the Large Headline </bolt-text> <bolt-text headline font-size="small"> This Is the Small Headline </bolt-text> <bolt-text headline font-size="xsmall" text-transform="uppercase" letter-spacing="wide"> This Is the XSmall Headline </bolt-text>
Subheadlines
This Is the XXLarge Subheadline This Is the XLarge Subheadline This Is the Large Subheadline
<bolt-text subheadline font-size="xxlarge"> This Is the XXLarge Subheadline </bolt-text> <bolt-text subheadline font-size="xlarge"> This Is the XLarge Subheadline </bolt-text> <bolt-text subheadline font-size="large"> This Is the Large Subheadline </bolt-text>
Eyebrow
This Is the Eyebrow
<bolt-text eyebrow> This Is the Eyebrow </bolt-text>
Teaser Teaser is a combination of text with clear information architecture. It is commonly used as a quick summary that draws the reader to a longer piece of content.
This is an eyebrow This is a headline This is a subheadline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.
<bolt-text eyebrow> This is an eyebrow </bolt-text> <bolt-text headline font-size="xxxlarge"> This is a headline </bolt-text> <bolt-text subheadline font-size="xxlarge"> This is a subheadline </bolt-text> <bolt-text> This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. </bolt-text>

text tag variations

Tag Usage <bolt-text> allows for separation of semantics and visual. Using a semantically correct tag will not affect the appearance of the text.
This text has its tag prop defined as: h1
<bolt-text tag="h1"> This text has its tag prop defined as: h1 </bolt-text>
This text has its tag prop defined as: h2
<bolt-text tag="h2"> This text has its tag prop defined as: h2 </bolt-text>
This text has its tag prop defined as: h3
<bolt-text tag="h3"> This text has its tag prop defined as: h3 </bolt-text>
This text has its tag prop defined as: h4
<bolt-text tag="h4"> This text has its tag prop defined as: h4 </bolt-text>
This text has its tag prop defined as: h5
<bolt-text tag="h5"> This text has its tag prop defined as: h5 </bolt-text>
This text has its tag prop defined as: h6
<bolt-text tag="h6"> This text has its tag prop defined as: h6 </bolt-text>
This text has its tag prop defined as: p
<bolt-text tag="p"> This text has its tag prop defined as: p </bolt-text>
This text has its tag prop defined as: div
<bolt-text tag="div"> This text has its tag prop defined as: div </bolt-text>
This text has its tag prop defined as: span
<bolt-text tag="span"> This text has its tag prop defined as: span </bolt-text>

text display variations

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

text color variations

Color Usage <bolt-text> can be colored accordingly based on theming. It can either take on a particular theme's headline color or body text color.
This text has its color prop defined as: theme-headline
<bolt-text color="theme-headline" font-weight="bold" font-size="large"> This text has its color prop defined as: theme-headline </bolt-text>
This text has its color prop defined as: theme-body
<bolt-text color="theme-body" font-weight="bold" font-size="large"> This text has its color prop defined as: theme-body </bolt-text>

text align variations

Align Usage <bolt-text> can be aligned horizontally. This only applies if display is set to block.
This text has its align prop defined as: inherit
<bolt-text display="block" align="inherit"> This text has its align prop defined as: inherit </bolt-text>
This text has its align prop defined as: start
<bolt-text display="block" align="start"> This text has its align prop defined as: start </bolt-text>
This text has its align prop defined as: center
<bolt-text display="block" align="center"> This text has its align prop defined as: center </bolt-text>
This text has its align prop defined as: end
<bolt-text display="block" align="end"> This text has its align prop defined as: end </bolt-text>

text opacity variations

Opacity Usage <bolt-text> can be adjusted in terms of opacity. The options are synced with Bolt's opacity scale.
This text has its opacity prop defined as: 100
<bolt-text opacity="100"> This text has its opacity prop defined as: 100 </bolt-text>
This text has its opacity prop defined as: 80
<bolt-text opacity="80"> This text has its opacity prop defined as: 80 </bolt-text>
This text has its opacity prop defined as: 60
<bolt-text opacity="60"> This text has its opacity prop defined as: 60 </bolt-text>
This text has its opacity prop defined as: 40
<bolt-text opacity="40"> This text has its opacity prop defined as: 40 </bolt-text>
This text has its opacity prop defined as: 20
<bolt-text opacity="20"> This text has its opacity prop defined as: 20 </bolt-text>

text quoted

Quote Usage <bolt-text> can be turned into a quote by using the quoted boolean prop.
This text is quoted. This headline text is also quoted.
<bolt-text quoted> This text is quoted. </bolt-text> <bolt-text headline quoted> This headline text is also quoted. </bolt-text>

text line height variations

Line-height Usage <bolt-text> has a few options for leading (line-height). Leading can be adjusted for legibility. The default is regular.
This text has
its line-height
prop defined as:
tight
<bolt-text line-height="tight"> This text has<br> its line-height<br> prop defined as:<br> tight </bolt-text>
This text has
its line-height
prop defined as:
regular
<bolt-text line-height="regular"> This text has<br> its line-height<br> prop defined as:<br> regular </bolt-text>
This text has
its line-height
prop defined as:
loose
<bolt-text line-height="loose"> This text has<br> its line-height<br> prop defined as:<br> loose </bolt-text>
Letter-spacing Usage <bolt-text> has a few options for the spacing in between letters. It can be adjusted for legibility. The default is regular.
This text has its letter-spacing prop defined as: narrow
<bolt-text letter-spacing="narrow"> This text has its letter-spacing prop defined as: narrow </bolt-text>
This text has its letter-spacing prop defined as: regular
<bolt-text letter-spacing="regular"> This text has its letter-spacing prop defined as: regular </bolt-text>
This text has its letter-spacing prop defined as: wide
<bolt-text letter-spacing="wide"> This text has its letter-spacing prop defined as: wide </bolt-text>

text transform variations

Text-transform Usage <bolt-text> has a few options for transforming letter case. It can be adjusted for legibility. The default is regular.
This text has its text-transform prop defined as: regular
<bolt-text text-transform="regular"> This text has its text-transform prop defined as: regular </bolt-text>
This text has its text-transform prop defined as: uppercase
<bolt-text text-transform="uppercase"> This text has its text-transform prop defined as: uppercase </bolt-text>
This text has its text-transform prop defined as: lowercase
<bolt-text text-transform="lowercase"> This text has its text-transform prop defined as: lowercase </bolt-text>
This text has its text-transform prop defined as: capitalize
<bolt-text text-transform="capitalize"> This text has its text-transform prop defined as: capitalize </bolt-text>

text font family variations

Font-family Usage <bolt-text> has a few options to change typefaces. These options are relative to the types of text such as heading, body, and code. Each type is linked to a specific typeface. This method accounts for our evolving brand.
This text has its font-family prop defined as: headline
<bolt-text font-family="headline"> This text has its font-family prop defined as: headline </bolt-text>
This text has its font-family prop defined as: body
<bolt-text font-family="body"> This text has its font-family prop defined as: body </bolt-text>
This text has its font-family prop defined as: code
<bolt-text font-family="code"> This text has its font-family prop defined as: code </bolt-text>

text font size variations

Font-size Usage <bolt-text> has font-size options to indicate information hierarchy.
This text has its font-size prop defined as: xsmall
<bolt-text font-size="xsmall"> This text has its font-size prop defined as: xsmall </bolt-text>
This text has its font-size prop defined as: small
<bolt-text font-size="small"> This text has its font-size prop defined as: small </bolt-text>
This text has its font-size prop defined as: medium
<bolt-text font-size="medium"> This text has its font-size prop defined as: medium </bolt-text>
This text has its font-size prop defined as: large
<bolt-text font-size="large"> This text has its font-size prop defined as: large </bolt-text>
This text has its font-size prop defined as: xlarge
<bolt-text font-size="xlarge"> This text has its font-size prop defined as: xlarge </bolt-text>
This text has its font-size prop defined as: xxlarge
<bolt-text font-size="xxlarge"> This text has its font-size prop defined as: xxlarge </bolt-text>
This text has its font-size prop defined as: xxxlarge
<bolt-text font-size="xxxlarge"> This text has its font-size prop defined as: xxxlarge </bolt-text>

text font style variations

Font-style Usage <bolt-text> has font-style options to indicate simple emphasis.
This text has its font-style prop defined as: regular
<bolt-text font-style="regular"> This text has its font-style prop defined as: regular </bolt-text>
This text has its font-style prop defined as: italic
<bolt-text font-style="italic"> This text has its font-style prop defined as: italic </bolt-text>

text font weight variations

Font-weight Usage <bolt-text> has font-weight options to indicate emphasis hierarchy.
This text has its font-weight prop defined as: regular
<bolt-text font-weight="regular"> This text has its font-weight prop defined as: regular </bolt-text>
This text has its font-weight prop defined as: semibold
<bolt-text font-weight="semibold"> This text has its font-weight prop defined as: semibold </bolt-text>
This text has its font-weight prop defined as: bold
<bolt-text font-weight="bold"> This text has its font-weight prop defined as: bold </bolt-text>

text ssr with twig filter

Server-side Rendered Web Components (Experimental) The <bolt-text> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
This is text.
{% filter bolt_ssr %} <bolt-text> This is text. </bolt-text> {% endfilter %}

toc docs

Table of Contents

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-toc/toc.twig' with {
  header: 'This is the header',
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Table of Contents
Prop Name Description Type Default Value Option(s)
attributes

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

object
sticky

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

boolean
scrollOffsetSelector

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

string
scrollOffset

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

integer
variant

Set the visual variant.

string card
  • transparent or card
items

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

array
  • See below
header

Renders a header for the table of contents.

string
uuid

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

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

Renders the text for the linked item.

string
url

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

string
active

Indicates that the item represents the current section being viewed.

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

toc

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

toc item active variations

Manually Set an Item as Active Any item can be set to active to indicate that the page is anchored to the respective section. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with { items: [ { text: 'Section One', url: '#section-one', }, { text: 'Section Two', url: '#section-two', active: true, }, { text: 'Section Three', url: '#section-three', }, ] } only %}
HTML
<bolt-toc> <bolt-toc-item url="#section-one"> Section One </bolt-toc-item> <bolt-toc-item url="#section-two" active> Section Two </bolt-toc-item> <bolt-toc-item url="#section-three"> Section Three </bolt-toc-item> </bolt-toc>

toc header variations

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

toc variants variations

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

toc use case sticky

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

Section One

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

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

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

Section Two

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

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

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

Section Three

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

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

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

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

tooltip docs

Tooltip

Floating label that briefly describes an element.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-tooltip/tooltip.twig" with {
  trigger: "This is the tooltip trigger",
  content: "This is the tooltip content."
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
trigger *

Renders the trigger of the tooltip.

any
content *

Renders the content of the tooltip. Plain text is preferred because this is supposed to be a simple label. For passing more complex content and actions, please use Popover instead.

any
placement

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

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

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

boolean
uuid

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

string
boundary

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

string
fallbackPlacements

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

array
direction
(deprecated)

This prop is deprecated. Please use placement instead.

any
noWrap
(deprecated)

This prop is deprecated. Please stop using it.

any
spacing
(deprecated)

This prop is deprecated. Please stop using it.

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

tooltip

A tooltip is used to provide descriptive help to the user about the control that the mouse is over. For instance, moving the mouse over this piece of text This is what we call a tooltip. for a second can display a small popup label containing more detailed description. When the mouse is moved again, the tooltip disappears. This is a useful means of providing additional details about a user interface without cluttering up the main interface.

tooltip placement variations

Preferred placement Preferred placement comes with fancy zoom-in transition.
bottom-start Setting up preferred placement by using the placement prop. bottom Setting up preferred placement by using the placement prop. bottom-end Setting up preferred placement by using the placement prop.
left-start Setting up preferred placement by using the placement prop.
left Setting up preferred placement by using the placement prop.
left-end Setting up preferred placement by using the placement prop.
top-start Setting up preferred placement by using the placement prop. top Setting up preferred placement by using the placement prop. top-end Setting up preferred placement by using the placement prop. right-start Setting up preferred placement by using the placement prop. right Setting up preferred placement by using the placement prop. right-end Setting up preferred placement by using the placement prop.
Auto placement Auto placement only comes with fade-in transition. CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management
CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management CRM Customer relationship management

tooltip inverted

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

tooltip use case icon

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

tooltip with web component

Web Component Usage Bolt Tooltip is a web component, you can simply use <bolt-tooltip> in the markup to make it render.
CRM Customer relationship management
<bolt-tooltip> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>
Prop Usage Configure the tooltip with the properties specified in the schema.
CRM Customer relationship management
<bolt-tooltip placement="top" uuid="target-this-unique-id"> CRM <span slot="content">Customer relationship management</span> </bolt-tooltip>
Advanced Usage Any element can be passed as the trigger.
File size: 25MB
<bolt-tooltip> <button type="button" class="e-bolt-button"> Download </button> <span slot="content">File size: 25MB</span> </bolt-tooltip>

trigger docs

Bolt Trigger

An call to action with no styles.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-trigger/trigger.twig" with {
  content: "This is a trigger"
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the trigger (Twig only).

string , array , object
url

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

string
target

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

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

Determines the button tag type for semantic buttons

string button
  • button , submit , reset
cursor

Type of cursor shown on hover.

string pointer
  • auto , pointer , zoom-in , zoom-out
on_click

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

string
on_click_target

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

string
onClick
(deprecated)

Use on_click instead.

onClickTarget
(deprecated)

Use on_click_target instead.

display

Set the display property

string inline
  • inline or block
no_outline

Turn off the default outline on focus

boolean false
disabled

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

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

trigger

trigger tag variations

Trigger with a tag

trigger cursor variations

trigger display variations

trigger outline variations

This <a> has no outline on focus

trigger disabled variations

This <a> is disabled

trigger advanced usage

Trigger Image

Click on the thumbnail to open a modal with an enlarged image.

trigger with web component

Web Component Usage Bolt Trigger is a web component. You can use it by simply including the <bolt-trigger> element in the markup.
This is a trigger
<bolt-trigger onclick="alert('Trigger clicked')"> This is a trigger </bolt-trigger>
Basic Usage By default Bolt Trigger renders a semantic button tag. Set the url prop to render a semantic a tag.
This is a trigger
<bolt-trigger url="http://pega.com"> This is a trigger </bolt-trigger>
Additional Options Customize the cursor style by setting the cursor prop.
This is a trigger
<bolt-trigger cursor="zoom-in"> This is a trigger </bolt-trigger>
Advanced Usage Use the on-click and on-click-target props to call a method on another component. See schema for more info.
<bolt-trigger on-click="show" on-click-target="js-image-modal-456" cursor="zoom-in" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="640/480"></bolt-image> </bolt-trigger> <bolt-modal class="js-image-modal-456" spacing="none" theme="none" scroll="overall"> <bolt-trigger on-click="hide" on-click-target="js-image-modal-456" cursor="zoom-out" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" sizes="auto" ratio="640/480"></bolt-image> </bolt-trigger> </bolt-modal>

typeahead docs

Bolt Typeahead

Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-typeahead/typeahead.twig" %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
max_results

The maximum number of typeahead results to display

number 10
items

An array of objects that's used to populate the suggestion list that appears below the input as the users type. This array of objects can be asynchronously fetched and should contain a label, url, and optionally description.

array
clear_input_text

Screenreader-specific text for the clear search button, intended to provide a longer, more descriptive explanation of the clear button's behavior.

string Clear search results
submit_button_text

Screenreader-specific text for the submit button, intended to provide a longer, more descriptive explanation of the submit button's behavior.

string Submit 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
disabled

Disables input as well as the search and cancel buttons.

boolean false
Install Install
  npm install @bolt/components-typeahead
Dependencies @bolt/components-button @bolt/components-form @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue fuse.js mousetrap react-autosuggest react-html-parser

Demo: Dyamically Fetch Data

In this example, we populate the Typeahead component with JSON data that's dynamically fetched from an external source via the getSuggestions hook.

Also, this demo caps the max # of search results to display at 5.


{% include "@bolt-components-form/form.twig" with {
  children: include("@bolt-components-typeahead/typeahead.twig", {
    attributes: {
      class: [
        "js-typeahead-hook--dynamically-fetch-data"
      ]
    },
    max_results: 5,
    input_name: "q"
  }),
  attributes: {
    action: "https://www.pega.com/search",
    target: "_blank",
    method: "GET"
  }
} %}

// NOTE: make sure you're running this code through a tool like Babel before shipping for cross browser compatibility!
const dynamicTypeaheadDemo = document.querySelector(
  '.js-typeahead-hook--dynamically-fetch-data',
);

const setupEventHandlers = () => {
  // note: make sure to let Typeahead know when the data fetched is ready
  dynamicTypeaheadDemo.on('getSuggestions', async value => {
    return await new Promise(async resolve => {
      await fetch('/build/data/typeahead.data.json')
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          return resolve(data);
        });
    });
  });

  dynamicTypeaheadDemo.on('onSelected', (element, event, suggestion) => {
    const exactMatch = element.items.filter(
      item => item.label === suggestion.suggestionValue,
    )[0];

    function navigateTo(url) {
      if (window.location !== window.parent.location) {
        const win = window.open(url, '_blank');
        win.focus();
      } else {
        window.location = url;
      }
    }

    if (exactMatch && exactMatch.url) {
      if (exactMatch.url) {
        navigateTo(exactMatch.url);
      } else {
        navigateTo(`https://www.pega.com/search?q=${itemSelected.label}`);
      }
    } else if (suggestion.suggestionValue !== '') {
      navigateTo(`https://www.pega.com/search?q=${suggestion.suggestionValue}`);
    }
  });
};

if (dynamicTypeaheadDemo) {
  if (dynamicTypeaheadDemo._wasInitiallyRendered) {
    setupEventHandlers();
  }

  dynamicTypeaheadDemo.addEventListener('ready', e => {
    if (e.detail.name === 'bolt-typeahead') {
      setupEventHandlers();
    }
  });
}

In this example, we populate the Typeahead component with a small batch of results and customize the onSelected behavior to go directly to the result selected (vs the search results page) for exact matches.

Submitting the form with text that isn't a 1:1 match will fall back to the search results page (the behavior shown in the other demo).


{% include "@bolt-components-form/form.twig" with {
  children: include("@bolt-components-typeahead/typeahead.twig", {
    attributes: {
      class: [
        "js-typeahead-hook--exact-result"
      ]
    },
    max_results: 5,
  }),
  attributes: {
    action: "https://www.pega.com/search",
    target: "_blank",
    method: "GET"
  }
} %}

// NOTE: make sure you're running this code through a tool like Babel before shipping for cross browser compatibility!
const typeaheadDemo = document.querySelector(
  '.js-typeahead-hook--exact-result',
);

const typeaheadDemoItems = [
  {
    label: 'AI and improving the customer experience',
    description:
      '“Artificial intelligence” (AI) presents both distracting hype and powerful opportunities to drive customer engagement.',
    url: 'https://www.pega.com/ai-and-improving-customer-experience',
  },
  {
    label:
      'Gartner Magic Quadrant for Enterprise Low-Code Application Platforms 2019',
    description:
      'Pega was cited as a Visionary in Gartner’s new 2019 Magic Quadrant for Enterprise Low-Code Application Platforms.',
    url:
      'https://www.pega.com/insights/resources/gartner-magic-quadrant-enterprise-low-code-application-platforms-2019',
  },
];

const setupEventHandlers = () => {
  typeaheadDemo.items = typeaheadDemoItems;

  typeaheadDemo.on('onSelected', (element, event, suggestion) => {
    const exactMatch = element.items.filter(
      item => item.label === suggestion.suggestionValue,
    )[0];

    function navigateTo(url) {
      if (window.location !== window.parent.location) {
        const win = window.open(url, '_blank');
        win.focus();
      } else {
        window.location = url;
      }
    }

    if (exactMatch && exactMatch.url) {
      if (exactMatch.url) {
        navigateTo(exactMatch.url);
      } else {
        navigateTo(`https://www.pega.com/search?q=${itemSelected.label}`);
      }
    } else if (suggestion.suggestionValue !== '') {
      navigateTo(`https://www.pega.com/search?q=${suggestion.suggestionValue}`);
    }
  });
};

if (typeaheadDemo) {
  if (typeaheadDemo._wasInitiallyRendered) {
    setupEventHandlers();
  }

  typeaheadDemo.addEventListener('ready', e => {
    if (e.detail.name === 'bolt-typeahead') {
      setupEventHandlers();
    }
  });
}

In this example, we populate the Typeahead component with a larger batch of results and customize the onSelected behavior to always go to the search results page when selecting an item.

Unlike the other demo, only perfect matches will allow you to submit (via the submit button) or select a result.

For example, manually selecting or entering Case Management in the input field will allow you to submit via hitting enter or clicking on the search icon. However, entering in Case Management2 instead would not submit.


{% include "@bolt-components-form/form.twig" with {
  children: include("@bolt-components-typeahead/typeahead.twig", {
    attributes: {
      class: [
        "js-typeahead-hook"
      ]
    },
    max_results: 5,
  }),
  attributes: {
    action: "https://www.pega.com/search",
    target: "_blank",
    method: "GET"
  }
} %}

// NOTE: make sure you're running this code through a tool like Babel before shipping for cross browser compatibility!
const typeahead = document.querySelector('.js-typeahead-hook');

const items = [
  {
    label: 'AI and improving the customer experience',
    description:
      '“Artificial intelligence” (AI) presents both distracting hype and powerful opportunities to drive customer engagement.',
    url: 'https://www.pega.com/ai-and-improving-customer-experience',
  },
  {
    label:
      'Gartner Magic Quadrant for Enterprise Low-Code Application Platforms 2019',
    description:
      'Pega was cited as a Visionary in Gartner’s new 2019 Magic Quadrant for Enterprise Low-Code Application Platforms.',
    url:
      'https://www.pega.com/insights/resources/gartner-magic-quadrant-enterprise-low-code-application-platforms-2019',
  },
  {
    label: 'Pega Data & Integrations',
    description:
      "Take full advantage of integration opportunities with Pega's open architecture, allowing you to build applications faster and meet the increasing demands of your business.",
    url: 'https://www.pega.com/products/pega-platform/data-integrations',
  },
  {
    label: 'Digital Customer Experiences',
    description:
      'Deliver engaging digital customer experiences anywhere, anytime, with unique designs for your business right out of the box.',
    url:
      'https://www.pega.com/products/pega-platform/digital-customer-experiences',
  },
  {
    label: 'DevOps and Testing',
    description:
      "Continuous integration and deployment. Continuous evolution. With one-click DevOps, you'll break barriers to delivery – and leapfrog competitors – by empowering business teams to…",
    url: 'https://www.pega.com/products/pega-platform/devops-testing',
  },
  {
    label: 'Pega Onboarding',
    description:
      'Intelligent work automation dramatically cuts time to revenue while ensuring compliance with global and local regulations, whether you are onboarding new clients, adding products…',
    url: 'https://www.pega.com/industries/financial-services/onboarding',
  },
  {
    label: 'Case Management',
    description:
      'Pega BPM and case management solutions allow you to build and manage enterprise-level strategic applications that can communicate with legacy systems.',
    url: 'https://www.pega.com/products/pega-platform/case-management',
  },
  {
    label: 'Pega Intelligent Virtual Assistant',
    description:
      "Across all channels, Pega's Intelligent Virtual Assistant engages users where they are and gives them experiences based on context, not just auto-responses.",
    url:
      'https://www.pega.com/products/pega-platform/intelligent-virtual-assistant',
  },
];

const setupEventHandlers = () => {
  typeahead.items = items;
  typeahead.on('onSelected', (element, event, suggestion) => {
    const itemSelected = element.items.filter(
      item => item.label === suggestion.suggestionValue,
    )[0];

    if (itemSelected) {
      if (itemSelected.label) {
        if (window.location !== window.parent.location) {
          // const win = window.open(`${itemSelected.url}`, '_blank');
          const win = window.open(
            `https://www.pega.com/search?q=${itemSelected.label}`,
            '_blank',
          );
          win.focus();
        } else {
          window.location = `https://www.pega.com/search?q=${itemSelected.label}`;
        }
      }
    }
  });
};

if (typeahead) {
  if (typeahead) {
    if (typeahead._wasInitiallyRendered) {
      setupEventHandlers();
    }

    typeahead.addEventListener('ready', e => {
      if (e.detail.name === 'bolt-typeahead') {
        setupEventHandlers();
      }
    });
  }
}

ul docs

Unordered List

Vertical list of bulleted items.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-ul/ul.twig" with {
  items: [
    "Do not include any data or information in your posts that are confidential!",
    "Apply basic practices for collaborative work.",
    "Be honest, respectful, trustworthy and helpful.",
    "Answer questions authoritatively and concisely. Avoid cluttering discussions with noise."
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Unordered List
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
contentItems
(deprecated)

Use the items prop instead.

array
  • See below
items

All items can be simple text or items.

array
  • [items]:
    • Type:string, object, array

      Renderable content (i.e. a string, render array, or included pattern) for a single list item.

Unordered List: items
Prop Name Description Type Default Value Option(s)
text

Item text

string
contentItems

Items pass to @bolt/text.twig

array
Install Install
  npm install @bolt/components-ul
Dependencies @bolt/components-li @bolt/core-v3.x @bolt/lazy-queue

ul

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ul theme variation

Theme: xlight

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: light

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: dark

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

Theme: xdark

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

ul nested items

Do not include any data or information in your posts that are confidential!
Apply basic practices for collaborative work.
Be honest, respectful, trustworthy and helpful.
Level 1
Item 1
Level 2
Item 1
Item 2
Level 3
Item 1
Item 2
Item 3
Level 4
Item 1
Item 2
Item 3
Item 4
Level 5
Item 1
Item 2
Item 3
Item 4
Item 5
Item 5
Item 5
Item 4
Item 5
Item 3
Item 4
Item 5
Avoid cluttering discussions with noise.

ul with web component

Web Component Usage

Bolt Unordered List is a web component, you can simply use <bolt-ul> in the markup to make it render. Its inner content is comprised of <bolt-li>.

Example

<bolt-ul>
  <bolt-li>Item 1</bolt-li>
  <bolt-li>Item 2</bolt-li>
  <bolt-li>Item 3</bolt-li>
  <bolt-li>Item 4</bolt-li>
  <bolt-li>Item 5</bolt-li>
</bolt-ul>

Simple usage

Item 1 Item 2 Item 3 Item 4 Item 5

Nesting of lists (ol and ul)

Coffee Tea Black tea Green tea Good tea Great tea Is the best Milk L1 - Tea L1 - Coffee L2 - Light roast L2 - Dark roast L3 - Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.Answer questions authoritatively and concisely. Avoid cluttering discussions with noise. L4 - Tea L4 - Coffee L5 - Light roast L5 - Dark roast L6 - Italian Roast L6 - Coffee from Italy L5 - Medium roast L4 - Milk L3 - Coffee from Italy L2 - Medium roast L1 - Milk Level 1 - Item 1 Level 1 - Item 2 Level 1 - Item 3 Level 1 - Item 4 Level 2 - Item 1 Level 2 - Item 2 Level 2 - Item 3 Level 3 - Item 1 Level 3 - Item 2 Level 4 - Item 1 Level 5 - Item 1 Level 5 - Item 2 Level 5 - Item 3 Level 5 - Item 4 Level 5 - Item 5 Level 4 - Item 2 Level 4 - Item 3 Level 4 - Item 4 Level 4 - Item 5 Level 3 - Item 3 Level 3 - Item 4 Level 3 - Item 5 Level 2 - Item 4 Level 2 - Item 5 Level 1 - Item 5 Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk Coffee Tea Black tea Green tea Milk Coffee Tea Milk

Theme variations

Theme: xlight

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: light

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: dark

Item 1 Item 2 Item 3 Item 4 Item 5

Theme: xdark

Item 1 Item 2 Item 3 Item 4 Item 5

video docs

Warning! The Video component is deprecated. No new features will not be added to this component. See each page under Video section in the navigation to reference old documentations. For any new instances of a video please use the Drupal integrated Brightcove video component. Consult a Drupal dev and reference the Drupal documentations.

video thumbnail docs

Video Thumbnail

A graphical element that represents a video.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  duration: '4:55',
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content

Content of the video thumbnail. An image pointing to the video poster is recommended.

any
border_radius

Set the border radius of the video thumbnail.

string none
  • none , small , large
aspect_ratio

Set the aspect ratio of the video thumbnail.

string 16:9
  • 1:1 , 16:9 , 4:3
duration

Display the video duration that overlays the video thumbnail.

string
Install Install
  npm install @bolt/components-video-thumbnail
Dependencies @bolt/core-v3.x

video thumbnail

Basic Video Thumbnail A video thumbnail is an image that displays a play icon and other relevant video information such as duration. Important Notes: Video thumbnail is a graphical element, it is not an interactive element. Interactions should be handled via links and buttons. It is commonly used as a trigger for video modals. View use case The content prop accepts both plain <img> element and Bolt Image component. When passing the Bolt Image component, ratio prop must be set to false and cover prop set to true. duration prop is optional while recommended. Demo
A Rock Climber A Rock Climber
Video duration: 4:55
Twig
{% set image %} {% include '@bolt-components-image/image.twig' with { src: '/images/placeholders/tout-4x3-climber.jpg', alt: 'A Rock Climber', ratio: false, cover: true, } only %} {% endset %} {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, duration: '4:55', } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail aspect ratio

Video Thumbnail Aspect Ratio Based on the use case, the aspect ratio of the thumbnail can be changed to fit a particular layout. Availalbe aspect ratios are: 1:1, 4:3, and 16:9. Important Notes: If you do not want the image to get cropped, make sure the source image has the same aspect ratio as the one you are using for the component. Demo
A Rock Climber A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, aspect_ratio: '1:1', duration: '4:55', } only %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Border Radius Border radius can be adjusted per use case. Demo
A Rock Climber A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, duration: '4:55', border_radius: 'large', } only %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Modal Trigger A video thumbnail can be used as the trigger for a video modal. Important Notes: The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail. Demo
Twig
// Set up the trigger {% set video_thumbnail %} {% set image %} {% include '@bolt-components-image/image.twig' with { src: '/images/placeholders/tout-4x3-climber.jpg', alt: 'A Rock Climber', ratio: false, cover: true, } only %} {% endset %} {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, duration: '4:55', } only %} {% endset %} {% include '@bolt-components-trigger/trigger.twig' with { content: video_thumbnail, display: 'block', attributes: { 'data-bolt-modal-target': '#js-modal-target', } } only %} // Set up the modal {% set video %} {% set video_embed %} <video-js data-account='1900410236' data-player='O3FkeBiaDz' data-embed='default' data-video-id='4892122320001' controls class="c-base-video"></video-js> {% endset %} {% include '@bolt-components-ratio/ratio.twig' with { children: video_embed, ratio: '16/9' } only %} {% endset %} {% include '@bolt-components-modal/modal.twig' with { content: video, width: 'optimal', spacing: 'none', scroll: 'overall', attributes: { id: 'js-modal-target', }, } only %}
HTML
Not available in plain HTML. Please use Twig.