accordion docs

Accordion

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

Published Last updated: 5.8.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/core-v3.x @bolt/elements-icon @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.

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.

accordion content variations

Using the grid inside trigger and content

Open Accordion Close Accordion

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

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

Get the presentation Watch video

12:00 PM

Lunch & Networking

Open Accordion Close Accordion

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

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

Get the presentation Watch video
Open Accordion Close Accordion

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

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

Get the presentation Watch video

Pass various components into the content

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

This is a headline

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

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

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.
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: 5.8.0 Change log Github NPM
Twig Usage
{% set icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'icon-name',
  }%}
{% endset %}

{% set shape %}
  {% include '@bolt-elements-shape/shape.twig' with {
    content: icon,
  }%}
{% 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/core-v3.x @bolt/elements-icon

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

Background

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

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      background: true,
      attributes: {
        src: '/images/placeholders/backgrounds/background-light-tall.jpg',
        srcset: '/images/placeholders/backgrounds/background-light-tall-640.jpg 640w, /images/placeholders/backgrounds/background-light-tall-1024.jpg 1024w, /images/placeholders/backgrounds/background-light-tall-1920.jpg 1920w',
        width: 3840,
        height: 2160
      },
    } only %}
  {% endset %}
{% include '@bolt-components-background/background.twig' with {
  opacity: 'heavy',
  fill: 'gradient',
  focal_point: {
    vertical: 'center',
    horizontal: 'center'
  },
  items: [
    image
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
opacity

Overlay opacity

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

Add a Bolt Background Shapes group.

string none
  • A, B, none
shape_alignment

Alignment of shape group.

string right
  • left or right
fill

Type of fill to use for the overlay.

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

Color of the fill to use in the overlay.

string default
  • default, pink, navy, black
focal_point

Where the opacity background should originate.

object
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
items

An array of renderable items to place in the background.

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.

content_items
(deprecated)

Use items instead (each item must be renderable, e.g. a string or render array. Arrays inteded to be rendered with pattern_template() are no longer supported)

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

background

Alt text.

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: alignment of an image can be achieved by passing inline styles to the Image element's attributes objects. Then you can pass the Image element to the Background component via items.

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: 5.8.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: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-band/band.twig' with {
  content: 'This is a band.',
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the band.

string , array , object
pinned_content

Pinned content of the band.

object
    • upper

      Pinned to the upper area of the band.

        • content

          A pinned area can contain 1 or more items.

        • align

          Horizontal alignment of a single item.

          • start, center, end
    • lower

      Pinned to the lower area of the band.

        • content

          A pinned area can contain 1 or more items.

        • align

          Horizontal alignment of a single item.

          • start, center, end
tag

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

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

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

string center
  • start, center, end
size

Controls the vertical spacing of the band.

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

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

boolean true
theme

Controls the theme of the band.

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

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

content_row_start
(deprecated)

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

items
(deprecated)

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

fullBleed
(deprecated)

This prop has been renamed. Please use full_bleed.

contentTag
(deprecated)

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

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

band

This is a band.

band size variations

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

band theme variations

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

band tag variations

Setting the container's HTML tag to: div

This is a band.

Setting the container's HTML tag to: article

This is a band.

Setting the container's HTML tag to: section

This is a band.

Setting the container's HTML tag to: header

This is a band.

Setting the container's HTML tag to: footer

This is a band.

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

This is a band.

band full bleed variations

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

Full bleed

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

This is a band.

Not full bleed

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

This is a band.

band with pinned content

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

upper pinned 1
upper pinned 2
upper pinned 3

This Is a Headline

This Is a Subheadline

lower pinned 1
lower pinned 2
lower pinned 3

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.

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

band collection

alt text

Collection 1

This is a button
alt text

Collection 2

This is a button
alt text

Collection 3

This is a button

banner docs

Banner

A content container that delivers important messages to the user.

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

blockquote docs

Blockquote

Pullquote layout with author info.

Published Last updated: 5.8.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/square.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/square.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/square.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: 5.8.0 Change log Github NPM
Twig Usage
{% set item_home %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Home',
    attributes: {
      href: '#!'
    }
  } only %}
{% endset %}
{% set item_landing %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Landing Page',
    attributes: {
      href: '#!'
    }
  } only %}
{% endset %}
{% set item_sub %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Sub Page',
    attributes: {
      href: '#!'
    }
  } only %}
{% endset %}
{% set item_current %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Current Page',
    attributes: {
      href: '#!',
      'aria-current': 'page',
    }
  } only %}
{% endset %}
{% include '@bolt-components-breadcrumb/breadcrumb.twig' with {
  items: [
    item_home,
    item_landing,
    item_sub,
    item_current,
  ]
} 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

Breadcrumb pieces.

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

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

contentItems
(deprecated)

Use items instead.

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

breadcrumb

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

breadcrumb use case popover

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

breadcrumb use case band

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Breadcrumb Band Stacking On Top of Featured Band ^

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

Background and Theming

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

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

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

Background and Theming

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

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

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

Background and Theming

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

deprecated button docs

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

deprecated button group docs

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

card replacement docs

Card Replacement

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

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
// Standard card-replacement
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'alt text',
      src: '/images/placeholders/backgrounds/background-light2.jpg',
      loading: 'lazy',

    },
  } only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
  media: {
    image: image,
  },
  body: {
    eyebrow: 'This is an eyebrow',
    headline: 'This is a headline',
    paragraph: 'This is a paragraph.',
  },
  actions: [
    {
      text: 'This is a button',
      url: 'https://google.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
    • image

      Refer to the Image Element schema options

    • video

      Pass in Brightcove video markup.

    • content

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

    • attributes

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

body

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

object
    • eyebrow

      Regular eyebrow.

    • headline

      Headline pre-defined to size large.

    • paragraph

      Regular paragraph of text.

    • content

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

    • attributes

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

actions

Actions section of the card-replacement, accepts buttons.

array
  • See below
content

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

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

Action link text.

string
url

Action link url.

string
external

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

boolean
icon

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

string
attributes

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

object
Advanced Schema Options
raised

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

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

Card - Basic Example

Image alt text

This is an eyebrow

This is a headline

This is a paragraph.

This is a button

Card - Horizontal

Default horizontal card When creating a horizontal card by setting the horizontal prop to true remember to set height prop to auto. The image you pass for card media should also have its background prop set to true in order to allow the image to be cropped and display properly.
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: 'path/image.jpg',
    },
  } only %}
{% endset %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
  horizontal: true,
  height: 'auto',
  media: {
    image: image,
  },
  ...
} only %}
Image alt text

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 text

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 text

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 text

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 text

This card's media is 50% wide

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

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

This card's media is 80px wide

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

Visit the Pega website
Image alt

This card's media is 150px wide

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

Visit the Pega website
Image alt

This card's media is 25% wide

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

Visit the Pega website
Image alt

This card's media is 50% wide

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

Image alt text

This is an eyebrow

This card's `action` is an internal link

This is a paragraph.

This is an internal button
Image alt text

This is an eyebrow

This card's `action` is an external link

This is a paragraph.

This is an external button
Image alt text

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 text

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 text

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

Card - Theme Colors

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

Card - Height Options

Image alt text

This card has auto height.

This is a button
Image alt text

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 text

This card also has full height.

This is a button

Card - Video Example

Video Thumbnail with action play

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video play button and the card's action button will play/pause the video.

Video Thumbnail without action play

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video's play button will play/pause the video.

Go to google.com

Video Thumbnail with whole card clickablity

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video and the card's action button will play/pause the video and the whole card clickability will go to a URL path.

Video Thumbnail triggered by whole card clickablity

The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card's media.video prop. The video will play/pause when the whole card is clicked

Card - Freeform Content

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

A Rock Climber

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

Passing free-form content for the entire card

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.

This is a button Verylongunbrokenword

This is an eyebrow

This is a headline

This is a paragraph.


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

Eyebrow

Eyebrow

Eyebrow

Image alt text

This is an eyebrow

This is a headline.

This is body text.

This is a button

Card - Border Radius

Image alt text

This card has large border radius

This is a paragraph.

This is a button
Image alt text

This card has large border radius

This is a paragraph.

This is a button

Card - Spacing

Image alt text

This card has small spacing

This is a paragraph.

This is a button
Image alt text

This card has medium spacing

This is a paragraph.

This is a button

Card - Web Component Usage

card-replacement-media. This is an eyebrow This is a headline This is a paragraph. Internal link External link Download Icon No Icon 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>.
<bolt-card-replacement>
  <bolt-card-replacement-media>
    <img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-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="!#">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">Download Icon <span slot="icon"><svg  class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><g fill="#151619" fill-rule="evenodd" clip-rule="evenodd"><path d="M28.1 28.6H3.9c-.9 0-1.7.8-1.7 1.7S3 32 3.9 32h24.3c.9 0 1.7-.8 1.7-1.7-.1-.9-.8-1.7-1.8-1.7M15 25.5c.2.3.6.5 1 .5s.8-.2 1-.5l9.1-10.9c.3-.4.4-.9.1-1.3-.2-.4-.7-.7-1.2-.7h-4.4V0h-9.1v12.7H6.9c-.5 0-.9.3-1.2.7-.1.2-.1.3-.1.5 0 .3.1.5.3.7z"/></g></svg></span></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.
<bolt-card-replacement url="https://google.com" url-text="Go to google.com">
  <bolt-card-replacement-media>
    <img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-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.
<bolt-card-replacement>
  <bolt-card-replacement-link custom-attribute="foo" html-attribute="bar">
    <a href="https://google.com" target="_blank" rel="noopener">Go to google.com</a>
  </bolt-card-replacement-link>
  <bolt-card-replacement-media>
    <img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-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.
<bolt-card-replacement url="https://google.com">
  <bolt-card-replacement-media>
    <div class="e-bolt-ratio e-bolt-ratio--wide">
      <video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="3974147489001" controls class="c-base-video"></video-js>
    </div>
  </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" rel="noopener" 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="!#">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">Download Icon <span slot="icon"><svg  class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><g fill="#151619" fill-rule="evenodd" clip-rule="evenodd"><path d="M28.1 28.6H3.9c-.9 0-1.7.8-1.7 1.7S3 32 3.9 32h24.3c.9 0 1.7-.8 1.7-1.7-.1-.9-.8-1.7-1.8-1.7M15 25.5c.2.3.6.5 1 .5s.8-.2 1-.5l9.1-10.9c.3-.4.4-.9.1-1.3-.2-.4-.7-.7-1.2-.7h-4.4V0h-9.1v12.7H6.9c-.5 0-.9.3-1.2.7-.1.2-.1.3-.1.5 0 .3.1.5.3.7z"/></g></svg></span></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: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a chip',
  url: 'https://google.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 auto
  • auto, 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 Element @bolt-elements-icon plus an additional 'position' parameter that determines placement within the button.

object
rel

Set to noopener, if a link is external.

string
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/core-v3.x @bolt/elements-icon @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://google.com',
  target: '_blank',
  rel: 'noopener'
} only %}
HTML
<bolt-chip url="https://google.com" target="_blank" rel="noopener">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><span slot="before"><!-- Icon or image markup --></span>Chip with icon</bolt-chip>

// Icon-only chip
<bolt-chip icon-only><span slot="before"><!-- Icon or image markup --></span>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 color is null or set to auto, the default design has a semi-transparent background that works across all color themes; when color is set to a specific color, the chip will always render in that color. 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 a navy colored chip against a navy background. Demo Status Colors Error Warning Success Selective Brand Colors auto 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: 5.8.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 @bolt/elements-icon

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 that displays syntax-highlighted code with support for several programming languages.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% set code_snippet %}
<h1>Hello world!</h1>
<p>This is a code snippet.</p>
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'html',
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Content of the code snippet.

any
lang

Code language of the content. Each language comes with its unique syntax highlights.

string none
  • none, markup, html, xml, svg, mathml, ssml, atom, rss, javascript, js, clike, css, scss, twig, java, json, rest, bash, shell, csv, docker, dockerfile, http, jsx, tsx, md, markdown, yml, yaml
custom_lang_label

Custom language label. Only use this if the actual language label is not desired.

any
mode

Toggle between light and dark syntax highlights, or turn it off. This works independently of Bolt color themes.

string light
  • light, dark, none
hide_copy

Hide copy to clipboard from the code snippet header.

boolean
hide_lang_label

Hide the language label from the code snippet header.

boolean
Install Install
npm install @bolt/components-code-snippet
Dependencies @bolt/core-v3.x @bolt/elements-icon clipboard prismjs

code snippet

Basic Code Snippet Code Snippet displays a block of syntax highlighted code with support for several programming languages. See schema for all language options. Important Notes: The component is only intended for code blocks. If you need to display code inline, simply use the HTML <code> element. Use Twig whenever possible, but if you must use HTML, be sure to do the following to work with standard HTML behaviors: Trim leading and trailing whitespace inside the <code> element to remove any undesired indents or whitespace. Certain special characters (such as &, <, and >) must be converted to HTML entities. Demo
Light
import { props } from '@bolt/core-v3.x/utils';
Dark
import { props } from '@bolt/core-v3.x/utils';
Twig
{% set code_snippet %}
import { props } from '@bolt/core-v3.x/utils';
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'javascript',
} only %}
HTML
<div class="c-bolt-code-snippet" data-lang="js" data-mode="light">
<pre><code>import { props } from '@bolt/core-v3.x/utils';</code></pre>
</div>

code snippet language

Code Snippet Language The Code Snippet will be syntax highlighted based on the chosen language. Important Notes: Only the languages listed in the schema are supported. Contact the Design System team to request additional language support. Twig Code Snippets must be wrapped in {% verbatim %} tag or they will be parsed as code by Twig. If you are using plain HTML, not the Twig template, you must manually escape HTML and Twig containing HTML or it will be parsed as code by the browser. Demo
.my-css {
  display: block;
}
import { props } from '@bolt/core-v3.x/utils';
<p>Hello World!</p>
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is the banner content.'
} only %}
Twig
{% set css_code %}
.my-css {
  display: block;
}
{% endset %}

{% set js_code %}
import { props } from '@bolt/core-v3.x/utils';
{% endset %}

{% set html_code %}
<p>Hello World!</p>
{% endset %}

{% set twig_code %}
{# Twig does not allow nested verbatim tags, so the required verbatim tag placement for Twig language code snippets is shown in comments below #}
{# verbatim goes here #}
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is the banner content.'
} only %}
{# endverbatim goes here #}
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: css_code,
  lang: 'css',
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: js_code,
  lang: 'js',
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: html_code,
  lang: 'html',
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: twig_code,
  lang: 'twig',
} only %}
HTML
<div class="c-bolt-code-snippet" data-lang="css" data-mode="light">
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

<div class="c-bolt-code-snippet" data-lang="js" data-mode="light">
<pre><code>import { props } from '@bolt/core-v3.x/utils';</code></pre>
</div>

<div class="c-bolt-code-snippet" data-lang="html" data-mode="light">
<pre><code>&lt;p&gt;Hello World!&lt;/p&gt;</code></pre>
</div>

<div class="c-bolt-code-snippet" data-lang="twig" data-mode="light">
<pre><code>{% include &#039;@bolt-components-banner/banner.twig&#039; with {
  content: &#039;This is the banner content.&#039;
} only %}</code></pre>
</div>

code snippet mode

Code Snippet Syntax Highlights Choose from two modes of syntax highlights, light or dark. Important Notes: When using HTML, make sure to use either the [data-mode="light"] or [data-mode="dark"] attribute. Otherwise, there will be no syntax highlighting. Mode works independently of Bolt color themes. Demo
import { props } from '@bolt/core-v3.x/utils';
import { props } from '@bolt/core-v3.x/utils';
Twig
{% set code_snippet %}
import { props } from '@bolt/core-v3.x/utils';
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'javascript',
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'javascript',
  mode: 'dark',
} only %}
HTML
<div class="c-bolt-code-snippet" data-lang="js" data-mode="light">
<pre><code>import { props } from '@bolt/core-v3.x/utils';</code></pre>
</div>
<div class="c-bolt-code-snippet" data-lang="js" data-mode="dark">
<pre><code>import { props } from '@bolt/core-v3.x/utils';</code></pre>
</div>
Code Snippet Custom Language Label Customize the language label shown with your Code Snippet. Important Notes: Pass a custom language label with the custom_lang_label prop or the data-custom-lang-label attribute if using HTML. Only use a custom label if the default label is not desired. Demo
$ echo "Hello World"
Twig
{% set code_snippet %}
$ echo "Hello World"
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'bash',
  custom_lang_label: 'Terminal',
} only %}
HTML
<div class="c-bolt-code-snippet" data-lang="bash" data-mode="light" data-custom-lang-label="Terminal">
<pre><code>$ echo "Hello World"</code></pre>
</div>

code snippet header display

Code Snippet Header Display Language title and copy to clipboard button are shown by default but can be turned off individually. Important Notes: If using Twig, use hide_lang_label and hide_copy props to hide one or both of these Code Snippet header items. If using HTML, use the data-hide-lang-label and data-hide-copy attributes. Demo
.my-css {
  display: block;
}
.my-css {
  display: block;
}
.my-css {
  display: block;
}
Twig
{% set code_snippet %}
.my-css {
  display: block;
}
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_lang_label: true,
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_copy: true,
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_lang_label: true,
  hide_copy: true,
} only %}
HTML
<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-lang-label>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-copy>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-lang-label data-hide-copy>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

content pagination docs

Content Pagination

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

Published Last updated: 5.8.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://google.com',
    },
  },
  previous: {
    content: 'Configuring system settings',
    tooltip_content: 'Previous topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  next: {
    content: 'Configuring user avatar',
    tooltip_content: 'Next topic',
    link_attributes: {
      href: 'https://google.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-tooltip @bolt/core-v3.x @bolt/elements-icon @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://google.com',
    },
  },
  previous: {
    content: 'Configuring system settings',
    tooltip_content: 'Previous topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  next: {
    content: 'Configuring user avatar',
    tooltip_content: 'Next topic',
    link_attributes: {
      href: 'https://google.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: 5.8.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
Install Install
npm install @bolt/components-copy-to-clipboard
Dependencies @bolt/core-v3.x @bolt/elements-icon @bolt/lazy-queue clipboard

copy to clipboard

Custom transition
Custom transition

Custom confirmation

device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% set content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/sample/product-device-screenshot--phone.jpg',
      loading: 'lazy',
    }
  } only %}
{% endset %}

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

Name of the device.

string
  • ipad, iphone8, macbook
color

Device color.

string
  • black, silver, gold
orientation

Device orientation.

string
  • portrait or landscape
content

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

any
Install Install
npm install @bolt/components-device-viewer
Dependencies @bolt/core-v3.x

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

dialog docs

Dialog

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

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{# Render a trigger button #}
{% include '@bolt-elements-button/button.twig' with {
  content: 'Open dialog',
  attributes: {
    type: 'button',
    'data-bolt-dialog-target': '#dialog-1',
  }
} only %}

{# Render the related dialog #}
{% set dialog_content %}
  {% include '@bolt-components-dialog/dialog-header.twig' with {
    content: header_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: body_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: footer_content,
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  attributes: {
    id: 'dialog-1'
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Dialog (dialog.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Renders the dialog content. The dialog-header.twig, dialog-body.twig, and dialog-footer.twig components are expected here.

any
width

Controls the width of the dialog.

string optimal
  • full, regular, optimal, auto
spacing

Controls the inset spacing of the dialog header, body, and footer.

string medium
  • none, small, medium, large
persistent

Enables the dialog to be persistent. This will eliminate ways to close the dialog and it is up to the author to provide a custom link to close the dialog or redirect to another page within the dialog content.

boolean false
transparent

Renders a transparent background for the dialog. Only use this when building an image or video only modal without any text. Do not pass header and footer as text will not be legible with a transparent background.

boolean false
Dialog Header (dialog-header.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the dialog header.

any
Dialog Body (dialog-body.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the dialog body.

any
Dialog Footer (dialog-footer.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Main content of the dialog footer.

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

dialog

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Basic Dialog A dialog can be used to display interactive content over a webpage. The element is generally hidden on page load and becomes visible after interaction with a trigger. Triggers are typically a Button element or Text Link element. Important Notes: This is a replacement for the Modal component. The trigger must be a semantic <button>. To relate a trigger to a specific dialog, add the data-bolt-dialog-target attribute to the trigger and set the value to the <dialog>’s unique id or class name (eg. #dialog-1). There are 3 content areas within a dialog: header, body, and footer. Header and footer are optional, only use them when you need sticky header and footer. Use body for regular dialog content. Each area comes with its own template: dialog-header.twig dialog-body.twig dialog-footer.twig Reference the Dialog schema for all options. Demo

This is a dialog

Esse qui aliqua cupidatat anim duis exercitation aliquip occaecat consectetur cupidatat. Labore nisi pariatur adipisicing minim enim amet consectetur voluptate occaecat ipsum dolore laboris et. Consequat non voluptate excepteur consequat pariatur Lorem est ea. Nisi enim elit quis dolore fugiat officia nulla.
Twig
{# Render a trigger button #}
{% include '@bolt-elements-button/button.twig' with {
  content: 'Open dialog',
  attributes: {
    type: 'button',
    'data-bolt-dialog-target': '#dialog-1',
  }
} only %}

{# Render the related dialog #}
{% set dialog_content %}
  {% include '@bolt-components-dialog/dialog-header.twig' with {
    content: header_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: body_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: footer_content,
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  attributes: {
    id: 'dialog-1'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog width

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Width A width can be explicitly set on a dialog. By default, a dialog is about 75 characters wide. Important Notes: Use the width prop to adjust the dialog’s width. Full: This is taking up the full width of the screen minus the gutters (about 2rem on left and right). Regular: This is 10 out 12 columns wide, about 80% of the screen width. Optimal: This is about 75 characters wide, close to optimal reading length (This is the default setting). Auto: This adapts the width of the dialog content. Only use this option if the dialog content has an explicit width. Recommended for advanced usage. Demo

This is a dialog

This dialog has full width. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores.

This is a dialog

This dialog has regular width. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores.

This is a dialog

This dialog has optimal width. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores.

This is a dialog

This dialog has auto width. It is as wide as the content.
Twig
{% include '@bolt-components-dialog/dialog.twig' with {
  content: content,
  width: 'full',
  attributes: {
    id: 'dialog-width-1'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog spacing

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Spacing The inset spacing of the dialog’s header, body, and footer is adjustable. Important Notes: Use the spacing prop to control the spacing. It can even be set to none to remove all spacing. Reference the Dialog schema for all options. Demo

This is a dialog

The spacing is set to none. Esse qui aliqua cupidatat anim duis exercitation aliquip occaecat consectetur cupidatat. Labore nisi pariatur adipisicing minim enim amet consectetur voluptate occaecat ipsum dolore laboris et. Consequat non voluptate excepteur consequat pariatur Lorem est ea. Nisi enim elit quis dolore fugiat officia nulla.

This is a dialog

The spacing is set to small. Esse qui aliqua cupidatat anim duis exercitation aliquip occaecat consectetur cupidatat. Labore nisi pariatur adipisicing minim enim amet consectetur voluptate occaecat ipsum dolore laboris et. Consequat non voluptate excepteur consequat pariatur Lorem est ea. Nisi enim elit quis dolore fugiat officia nulla.

This is a dialog

The spacing is set to medium. Esse qui aliqua cupidatat anim duis exercitation aliquip occaecat consectetur cupidatat. Labore nisi pariatur adipisicing minim enim amet consectetur voluptate occaecat ipsum dolore laboris et. Consequat non voluptate excepteur consequat pariatur Lorem est ea. Nisi enim elit quis dolore fugiat officia nulla.

This is a dialog

The spacing is set to large. Esse qui aliqua cupidatat anim duis exercitation aliquip occaecat consectetur cupidatat. Labore nisi pariatur adipisicing minim enim amet consectetur voluptate occaecat ipsum dolore laboris et. Consequat non voluptate excepteur consequat pariatur Lorem est ea. Nisi enim elit quis dolore fugiat officia nulla.
Twig
{% include '@bolt-components-dialog/dialog.twig' with {
  content: content,
  spacing: 'large',
  attributes: {
    id: 'dialog-spacing-1'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog persistent

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Persistent Dialog A persistent dialog is useful when creating paywall or subscription-wall. Important Notes: Set the persistent prop to true to make a dialog persistent. When a dialog is persistent the default close button is not shown and clicking anywhere outside the dialog will not close the dialog. A close method is mandatory, make sure to manually add a trigger with the data-dialog-close attribute to close a persistent dialog or a link to navigate to another page in the dialog content. Demo

This is a persistent dialog

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia aliquam distinctio optio debitis ab praesentium, velit magnam aliquid tenetur sequi ipsam maiores porro sapiente eaque. Maiores quibusdam eaque cupiditate placeat?
Twig
{% include '@bolt-components-dialog/dialog.twig' with {
  content: content,
  persistent: true,
  attributes: {
    id: 'dialog-persistent-1'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog transparent

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Transparent Dialog A transparent dialog is recommended when creating image or video only dialogs, and other advanced dialogs. Important Notes: Set the transparent prop to true to make a dialog transparent. When building advanced transparent dialogs, make sure to adjust text color or manually add background color because the dialog has no background at all. See the image only dialog use case. See the video only dialog use case. Demo
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia aliquam distinctio optio debitis ab praesentium, velit magnam aliquid tenetur sequi ipsam maiores porro sapiente eaque. Maiores quibusdam eaque cupiditate placeat?
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'Transparent dialog',
  attributes: {
    type: 'button',
    'data-bolt-dialog-target': '#dialog-transparent',
  }
} only %}

{% set dialog_content %}
  {# Manually set the color theme (text + background color) #}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia aliquam distinctio optio debitis ab praesentium, velit magnam aliquid tenetur sequi ipsam maiores porro sapiente eaque. Maiores quibusdam eaque cupiditate placeat?',
    attributes: {
      class: 't-bolt-yellow',
    },
  } only %}
{% endset %}

{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  transparent: true,
  attributes: {
    id: 'dialog-transparent'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog themes

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Theme A dialog can apply its own color theme that is independent of the page. Important Notes: See the Theming System page for all color themes. Demo

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.

This is a dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque repellendus facere optio error quia animi nulla excepturi quaerat fugiat quam labore necessitatibus architecto praesentium inventore adipisci, maxime natus ut eius.
Twig
{% include '@bolt-components-dialog/dialog.twig' with {
  content: content,
  attributes: {
    class: 't-bolt-navy',
    id: 'dialog-theme-1',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog use case image

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Image Dialog Dialog can be used to display just an image or an image with text caption. Important Notes: When building an image only dialog, set spacing prop to none and transparent prop to true. When building an image dialog with caption, use the footer for the caption text. If width and height are defined on the image, set the dialog’s width prop to auto. This allows the dialog to be as big as the image size. Demo
Alt text.
Alt text.
This is the image caption.
Twig
{# Image only dialog #}
{% set image_dialog_content %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'Alt text.',
        loading: 'lazy',
        width: 640,
        height: 480,
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: image,
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: image_dialog_content,
  spacing: 'none',
  width: 'auto',
  transparent: true,
  attributes: {
    id: 'dialog-image'
  },
} only %}

{# Image + caption dialog #}
{% set caption_dialog_content %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'Alt text.',
        loading: 'lazy',
        width: 640,
        height: 480,
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: image,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: 'This is the image caption.',
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: caption_dialog_content,
  spacing: 'small',
  width: 'auto',
  attributes: {
    id: 'dialog-caption'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog use case video

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Video Dialog can be used to display just an video or an video with text description. Important Notes: When building a video only dialog, set spacing prop to none and transparent prop to true. When building a video dialog with description, use the footer for the description text. To automatically play a Brightcove video when a dialog opens, you must add some specific data-attributes. These attributes delay the video initialization. When these attributes are present, the video will initialize when the dialog opens, automatically begin playing, and pause when the dialog closes: 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) Demo
This is the video description.
Twig
{# Video only dialog #}
{% set image_dialog_content %}
  {% set video %}
    {% set brightcove %}
      <video-js
        data-delayed-account="1900410236"
        data-delayed-player="O3FkeBiaDz"
        data-delayed-video-id="4892122320001"
        data-video-delayed
        data-embed="default"
        controls
        data-media-title
        data-media-duration
        class="c-base-video"></video-js>
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: brightcove,
      ratio: 'wide'
    } only %}
  {% endset %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: video,
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: image_dialog_content,
  spacing: 'none',
  transparent: true,
  attributes: {
    id: 'dialog-video'
  },
} only %}

{# Video + description dialog #}
{% set caption_dialog_content %}
  {% set video %}
    {% set brightcove %}
      <video-js
        data-delayed-account="1900410236"
        data-delayed-player="O3FkeBiaDz"
        data-delayed-video-id="4892122320001"
        data-video-delayed
        data-embed="default"
        controls
        data-media-title
        data-media-duration
        class="c-base-video"></video-js>
    {% endset %}
    {% include '@bolt-elements-ratio/ratio.twig' with {
      content: brightcove,
      ratio: 'wide'
    } only %}
  {% endset %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: video,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: 'This is the video description.',
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: caption_dialog_content,
  spacing: 'small',
  attributes: {
    id: 'dialog-description'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog use case form

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Form Usage A form dialog is best suited for presenting content restriction message or account creation/registration. Important Notes: Utilize all the dialog areas to create the best experience: header, body, and footer. Header and footer can become sticky when the body gets too tall. Render the form inside the body. The <form> element must have an id. Render form controls inside the footer. Each <button> element must have the form attribute set to the id of the <form> element. Demo

Get the Report

(all fields are required)

Twig
{% set header_content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Get the Report',
    size: 'xlarge'
  } only %}
  {% include '@bolt-components-headline/text.twig' with {
    text: '(all fields are required)',
    size: 'small'
  } only %}
{% endset %}

{% set body_content %}
  <form id="form-uuid-123">
    {# form elements #}
  </form>
{% endset %}

{% set footer_content %}
  {% set icon_download %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'download',
    } only %}
  {% endset %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Download Now',
    icon_before: icon_download,
    display: 'block',
    attributes: {
      type: 'submit',
      form: 'form-uuid-123',
    },
  } only %}
{% endset %}

{% set dialog_content %}
  {% include '@bolt-components-dialog/dialog-header.twig' with {
    content: header_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: body_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: footer_content,
  } only %}
{% endset %}

{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  attributes: {
    id: 'dialog-form'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

dialog use case layouts

 Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog with Complex Layouts Layouts and grids can be used within a dialog to create complex design. Important Notes: While this is possible to do, we do not encourage building complex layouts within a dialog. Consider other design patterns before resorting to this. Demo

Achievements

Most Recent Certifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repellat ea? Eius veritatis et velit, sed, vero vitae tenetur blanditiis modi assumenda laboriosam alias. Harum ducimus nam minima error autem.
Zertifizierter Kundenservice-Systemarchitekt
Version 7.2 | Nov 7, 2021
Download certificate
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repellat ea? Eius veritatis et velit, sed, vero vitae tenetur blanditiis modi assumenda laboriosam alias. Harum ducimus nam minima error autem.
Zertifizierter Kundenservice-Systemarchitekt
Version 7.2 | Nov 7, 2021
Download certificate
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repellat ea? Eius veritatis et velit, sed, vero vitae tenetur blanditiis modi assumenda laboriosam alias. Harum ducimus nam minima error autem.
Zertifizierter Kundenservice-Systemarchitekt
Version 7.2 | Nov 7, 2021
Download certificate

Most Recent Badges

Senior System Architect
Version 7.2 | Nov 7, 2021
Senior System Architect
Version 7.2 | Nov 7, 2021
Senior System Architect
Version 7.2 | Nov 7, 2021
Senior System Architect
Version 7.2 | Nov 7, 2021
Twig
{% set layout %}
  {% include '@bolt-layouts-layout/layout.twig' with {
    content: 'Complex layout goes here',
    padding_top: 'medium',
    padding_bottom: 'none',
  } only %}
{% endset %}
{% set footer_content %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'View full profile',
    display: 'block',
    attributes: {
      href: 'https://pega.com',
    },
  } only %}
{% endset %}
{% set dialog_content %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: layout,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: footer_content,
  } only %}
{% endset %}

{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  attributes: {
    id: 'dialog-layout'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

figure docs

Figure

A media container for a complimentary graphic within an article.

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

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

object
media

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

object
    • content

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

caption

Caption for the figure.

string , object , array
Install Install
npm install @bolt/components-figure
Dependencies @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/4x3.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>

floating action buttons docs

Floating Action Buttons

A sticky list container for action buttons.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{# Assemble the button(s) as list item(s) #}
{% set scroll_to_top_button %}
  {% set trigger %}
    {% set icon_chevron_up %}
      {% include '@bolt-components-icon/icon.twig' with {
        name: 'chevron-up',
      } only %}
    {% endset %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Back to top',
      border_radius: 'full',
      icon_only: icon_chevron_up,
      attributes: {
        href: '#top',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    content: 'Back to top',
    placement: 'left',
    trigger: trigger,
  } only %}
{% endset %}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: scroll_to_top_button,
  } only %}
{% endset %}

{# Pass the list items into the list template #}
{% set fab_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: fab_list_items,
  } only %}
{% endset %}

{# Pass the list into the main template #}
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: fab_list,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Floating Action Buttons (floating-action-buttons.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Renders a list of buttons. Use the floating-action-buttons-ul.twig template to render a list.

any
Floating Action Buttons UL (floating-action-buttons-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Renders a list of buttons. Use the floating-action-buttons-li.twig template to render each list item.

any
Floating Action Buttons LI (floating-action-buttons-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Renders a button (icon-only button with tooltip is recommended). Use the Button element or the floating-action-buttons-toggle-button.twig template.

any
children

Renders a list of secondary buttons. Use the floating-action-buttons-ul.twig template to render a list. Only use this prop if the floating-action-buttons-toggle-button.twig template is used for the content prop.

any
show_on_scroll_selector

Select an element (usually a page title) which when scrolled offscreen will show/hide the list-item. Must be a valid CSS selector.

string
Floating Action Buttons Toggle Button (floating-action-buttons-toggle-button.twig)
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 button.

any
hierarchy

Style the button appropriately based on information hierarchy.

string primary
  • primary, secondary, tertiary, transparent
size

Control the font-size and padding of the button.

string medium
  • xsmall, small, medium, large
border_radius

Control the border radius of the button.

string small
  • small, large, full
Install Install
npm install @bolt/components-floating-action-buttons
Dependencies @bolt/core-v3.x

Basic FAB

Basic floating action buttons Floating action buttons (FAB) are a list of fixed positioned buttons placed on the right side of the screen. Important Notes: One or many action buttons can be used. The most common use case is a “back to top” button. Please note that the scroll to top button will not animate properly unless the demo is opened in a new page (outside the pattern-lab wrapper). When using a Button element as FAB, it is recommended to use an icon-only button with tooltip. Set placement of tooltip to left to avoid clashing with other buttons. Demo View full page demo
Twig
{# Assemble the button(s) as list item(s) #}
{% set scroll_to_top_button %}
  {% set trigger %}
    {% set icon_chevron_up %}
      {% include '@bolt-components-icon/icon.twig' with {
        name: 'chevron-up',
      } only %}
    {% endset %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Back to top',
      border_radius: 'full',
      icon_only: icon_chevron_up,
      attributes: {
        href: '#top',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    content: 'Back to top',
    placement: 'left',
    trigger: trigger,
  } only %}
{% endset %}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: scroll_to_top_button,
  } only %}
{% endset %}

{# Pass the list items into the list template #}
{% set fab_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: fab_list_items,
  } only %}
{% endset %}

{# Pass the list into the main template #}
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: fab_list,
} only %}
HTML
Not available in plain HTML. Please use Twig.

Show On Scroll Selector

Show FAB on scroll Each individual floating action button can be shown based on what element on the page has been scrolled past. Important Notes: The show_on_scroll_selector prop accepts CSS selector names (eg. #main-title, .book-name, etc.). The selector indicates the element that must be scrolled past to reveal a floating action button. To avoid animation jump, please only use this on the first item in a FAB (top of the list). Demo View full page demo
Twig
{% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
  content: content,
  show_on_scroll_selector: '#main-title'
} only %}
HTML
Not available in plain HTML. Please use Twig.

Toggle Button

Toggle on/off more buttons A toggle button can toggle on/off a secondary list of action buttons. This specific button comes with the FAB component. Important Notes: The floating-action-buttons-toggle-button.twig template renders the toggle button. The toogle button is recommended if there is a total of more than 3 action buttons. Reference the schema for all options. Demo View full page demo
Twig
{# Set up the toggle button #}
{% set more_button %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-toggle-button.twig' with {
    content: 'More actions',
    border_radius: 'full',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}

{# Set up the children list the button is going to toggle #}
{% set more_actions_list_items %}
  {% set placeholder_button %}
    {% set icon_link %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'external-link',
      } only %}
    {% endset %}
    {% include '@bolt-components-tooltip/tooltip.twig' with {
      content: 'Go to Google',
      placement: 'left',
      trigger: include('@bolt-elements-button/button.twig', {
        content: 'Go to Google',
        size: 'small',
        border_radius: 'full',
        icon_only: icon_link,
        hierarchy: 'secondary',
        attributes: {
          href: 'https://www.google.com',
          rel: 'noopener',
          target: '_blank'
        },
      }),
    } only %}
  {% endset %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
{% endset %}
{% set more_actions_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: more_actions_list_items,
  } only %}
{% endset %}

{# Assemble the toggle button and the children list #}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: more_button,
    children: more_actions_list
  } only %}
{% endset %}

{# Pass the list items into the list template #}
{% set fab_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: fab_list_items,
  } only %}
{% endset %}

{# Pass the list into the main template #}
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: fab_list,
} only %}
HTML
Not available in plain HTML. Please use Twig.

X and Y Offsets

Customize FAB placement with X and Y offsets There are 2 CSS custom properties available for use to further customize the placement of floating action buttons. Important Notes: --c-bolt-floating-action-buttons-offset-x: the distance between the FAB and the right side of the screen. --c-bolt-floating-action-buttons-offset-y: the distance between the FAB and the bottom of the screen. The value can use any CSS unit (px, rem, em, vw, vh, etc.). Demo View full page demo
Twig
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
  attributes: {
    style: '--c-bolt-floating-action-buttons-offset-x: 5vw; --c-bolt-floating-action-buttons-offset-y: 5vh;'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

form docs

Form

A collection of fieldset and inputs.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'First Name',
      displayType: 'floating',
      attributes: {
        for: 'first-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your first name',
        required: true,
        type: 'text',
        id: 'first-name',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Last Name',
      displayType: 'floating',
      attributes: {
        for: 'last-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your last name',
        required: true,
        type: 'text',
        id: 'last-name',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your email',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Title',
      displayType: 'floating',
      attributes: {
        for: 'job-title',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your current job title',
        required: true,
        type: 'text',
        id: 'job-title',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Company Name',
      displayType: 'floating',
      attributes: {
        for: 'company-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter the name of your company',
        required: true,
        type: 'text',
        id: 'company-name',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Country',
      displayType: 'floating',
    } only %}
  {% endset %}

  {% set select %}
    {% include '@bolt-components-form/form-select.twig' with {
      attributes: {
        required: true
      },
      options: [
        {
          type: 'option',
          value: '',
          label: '- Select an Country -',
          attributes: {
            disabled: true
          }
        },
        {
          type: 'option',
          value: 'a',
          label: 'Argentina'
        },
        {
          type: 'option',
          value: 'b',
          label: 'Belgium'
        },
        {
          type: 'option',
          value: 'c',
          label: 'Croatia'
        }
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: select,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Receive periodic emails on key analyst reports, Pega events, and important news.  You can unsubscribe at any time',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-id',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-id',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Download Now',
    width: 'full',
    icon: {
      name: 'download'
    }
  } only %}
{% endset %}

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Get the Report',
  size: 'xlarge'
} only %}
{% include '@bolt-components-headline/text.twig' with {
  text: '(all fields are required)',
  size: 'small'
} only %}
{% 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-headline @bolt/core-v3.x @bolt/elements-button @bolt/elements-icon @bolt/lazy-queue

form element input field

Basic Form Inputs A specific type of form input should be used based on each use case. Important Notes: Each form input can be composed of form-label.twig, form-input.twig, and form-element.twig. To improve accessibility and usability, make sure to include the type attribute for each input. Reference all valid values on this MDN article. All form inputs must have related <label> elements. Required form inputs should have the required attribute. Disabled form inputs should have the disabled attribute. However, this should be used sparingly because disabled inputs are bad for accessibility. To display helper text for a specific form input, use the descriptionText prop in form-element.twig. There are options when it comes to visually displaying labels. Reference the form label positions doc for all options. All inputs must be wrapped with a fieldset using form-fieldset.twig. Multiple fieldsets can be used if it is necessary to group certain form inputs. All form elements must be rendered inside a form using form.twig. Demo

Fieldset Legend

Helper text for this specific form input.
Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text',
          type: 'text',
          id: 'text',
        },
      } only %}
    {% endset %}
    {% set icon_info_circle %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'info-circle',
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
      descriptionText: icon_info_circle ~ '<small>Helper text for this specific form input.</small>',
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'required-text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text (required)',
          type: 'text',
          id: 'required-text',
          required: true,
        },
      } only %}
    {% endset %}
    {% set icon_info_circle %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'info-circle',
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'disabled-text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text (disabled)',
          type: 'text',
          id: 'disabled-text',
          disabled: true,
        },
      } only %}
    {% endset %}
    {% set icon_info_circle %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'info-circle',
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Email input type',
        displayType: 'floating',
        attributes: {
          for: 'email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter email',
          type: 'email',
          id: 'email',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Password input type',
        displayType: 'floating',
        attributes: {
          for: 'password',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter password',
          type: 'password',
          id: 'password',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'URL input type',
        displayType: 'floating',
        attributes: {
          for: 'url',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter URL',
          type: 'url',
          id: 'url',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Telephone input type',
        displayType: 'floating',
        attributes: {
          for: 'tel',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter telephone number',
          type: 'tel',
          id: 'tel',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Fieldset Legend',
    legendInnerAttributes: {
      class: 'u-bolt-visuallyhidden',
    },
    children: fieldset_children,
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form label display

Input Label Display Adjust the display of a particular input label. Important Notes: The displayType prop on form-label.twig determines how an input label is visually displayed. floating will render a floating label, while block will render a block label before the form input. For block labels, it is also needed to set the labelDisplay prop to before on form-element.twig. Demo

Fieldset Legend

Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Floating Label',
        displayType: 'floating',
        attributes: {
          for: 'floating-label',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter value (floating label)',
          type: 'text',
          id: 'floating-label',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: '<strong>Block Label</strong>',
        displayType: 'block',
        attributes: {
          for: 'block-label',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter value (block label)',
          type: 'text',
          id: 'block-label',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
      labelDisplay: 'before',
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Fieldset Legend',
    legendInnerAttributes: {
      class: 'u-bolt-visuallyhidden',
    },
    children: fieldset_children,
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form fieldset

Form Fieldset A fieldset is for grouping one or many form inputs. Important Notes: All inputs must be wrapped with a fieldset using form-fieldset.twig. Multiple fieldsets can be used if it is necessary to group certain form inputs. Each fieldset must have a legend. Use legendTitle to set the legend text; use legendSize to set the legend text size. To visually hide a legend, use legendAttributes to add the class u-bolt-visuallyhidden. This will still allow screen readers to access the legend. Set helper text for a fieldset via the descriptionText prop. Set error messages for a fieldset via the errors prop. Demo

Account Info

Personal Info

This is an error message for this specific fieldset.
Helper text for this specific fieldset.
Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Email input type',
        displayType: 'floating',
        attributes: {
          for: 'email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter email',
          type: 'email',
          id: 'email',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Password input type',
        displayType: 'floating',
        attributes: {
          for: 'password',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter password',
          type: 'password',
          id: 'password',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Account Info',
    children: fieldset_children,
  } only %}

  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text',
          type: 'text',
          id: 'text',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'URL input type',
        displayType: 'floating',
        attributes: {
          for: 'url',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter URL',
          type: 'url',
          id: 'url',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Telephone input type',
        displayType: 'floating',
        attributes: {
          for: 'tel',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter telephone number',
          type: 'tel',
          id: 'tel',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% set icon_info_circle %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'info-circle',
    } only %}
  {% endset %}

  {% set icon_warning %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'warning',
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Personal Info',
    children: fieldset_children,
    descriptionText: icon_info_circle ~ '<small>Helper text for this specific fieldset.</small>',
    errors: icon_warning ~ ' This is an error message for this specific fieldset.'
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.

form radios and checkboxes

Radio and Checkbox Inputs A representation of an input radio fieldset. Important Notes: Set displayType: 'inline-radio' for each label when creating radio inputs. Set displayType: 'inline-checkbox' for each label when creating checkbox inputs. Set input type as radio for radio inputs. Set input type as checkbox for checkbox inputs. Make the label is clickable by adding a for attribute to the label element and an id (with the same name as for attribute) to the radio/checkbox element. Radio and checkbox inputs must be grouped with a fieldset. Demo

Select an alignment

Select toppings

Twig
{% set radios_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Left-aligned',
      displayType: 'inline-radio',
      attributes: {
        for: 'radio-left',
        name: 'radio-alignment'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'radio',
        id: 'radio-left',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Center-aligned',
      displayType: 'inline-radio',
      attributes: {
        for: 'radio-center',
        name: 'radio-alignment'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'radio',
        id: 'radio-center',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Right-aligned',
      displayType: 'inline-radio',
      attributes: {
        for: 'radio-right',
        name: 'radio-alignment'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'radio',
        id: 'radio-right',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}
{% set fieldset_children %}
  {% include '@bolt-components-form/form-radios.twig' with {
    children: radios_children
  } only %}
{% endset %}

{% include '@bolt-components-form/form-fieldset.twig' with {
  legendTitle: 'Select an alignment',
  children: fieldset_children
} only %}

{% set checkbox_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Pepperoni',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-pepperoni',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-pepperoni',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Olives',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-olives',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-olives',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Feta',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-feta',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-feta',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Pineapple',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-pineapple',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-pineapple',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}
{% set fieldset_children %}
  {% include '@bolt-components-form/form-checkboxes.twig' with {
      children: checkbox_children
    } only %}
{% endset %}

{% include '@bolt-components-form/form-fieldset.twig' with {
  legendTitle: 'Select toppings',
  children: fieldset_children,
} only %}
HTML
Not available in plain HTML. Please use Twig.

form select

Select Select inputs are for choosing a single option from a list. Important Notes: Add select options as an array to the form-select.twig include statement. Rememeber to set type as an option and add label and value attributes to each of the options. Select elements do not have placeholder text, to create one, use an <option> element with empty value, then use the option label as the placeholder text (eg. “- Select an option -”). Demo
Twig
{% set label %}
  {% include '@bolt-components-form/form-label.twig' with {
    title: 'Select',
    displayType: 'floating',
  } only %}
{% endset %}
{% set select %}
  {% include '@bolt-components-form/form-select.twig' with {
    options: [
      {
        type: 'option',
        value: '',
        label: '- Select an option -'
      },
      {
        type: 'option',
        value: 'option-a',
        label: 'Option A'
      },
      {
        type: 'option',
        value: 'option-b',
        label: 'Option B'
      }
    ]
  } only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
  label: label,
  children: select,
} only %}
HTML
Not available in plain HTML. Please use Twig.

form textarea

Textarea Textarea is used for long form text input. Important Notes: Use form-textarea.twig include statement. Add the attributes you need, for example a placeholder or required. Demo
Twig
{% set label %}
  {% include '@bolt-components-form/form-label.twig' with {
    title: 'Describe the job',
    displayType: 'floating',
  } only %}
{% endset %}
{% set textarea %}
  {% include '@bolt-components-form/form-textarea.twig' with {
    attributes: {
      placeholder: 'Describe the job'
    }
  } only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
  label: label,
  children: textarea,
} only %}
HTML
Not available in plain HTML. Please use Twig.

form input auto format

Auto Format Inputs Input fields with autoformatting. Important Notes:

Add proper data-bolt-format-input to the form-input.twig attributes object in order to autoformat a given value into input field. For example:

'data-bolt-format-input': 'percent' for percentage autoformatting. 'data-bolt-format-input': 'currency-us' for dollar autoformatting. 'data-bolt-format-input': 'currency-ja' for yen autoformatting. 'data-bolt-format-input': 'number' for number autoformatting.
Demo
Twig
{% set form_children %}
  {% set for_value = 'percent' %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Example of percent auto formatting (add attribute \'data-bolt-format-input="percent"\')',
        attributes: {
          for: for_value
        },
        displayType: 'block'
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'E.g. 10',
          required: true,
          type: 'number',
          id: for_value,
          'data-bolt-format-input': 'percent',
          min: 0,
          max: 100
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      labelDisplay: 'before',
      label: label,
      children: input
    } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Campaign Landing Page An existing example from Campaign Landing Pages. Demo

Get the Report

(all fields are required)

Get the Report

(all fields are required)

Twig
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'First Name',
      displayType: 'floating',
      attributes: {
        for: 'first-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your first name',
        required: true,
        type: 'text',
        id: 'first-name',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Last Name',
      displayType: 'floating',
      attributes: {
        for: 'last-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your last name',
        required: true,
        type: 'text',
        id: 'last-name',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
  
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your email',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Title',
      displayType: 'floating',
      attributes: {
        for: 'job-title',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter your current job title',
        required: true,
        type: 'text',
        id: 'job-title',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Company Name',
      displayType: 'floating',
      attributes: {
        for: 'company-name',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter the name of your company',
        required: true,
        type: 'text',
        id: 'company-name',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Country',
      displayType: 'floating',
    } only %}
  {% endset %}

  {% set select %}
    {% include '@bolt-components-form/form-select.twig' with {
      attributes: {
        required: true
      },
      options: [
        {
          type: 'option',
          value: '',
          label: '- Select an Country -',
          attributes: {
            disabled: true
          }
        },
        {
          type: 'option',
          value: 'a',
          label: 'Argentina'
        },
        {
          type: 'option',
          value: 'b',
          label: 'Belgium'
        },
        {
          type: 'option',
          value: 'c',
          label: 'Croatia'
        }
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: select,
  } only %}

  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Receive periodic emails on key analyst reports, Pega events, and important news.  You can unsubscribe at any time',
      displayType: 'inline-checkbox',
      attributes: {
        for: 'checkbox-id',
        name: 'checkbox-name'
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        type: 'checkbox',
        id: 'checkbox-id',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}

  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Download Now',
    width: 'full',
    icon: {
      name: 'download'
    }
  } only %}
{% endset %}

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Get the Report',
  size: 'xlarge'
} only %}
{% include '@bolt-components-headline/text.twig' with {
  text: '(all fields are required)',
  size: 'small'
} only %}
{% include '@bolt-components-form/form.twig' with {
  children: form_children
} only  %}
HTML
Not available in plain HTML. Please use Twig.

form use case inline inputs

Use Case: Inline Inputs An example of a inline inputs. Important Notes: 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. 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. Demo Inline inputs: auto width
Inline inputs: flexible width
Twig
{% set form_children %}
  {% set label %}
    {% include '@bolt-components-form/form-label.twig' with {
      title: 'Email Address',
      displayType: 'floating',
      attributes: {
        for: 'email-address',
      },
    } only %}
  {% endset %}
  {% set input %}
    {% include '@bolt-components-form/form-input.twig' with {
      attributes: {
        placeholder: 'Enter email address',
        required: true,
        type: 'email',
        id: 'email-address',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-form/form-element.twig' with {
    label: label,
    children: input,
  } only %}
{% endset %}

{% set submit_button %}
  {% include '@bolt-components-form/form-button.twig' with {
    text: 'Sign Up Now',
    type: 'submit'
  } only %}
{% endset %}

{% include '@bolt-components-list/list.twig' with {
  display: 'inline',
  spacing: 'xsmall',
  align: 'start',
  valign: 'start',
  items: [
    form_children,
    submit_button
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Multiple Columns Use the grid to create multi-column form layouts. Demo View full page demo
Twig
{% set form_children %}
  {% set category_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Category',
        displayType: 'floating',
        attributes: {
          for: 'category',
        },
      } only %}
    {% endset %}
    {% set select %}
      {% include '@bolt-components-form/form-select.twig' with {
        options: [
          {
            type: 'option',
            value: '',
            label: '- Select a category -',
          },
          {
            type: 'option',
            value: 'option-a',
            label: 'Option A'
          },
          {
            type: 'option',
            value: 'option-b',
            label: 'Option B'
          }
        ],
        attributes: {
          id: 'category',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: select,
    } only %}
  {% endset %}
  {% set first_name_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'First name',
        displayType: 'floating',
        attributes: {
          for: 'first-name',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter first name',
          type: 'text',
          id: 'first-name',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set last_name_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Last name',
        displayType: 'floating',
        attributes: {
          for: 'last-name',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter last name',
          type: 'text',
          id: 'last-name',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set work_email_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Work email',
        displayType: 'floating',
        attributes: {
          for: 'work-email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter work email',
          type: 'email',
          id: 'work-email',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set phone_number_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Phone number',
        displayType: 'floating',
        attributes: {
          for: 'phone-number',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter phone number',
          type: 'tel',
          id: 'phone-number',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set country_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Country',
        displayType: 'floating',
        attributes: {
          for: 'country',
        },
      } only %}
    {% endset %}
    {% set select %}
      {% include '@bolt-components-form/form-select.twig' with {
        options: [
          {
            type: 'option',
            value: '',
            label: '- Select a country -',
          },
          {
            type: 'option',
            value: 'option-a',
            label: 'Option A'
          },
          {
            type: 'option',
            value: 'option-b',
            label: 'Option B'
          }
        ],
        attributes: {
          id: 'country',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: select,
    } only %}
  {% endset %}
  {% set message_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Message',
        displayType: 'floating',
        attributes: {
          for: 'message',
        },
      } only %}
    {% endset %}
    {% set textarea %}
      {% include '@bolt-components-form/form-textarea.twig' with {
        attributes: {
          placeholder: 'Enter a message',
          rows: 5,
          required: true,
          id: 'message',
        }
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: textarea,
    } only %}
  {% endset %}
  {% set agreement_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        displayType: 'inline-checkbox',
        attributes: {
          for: 'agreement',
          name: 'agreement',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          type: 'checkbox',
          id: 'agreement',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set submit_button %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Send',
      display: 'block',
      attributes: {
        type: 'submit'
      },
    } only %}
  {% endset %}


  {% include '@bolt-components-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '12',
        content: category_input,
      },
      {
        column_start: '1',
        column_span: '12 6@small',
        content: first_name_input,
      },
      {
        column_start: '1 7@small',
        column_span: '12 6@small',
        content: last_name_input,
      },
      {
        column_start: '1',
        column_span: '12 6@small',
        content: work_email_input,
      },
      {
        column_start: '1 7@small',
        column_span: '12 6@small',
        content: phone_number_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: country_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: message_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: agreement_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: submit_button,
      },
    ]
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children,
} only %}
HTML
Not available in plain HTML. Please use Twig.

grid docs

Grid

A flexible 12-column grid with responsive breakpoint options.

Published Last updated: 5.8.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.
Grid (grid.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
gutter

Spacing between the columns of the grid.

string medium
  • none, small, medium, large
row_gutter

Spacing between the rows of the grid.

string medium
  • none, small, medium, large
items

Array of grid items to render inside the grid.

array
    • attributes

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

    • content

      Content to render inside each grid item.

    • valign

      Vertical alignment of the grid item itself.

      • start, center, end
    • column_start

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

    • column_span

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

    • row_start

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

    • row_span

      The number of rows the grid item should span across.

Grid Item (grid-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
valign

Vertical alignment of the grid item itself

string auto
  • auto, start, center, end
column_start

The general column the grid item should start on. For example, a with the attributes columns="3" start-column="2" would start on the 2nd column and extend for 3 columns so it would span the 2nd, 3rd and 4th column.

string
column_end

The general column the grid item should stop on. For example, a with the attributes start-column="2" end-column="3" would start on the 2nd column and extend until the 3rd column.

string
column_span

The number of columns the should span across

string
row_start

Specifies a grid item’s start position within the grid row

string auto
row_end

Specifies a grid item’s ending position within the grid row

string auto
row_span

Specifies the number of rows a should span across

string auto
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: 5.8.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-elements-icon or 3) the string 'none' to explicitly remove default icons

object , string , string
quoted

Adds quoted styling to text.

boolean
number_text

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
number_color

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

string
  • teal, navy, orange, violet
numberText
(deprecated)

Use number_text instead.

numberColor
(deprecated)

Use number_color instead.

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

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

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

42 Example numbered headline (w/ number_color)

{% include '@bolt-components-headline/headline.twig' with {
  text: 'Example numbered headline (w/ number_color)',
  number_text: 42,
  number_color: '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)


number_color

By setting the number_color prop to navy, violet, 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 number_color, the current theme's colors will be used instead.

1 Without number_color

2 Without number_color

3 Without number_color

4 Without number_color

deprecated hero docs

Warning! The Hero component is deprecated. No new features will be added to this component. See each page under Components/Hero section in the navigation to reference old documentation. Existing Hero examples can be rebuilt with Layout, reference all use cases under Layout.

deprecated icon docs

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

deprecated image docs

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

image docs

Image

A container for displaying responsive image.

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

info section docs

Info Section

A container for displaying information of a particular section on a profile or page.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-info-section/info-section.twig' with {
  label: {
    content: 'This is an info section',
    tag: 'h2',
  },
  content: 'This is the section 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 parent container.

object
label

Label of the info section.

object
    • content

      Set the label text.

    • tag

      Set the semantic heading level.

      • h1, h2, h3, h4, h5, h6
content

Content of the info section.

any
details_link

Render a link or button that leads to more details.

object
    • attributes

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

    • content

      Set the details link text.

open

Set the info section to open by default. This only applies when the viewport is below the medium breakpoint.

boolean false
Install Install
npm install @bolt/components-info-section
Dependencies @bolt/core-v3.x

info section

Basic Info Section An info section is a disclosure widget that transforms into a simple card container when the viewport is above the medium breakpoint. Important Notes: Use the open prop to set a particular info section to be open by default when the viewport is below the medium breakpoint. If there are multiple info sections, only one can be open at a time. Use the label.content prop to render a label for the section. Use the label.tag prop to set the proper heading level for the section. It defaults to h2. Use the details_link prop if a section has additional information (either on another page or in a modal). Demo

This is an info section

This is the section content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit labore hic officia maiores ut sequi ipsam nihil repudiandae numquam quidem, molestiae amet aliquid sapiente sed odio quo aspernatur mollitia a.
More details about this section.
Twig
{% include '@bolt-components-info-section/info-section.twig' with {
  label: {
    content: 'This is an info section',
    tag: 'h3',
  },
  content: 'This is the section content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit labore hic officia maiores ut sequi ipsam nihil repudiandae numquam quidem, molestiae amet aliquid sapiente sed odio quo aspernatur mollitia a.',
  details_link: {
    label: 'This is the details link',
    attributes: {
      type: 'button',
      'data-bolt-modal-target': '.js-modal-target',
    },
  },
} only %}

{# Optionally create a modal for more details #}
{% include '@bolt-components-modal/modal.twig' with {
  content: 'More details about this section.',
  attributes: {
    class: 'js-modal-target',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

list docs

List

Minimal layout container for displaying a group of items.

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

Item 1 Item 2 Item 3

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

Item 1
Item 2
Item 3

The advantage of using inset spacing style

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

Item 1
Item 2
Item 3

^ This list is inside a colored box.

list align variations

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

Horizontally align inline items: start

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: start

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: start

Item 1
Item 2
Item 3

Horizontally align inline@small items: start

Item 1
Item 2
Item 3

Horizontally align inline@medium items: start

Item 1
Item 2
Item 3

Horizontally align inline items: center

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: center

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: center

Item 1
Item 2
Item 3

Horizontally align inline@small items: center

Item 1
Item 2
Item 3

Horizontally align inline@medium items: center

Item 1
Item 2
Item 3

Horizontally align inline items: end

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: end

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: end

Item 1
Item 2
Item 3

Horizontally align inline@small items: end

Item 1
Item 2
Item 3

Horizontally align inline@medium items: end

Item 1
Item 2
Item 3

Horizontally align inline items: justify

Item 1
Item 2
Item 3

Horizontally align inline@xxsmall items: justify

Item 1
Item 2
Item 3

Horizontally align inline@xsmall items: justify

Item 1
Item 2
Item 3

Horizontally align inline@small items: justify

Item 1
Item 2
Item 3

Horizontally align inline@medium items: justify

Item 1
Item 2
Item 3

list valign variations

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

Vertically align inline items: start

Item 1
Item 2
Item 3

Vertically align inline items: center

Item 1
Item 2
Item 3

Vertically align inline items: end

Item 1
Item 2
Item 3

Vertically align flex items: start

Item 1
Item 2
Item 3

Vertically align flex items: center

Item 1
Item 2
Item 3

Vertically align flex items: end

Item 1
Item 2
Item 3

list tag variations

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

ul

Item 1 Item 2 Item 3

ol

Item 1 Item 2 Item 3

div

Item 1 Item 2 Item 3

span

Item 1 Item 2 Item 3

list nowrap variations

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

Inline list with nowrap

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

Flex list with nowrap

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

list with web component

Web Component Usage Bolt Button is a web component, you can simply use <bolt-list> in the markup to make it render.
Item 1 Item 2 Item 3
<bolt-list>
  <bolt-list-item>Item 1</bolt-list-item>
  <bolt-list-item>Item 2</bolt-list-item>
  <bolt-list-item>Item 3</bolt-list-item>
</bolt-list>
Basic Usage All the props defined in the schema table can be used directly on the <bolt-list> element.
Item 1 Item 2 Item 3
<bolt-list
  display="inline"
  spacing="xsmall"
  separator="dashed"
  align="center"
>
  <bolt-list-item>Item 1</bolt-list-item>
  <bolt-list-item>Item 2</bolt-list-item>
  <bolt-list-item>Item 3</bolt-list-item>
</bolt-list>
Advanced Usage Instead of passing plain text into each item, you may also pass other Bolt components or regular HTML.
<bolt-list display="inline">
  <bolt-list-item>
    <a href="https://google.com" class="e-bolt-text-link">
      Item 1
    </a>
  </bolt-list-item>
  <bolt-list-item>
    <bolt-chip url="https://google.com">
      Item 2
    </bolt-chip>
  </bolt-list-item>
  <bolt-list-item>
    <a href="https://google.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: 5.8.0 Change log Github NPM
Twig Usage
{% set icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    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://google.com'
    },
  },
  meta_items: [
    'Completed August 1, 2019',
    'Last updated July 12, 2019',
  ],
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Listing Teaser (listing-teaser.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
layout

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

string horizontal
  • vertical, horizontal, responsive
gutter

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

string small
  • small, medium, large
signifier

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

any
headline

Render the headline of the listing.

object
    • text

      Renderable text content of the headline.

    • tag

      Set the semantic HTML tag for the headline.

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

      Set the size of the headline.

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

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

subheadline

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

any
eyebrow_items

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

array
meta_items

Render an array of meta data for the listing.

array
status

Set the status of the listing.

object
    • solved

      Mark the listing as solved.

    • solved_label

      Set a custom label for the "solved indicator".

    • locked

      Mark the listing as locked.

    • locked_label

      Set a custom label for the "locked indicator".

    • replies

      Use number_items prop instead.

    • replies_label

      Use number_items prop instead.

    • views

      Use number_items prop instead.

    • views_label

      Use number_items prop instead.

    • number_items

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

action_menu

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

any
share_menu

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

any
custom_menu

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

any
description

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

any
warning

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

any
chip_list

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

object
reply

Render a preview of a reply to the post.

any
callout

Render a callout section to feature important notes.

object
    • attributes

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

    • content

      Render the content of the callout.

variant

Set the style variant of the listing teaser.

string transparent
  • transparent or card
inset_spacing

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

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

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

object
number

Set the number value.

any
label

Set the label text related to the number value.

any
Install Install
npm install @bolt/components-listing-teaser
Dependencies @bolt/components-headline @bolt/components-popover @bolt/core-v3.x @bolt/elements-button @bolt/elements-icon @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
Twig
// Set a signifier variable
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    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://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  status: {
    solved: true,
    locked: true,
  },
  description: 'This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
  warning: 'Warning! This is a warning message.',
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser signifier

Listing Teaser Signifier The signifier is a decorative element that visually represents the content nature of a listing. Important Notes: This is a purely decorative element and is hidden from screen readers. When using an icon as the signifier, a size must be defined. It is recommended to match the size of the headline. When using an image as the signifier, a width must be defined. It is recommended to use 32px in tandem with large headline, and 38px in tandem with xlarge headline. Demo
Twig
// Set a signifier variable
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    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://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
} only %}
HTML
Not available in plain HTML. Please use Twig.

listing teaser headline

Listing Teaser Headline The headline’s size, HTML tag, and link attributes can be customized via props. Important Notes: While any size can be used, large and xlarge are recommended. Based on the structure of a particular page, the proper HTML tag should be defined via the tag prop. When using the link_attributes prop, an <a> element is wrapped around the headline text. The prop allows you to pass common link attributes such as href and target. A subheadline can be created with the subheadline prop. The prop accepts anything, even plain text. An eyebrow can be created with the eyebrow_items prop. The prop accepts an array, each eyebrow item will be separated with a solid seperator. Demo
Twig
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  eyebrow_items: [
    eyebrow_1,
    eyebrow_2,
  ],
  headline: {
    text: 'This listing has an xlarge headline',
    tag: 'h3',
    size: 'xlarge',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  subheadline: 'This is a subheadline',
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
} only %}
HTML
Not available in plain HTML. Please use Twig.
Listing Status, Action Menu, and Share Menu A listing can have various statuses, use the proper prop to mark the relevant status. A popover action menu can be added by using the action_menu prop. Important Notes: The solved and locked status labels can be customized. Use the status.number_items prop to render status numbers. The replies and views props are deprecated. It is recommended to pass the Menu component in the action_menu prop. Additionally use the Menu component’s title prop to create a label for the action menu. It is mandatory to pass the Share component with menu display in the share_menu prop. In addition to the action_menu prop and share_menu prop, a custom menu can be built using the custom_menu prop. When building a custom menu, make sure the menu trigger is not too wide that would squish the listing teaser’s content. Demo
Twig
// Set up variables
{% set demo_action_menu %}
  {% include '@bolt-components-menu/menu.twig' with {
    title: 'More actions',
    items: [
      {
        content: 'Reply',
        icon_before: icon_reply,
      },
      {
        content: 'Favorite',
        icon_before: icon_heart,
      },
      {
        content: 'Subscribe',
        icon_before: icon_eye,
      },
    ]
  } only %}
{% endset %}
{% set demo_share_menu %}
  {% include '@bolt-components-share/share.twig' with {
    display: 'menu',
    size: 'small',
    text: 'Share this listing',
    sources: [
      {
        name: 'facebook',
        attributes: {
          href: 'https://www.facebook.com/sharer/sharer.php?u=https://google.com&amp;src=sdkpreparse'
        }
      },
      {
        name: 'twitter',
        attributes: {
          href: 'https://twitter.com/intent/tweet?url=https://google.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
        }
      },
      {
        name: 'linkedin',
        attributes: {
          href: 'https://www.linkedin.com/shareArticle?url=https://google.com'
        }
      },
      {
        name: 'email',
        attributes: {
          href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
        }
      }
    ],
    copy_to_clipboard: {
      text_to_copy: 'https://google.com'
    },
  } only %}
{% endset %}
{% set number_items %}
  {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with {
    number: '167',
    label: 'Replies',
  } only %}
  {% include '@bolt-components-listing-teaser/listing-teaser-status-number.twig' with {
    number: '6k',
    label: 'Views',
  } only %}
{% endset %}

// Use the variables in the appropriate props
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  headline: {
    text: 'This listing has every status and menu possible',
    tag: 'h3',
    size: 'large',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  meta_items: [
    'Posted 8 hours 15 minutes ago',
    'Last activity: 2 minutes ago',
  ],
  status: {
    solved: true,
    solved_label: 'Completed',
    locked: true,
    locked_label: 'Archived',
    number_items: number_items,
  },
  action_menu: demo_action_menu,
  share_menu: demo_share_menu,
} only %}
HTML
Not available in plain HTML. Please use Twig.
Listing 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

Warning! This is a warning message.

Twig
// Render description and warning
{% set description %}
  {% set more_link %}
    {% set icon_chevron_right %}
      {% include '@bolt-elements-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://google.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&hellip;{{ 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://google.com'
    },
  },
  meta_items: [
    'Posted by <a href="#!" 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-elements-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://google.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://google.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://google.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!
  • 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://google.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-elements-icon/icon.twig' with {
    name: '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://google.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

  • 167 Replies
  • 6k Views
  • Posted by mikemai on Apr 9, 2020
  • Last activity: 8 hours 26 minutes ago
  • Solved
  • Locked
  • 167 Replies
  • 6k Views
Twig
// Set up a particular post
{% set demo_icon %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-chat-question',
    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://google.com'
      },
    },
    meta_items: [
      'Posted by <a href="#!" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mikemai</a> on Apr 9, 2020',
      'Last activity: 8 hours 26 minutes ago',
    ],
    description: description,
    reply: reply,
    status: {
      solved: true,
      locked: true,
      number_items: number_items,
    },
    action_menu: demo_action_menu,
  } only %}
{% endset %}

// Render a list to display posts
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_post,
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.
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://google.com&amp;src=sdkpreparse'
        }
      },
      {
        name: 'twitter',
        attributes: {
          href: 'https://twitter.com/intent/tweet?url=https://google.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
        }
      },
      {
        name: 'linkedin',
        attributes: {
          href: 'https://www.linkedin.com/shareArticle?url=https://google.com'
        }
      },
      {
        name: 'email',
        attributes: {
          href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
        }
      }
    ],
    copy_to_clipboard: {
      text_to_copy: 'https://google.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://google.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
  • 167 Replies
  • 6k 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
  • 167 Replies
  • 6k 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…
  • 167 Replies
  • 6k 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
{% set demo_result %}
  {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
    signifier: signifier,
    layout: 'responsive', // Allow the content to wrap under the signifier when it runs out of space. Used in video listing.
    eyebrow_items: [
      eyebrow_1,
      eyebrow_2,
    ],
    headline: {
      text: 'This is a listing',
      tag: 'h3',
      size: 'xlarge',
      link_attributes: {
        href: 'https://google.com', // Or set type: 'button' for video modals.
      },
    },
    meta_items: [
      meta_item_1,
      meta_item_2,
      meta_item_3,
    ],
    description: description,
    chip_list: chip_list,
    status: {
      solved: true,
      locked: true,
      number_items: number_items,
    },
  } only %}
{% endset %}

// Render a list to display results
{% include '@bolt-components-list/list.twig' with {
  spacing: 'small',
  inset: true,
  separator: 'solid',
  items: [
    demo_result,
    ...
  ],
} only %}
HTML
Not available in plain HTML. Please use Twig.
Use Case: Contact List A list of contact card teasers, each displays a quick summary of a particular person. Important Notes: The custom_menu prop is being used to render a custom popover menu (the more button). The subheadline prop is being used to render the job title. The description prop is being used to render the recent-articles popover. Demo

Mike Mai

Lead Web Architect, Pega Digital IT

Twig
// Set up variables
{% set icon_map %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-map',
  } only %}
{% endset %}
{% set icon_partners %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'partners',
  } only %}
{% endset %}
{% set icon_connection_hierarchy %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-connection-hierarchy',
  } only %}
{% endset %}
{% set more_button %}
  {% set popover_content %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'More actions',
      items: [
        {
          content: 'View in Org Chart',
          icon_before: icon_connection_hierarchy,
        },
        {
          content: 'View on PeopleHub',
          icon_before: icon_partners,
        },
      ]
    } only %}
  {% endset %}
  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'More',
      size: 'xsmall',
      hierarchy: 'tertiary',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_content,
    spacing: 'none',
    placement: 'bottom-end',
  } only %}
{% endset %}
{% set signifier %}
  <img src="/images/placeholders/square.jpg" alt="" width=56 height=56 class="u-bolt-border-radius-full">
{% endset %}

// Pass variables to the component
{% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
  gutter: 'small',
  signifier: signifier,
  layout: 'responsive',
  headline: {
    text: 'Firstname Lastname',
    tag: 'h3',
    size: 'xlarge',
    link_attributes: {
      href: 'https://google.com'
    },
  },
  subheadline: '<p><strong>Lead Web Architect</strong>, Pega Digital IT</p>',
  meta_items: [
    'Phone: <a href="tel:+1(123)-456-7890" class="e-bolt-text-link e-bolt-text-link--reversed-underline">+1(123)-456-7890</a>',
    'Email: <a href="mailto:evgeny.vyatkin@mail.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">mike.mai@mail.com</a>',
    'Location: Cambridge HQ',
    'Pega ID: FLAST',
    'Hired date: May 4, 2018',
  ],
  variant: 'card',
  inset_spacing: 'small',
  custom_menu: more_button,
} only %}
HTML
Not available in plain HTML. Please use Twig.

deprecated logo docs

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

menu docs

Menu

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

Published Last updated: 5.8.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',
        rel: 'noopener',
      },
    },
  ]
} 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
rel

Set to noopener, if a link is external.

string
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-elements-icon/icon.twig' with {
    name: 'facebook-solid',
    size: 'small',
  } only %}
{% endset %}
{% set icon_twitter %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'twitter-solid',
    size: 'small',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-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>
    <span slot="icon-before"><!-- Icon or image markup --></span>
    Share via Facebook
  </bolt-menu-item>
  <bolt-menu-item>
    <span slot="icon-before"><!-- Icon or image markup --></span>
    Share via Twitter
  </bolt-menu-item>
  <bolt-menu-item>
    <span slot="icon-before"><!-- Icon or image markup --></span>
    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: 5.8.2 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

Modal Width Variation The modal container's width can be adjusted by the width prop. The default is set to optimal. Important Notes: The full modal takes up the full width of the screen minus the gutters (about 2rem on left and right). The regular modal is 10 out 12 columns wide, about 80% of the screen width. The optimal modal is about 75 characters wide, close to optimal reading length. The auto modal adjusts to the width of the modal content. In most cases, the user must define a max-width in absolute value (do not use relative value such as %) on the modal content to get the desired results. Recommended for advanced usage. The width prop only applies to viewports equal to or above the small breakpoint (~600px). Advanced usage: use an image that has the width attribute defined (e.g. 640) in tandem with auto width modal will allow the image inside the modal to be responsive but does not stretch beyond the specified width. Demo This is a modal set to full width. This is a modal set to regular width. This is a modal set to optimal width. This is a modal set to auto width. A Rock Climber
Twig
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This is a modal set to full width.',
  width: 'full',
  attributes: {
    class: 'js-bolt-modal--width-full',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

modal spacing variations

Modal Spacing Variation The modal container's spacing can be adjusted by the spacing prop. The default is set to medium. Important Notes: The none prop removes the spacing inside the modal container. The small, medium, and large props add the respective spacing around the modal content. The spacing prop only applies to viewports equal to or above the small breakpoint (~600px). Demo This is a modal set to none spacing. This is a modal set to small spacing. This is a modal set to medium spacing. This is a modal set to large spacing.
Twig
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This is a modal set to small spacing.',
  spacing: 'small',
  attributes: {
    class: 'js-bolt-modal--spacing-small',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

modal theme variations

Modal Theme Options The modal container's coloring theme can be adjusted by the theme prop. The default is set to xlight. Important Notes: The none prop makes the modal container transparent. The xlight, light, dark, and xdark props adds the respective theme to the modal container. The theme prop only applies to viewports equal to or above the small breakpoint (~600px). Demo This is a modal with a transparent background. This is a modal with a xlight theme. This is a modal with a light theme. This is a modal with a dark theme. This is a modal with a xdark theme.
Twig
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This is a modal with a xlight theme.',
  theme: 'xlight',
  attributes: {
    class: 'js-bolt-modal--theme-xlight',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

modal scroll variations

Modal Scroll Options The scrollable area can be adjusted by using the scroll prop. The default is set to container. Important Notes: The overall prop makes the overall viewport area scrollable. The container prop makes the modal container itself scrollable. The scroll prop only applies to viewports equal to or above the small breakpoint (~600px). Demo Tall image Tall image
Twig
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This is a modal set to overall scrolling.',
  scroll: 'overall',
  attributes: {
    class: 'js-bolt-modal--scroll-overall',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

modal trigger variations

Modal Trigger Options Examples of different methods of launching a modal. Important Notes: The Button element is the standard method to trigger a modal. Semantic buttons are mandatory for opening a modal, never use a semantic link element. If a text link is needed as the trigger, use the Text Link element, which has the ability to be set as a semantic button element. If an image thumbnail is needed as the trigger, use the Trigger component to wrap around an Image element. Demo This modal is triggered by a button. A Rock Climber This modal is triggered by a text link.
Twig
{# Button element #}
{% include '@bolt-elements-button/button.twig' with {
  content: 'Button trigger',
  size: 'small',
  attributes: {
    type: 'button',
    'data-bolt-modal-target': '.js-bolt-modal--trigger-button',
  },
} only %}
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This modal is triggered by a button.',
  attributes: {
    class: 'js-bolt-modal--trigger-button'
  },
} only %}

{# Image element and Trigger component #}
{% set trigger_content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9.jpg',
      alt: 'A Rock Climber',
      loading: 'lazy',
      style: 'max-width: 320px',
      width: '640',
      height: '480'
    }
  } only %}
{% endset %}

{% set modal_content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9.jpg',
      alt: 'A Rock Climber',
      width: '640',
      height: '480'
    }
  } only %}
{% endset %}

{% include '@bolt-components-trigger/trigger.twig' with {
  content: trigger_content,
  cursor: 'zoom-in',
  display: 'inline',
  attributes: {
    'data-bolt-modal-target': '.js-bolt-modal--trigger-image',
  },
} only %}

{% include '@bolt-components-modal/modal.twig' with {
  content: modal_content,
  spacing: 'none',
  theme: 'none',
  scroll: 'overall',
  width: 'auto',
  attributes: {
    class: 'js-bolt-modal--trigger-image'
  },
} only %}

{# Text Link element #}
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'Text link trigger',
  attributes: {
    type: 'button',
    'data-bolt-modal-target': '.js-bolt-modal--trigger-link',
  },
} only %}

{% include '@bolt-components-modal/modal.twig' with {
  content: 'This modal is triggered by a text link.',
  attributes: {
    class: 'js-bolt-modal--trigger-link'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

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 the modal inside the modal is bigger than the thumbnail image. Modal width is set to auto and image has width attribute defined.
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 auto and image has width attribute defined.
Image description.

This is the caption for the image.

modal usage video

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

modal usage content

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

This Is a Headline

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

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

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

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

Sign in to view PegaWorld live stream

modal usage persistent

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

Template Instructions

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

Sign in to view restricted content

No thanks! Return to last page

modal usage form

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

Get the report

(all fields are required)

modal with web component

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

navbar docs

Navbar

Layout container that consist of secondary navigation system.

Published Last updated: 5.8.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: 'bullseye'
    },
    link: {
      attributes: {
        href: 'https://google.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 (navbar.twig)
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 ul (navbar-ul.twig)
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 li (navbar-li.twig)
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 element. 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

          Name of Icon

          • add-circle, add-solid, add, agile, app-development, arrow-left, bar-chart-circle, bar-chart, bell-solid, bolt-logo-colored, briefcase, bullseye, calendar, certification, check-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, clock-circle, close-circle, close-solid, close, cloud, co-browse, collaboration, communications, copy-to-clipboard, credit-card, cube, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, dollar-circle, download, email, energy, entertainment, exclamation, external-link, eye-off, eye, face-happy, face-sad, facebook-solid, facebook, filter, financial, flag-solid, full-screen-off, full-screen-on, github, globe-circle, globe, government, grid, heart-solid, heart, hospitality, ideas, industries, info-circle, info-solid, insurance, integration, intelligent-virtual-assistant, interactive, java, knowledgebase, life-sciences, link, linkedin-solid, linkedin, list, lock-solid, lock, manufacturing, map-pin-solid, map-pin, media, menu, meteor, minus-circle, minus-solid, minus, mobility, molecule, more, omni-channel, orbit, partners, pega-announce, pega-book, pega-building-complex, pega-cart, pega-catalyst, pega-chat-question, pega-chat-typing, pega-chat, pega-compass, pega-connection-hierarchy, pega-cosmos, pega-database, pega-disability, pega-download-pdf, pega-handshake, pega-health-shield, pega-hub, pega-instructor, pega-map, pega-mention, pega-network, pega-patterns, pega-people, pega-phone-call, pega-pie-chart, pega-pin, pega-plane, pega-process-fabric, pega-send-submit, pega-setting, pega-shuffle, pega-subtitle, pega-tag, pega-thumbs-up, pega-timer, pega-wifi, pencil, picture, platform, podcast, presentation, print, product-delivery, refresh, reply, reporting, retail, ribbon, robo-auto, rocket, sales-automation, scalability, search, share, speed-dial, star-solid, support, system-admin, text-align-left, transportation, trash, triangle, truck, twitter-solid, twitter, unlock, upload, user-interface, user, video, warning, watch, workforce-intelligence, youtube-solid
        • custom_icon_path

          Full source path to the custom icon.

        • size

          Set icon size. If size is not set, the icon size will default to text size.

          • small, medium, large, xlarge
        • color

          Set the icon color. If color is not set, the icon will default to text color.

          • teal, navy, yellow, orange, 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: 'bullseye'
    },
    link: {
      attributes: {
        href: 'https://google.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.

notifications docs

Notifications

UI element that displays notifications and related user actions.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Notifications (notifications.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
header
object
    • switch_button

      Render a switch button. Usually to toggle viewing read/unread notifications.

    • actions

      Render action buttons.

    • content

      Render custom content for the header. This prop overrides switch_button and actions.

footer
object
    • content

      Render content for the footer.

Notifications Header Action (notifications-header-action.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
icon

Render an icon for the action. Icon element set to medium size is expected here.

any
label

Render a text label for the action.

any
Notifications List (notifications-list.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Render either heading dividers and/or list items.

any
Notifications List Item (notifications-list-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
signifier

Render an icon as a signifier for the notification.

any
site_name

Set the site name that the notification belongs to.

any
timestamp

Set the timestamp of the notification.

any
message
object
    • attributes

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

    • content

      Render content of the notification. Use HTML element to emphasize certain words.

read
boolean false
Notifications List Heading Divider (notifications-list-heading-divider.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Render the text label of the heading.

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

notifications

Basic Notifications Notifications component is for displaying site-wide user notifications, either via a notifications popover or listing page. Important Notes: Each notification message can be set to read or unread. Each notification message can be plain text, semantic link, or semantic button: passing href attribute to message.attributes will create a semantic link; passing type attribute to message.attributes will create a semantic button. Certain words in a notification message can be emphasized using the <em> HTML element. Emphasized text visually looks like a text link. Header usually contains a switch button and couple action buttons, but all can be overriden by using the header.content prop. Demo
Notification settings
Twig
{% set icon_check_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'check-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_announce %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-announce',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_calendar %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'calendar',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_certification %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'certification',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_info_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'info-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_thumbs_up %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-thumbs-up',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_reply %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'reply',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_heart %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'heart',
    size: 'medium',
  } only %}
{% endset %}
{% set header_switch_button %}
  {% include '@bolt-components-switch-button/switch-button.twig' with {
    label: 'Only show unread notifications',
    attributes: {
      class: 'js-target-the-switch-button-container'
    },
  } only %}
{% endset %}
{% set header_actions %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_check_circle,
    label: 'Mark all as read',
    attributes: {
      type: 'button',
    },
  } only %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_pega_setting,
    label: 'Notification settings',
    attributes: {
      href: '#!',
    },
  } only %}
{% endset %}
{% set content %}
  {% set list_content %}
    {% include '@bolt-components-notifications/notifications-list-heading-divider.twig' with {
      content: 'Latest',
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Community',
      timestamp: '5 min ago',
      message: {
        content: 'This is an <em>unread notification</em>.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Collaboration Center',
      timestamp: '10 min ago',
      message: {
        content: 'This is a <em>read notification</em>.',
        attributes: {
          href: '#!',
        },
      },
      read: true,
    } only %}
    {% include '@bolt-components-notifications/notifications-list-heading-divider.twig' with {
      content: 'Recent',
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Docs',
      timestamp: '1 day ago',
      message: {
        content: 'You can make a plain notification without any actions by not passing any message attributes.',
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Academy',
      timestamp: '1 day ago',
      message: {
        content: 'You can create a notification that <em>performs a function</em> by passing <code>type="button"</code> attribute via message attributes.',
        attributes: {
          type: 'button',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Portal',
      timestamp: '2 days ago',
      message: {
        content: 'You can create a <em>linked notification</em> by passing <code>href</code> attribute via message attributes.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Saleshub',
      timestamp: '2 days ago',
      message: {
        content: 'You can <em>emphasize certain words</em> with the <code>em</code> HTML element. Emphasized text visually looks like a text link.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_info_circle,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>info-circle</em> icon for general information.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_calendar,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>calendar</em> icon for event notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_certification,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>certification</em> icon for Academy badge earning notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_pega_thumbs_up,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>pega-thumbs-up</em> icon for like notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_heart,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>heart</em> icon for favorite notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_reply,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>reply</em> icon for reply notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
  {% endset %}

  {% include '@bolt-components-notifications/notifications-list.twig' with {
    content: list_content,
  } only %}
{% endset %}
{% set footer_content %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'View all notifications',
    reversed_underline: true,
    expand_click_target: true,
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: switch_button,
    actions: [
      {
        icon: icon_check_circle,
        label: 'Mark all as read',
        attributes: {
          type: 'button',
        },
      },
      {
        icon: icon_pega_setting,
        label: 'Notification settings',
        attributes: {
          href: '#!',
        },
      },
    ]
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

notifications empty state

Notifications Empty State Pass freeform content instead of notification list to render an empty state. Important Notes: An empty state can happen if there are literally no notifications to show, or all notifications have been read and user toggles to show only unread notifications. A simple empty state message can be passed to the content prop. Empty state means there are no notifications to read, do not render a "mark all as read" action button in such case. Demo
You are all caught up!
Twig
{% set icon_check_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'check-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_face_happy %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'face-happy',
    size: 'medium',
  } only %}
{% endset %}
{% set header_switch_button %}
  {% include '@bolt-components-switch-button/switch-button.twig' with {
    label: 'Only show unread notifications',
    attributes: {
      class: 'js-target-the-switch-button-container'
    },
  } only %}
{% endset %}
{% set header_actions %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_pega_setting,
    label: 'Notification settings',
    attributes: {
      href: '#!',
    },
  } only %}
{% endset %}
{% set content %}
  <div class="u-bolt-padding-top-large u-bolt-padding-right-medium u-bolt-padding-bottom-large u-bolt-padding-left-medium u-bolt-text-align-center">
    <span class="u-bolt-margin-right-small">{{ icon_face_happy }}</span>You are all caught up!
  </div>
{% endset %}
{% set footer_content %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'View all notifications',
    reversed_underline: true,
    expand_click_target: true,
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

ol docs

Ol

Vertical list of numbered items.

Published Last updated: 5.8.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-components-text/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: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-page-header/page-header.twig' with {
  logo: {
    image_src: '/images/content/logos/pega-logo.svg',
    label: 'Pegasystems',
    attributes: {
      href: 'https://google.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 (page-header.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

any
secondary_content

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

any
logo *

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

object
    • attributes

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

    • image_src

      Set the path to the logo image.

    • label

      Set a label (visually hidden) for the logo.

subheadline

Text or other content to display next to the logo.

any
cta

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

any
static

Set the page header to be static instead of sticky.

boolean false
full_width

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

boolean false
Page Header Primary Nav (page-header-primary-nav.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

any
align_site_nav_items

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

string
  • start, center, end
Page Header Search Panel (page-header-search-panel.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

any
Page Header Nav ul (page-header-nav-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

any
category

Indicate which set of navigation this nav ul is rendering.

string
  • site, related-sites, user
popover_position

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

string
  • edge-start or edge-end
wrap_site_nav_items

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

boolean false
Page Header Nav li (page-header-nav-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
link

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

object
    • attributes

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

    • content

      Content of the link.

    • desktop_heading

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

    • signifier_before

      Append an signifier before the link content. Icon element is expected here.

    • signifier_only

      Append an signifier to the link content and visually hide the text. Icon element is expected here. This prop trumps signifier_before.

    • counter

      Display a red dot counter. Only use this when there is a signifier.

children

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

any
content

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

any
current

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

boolean false
full_width

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

boolean false
view_all

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

boolean false
popover

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

boolean false
selected

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

boolean false
flat

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

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

page header

Basic Page Header Page header is the global header that contains the global search, primary navigation, and secondary navigation. Important Notes: Additional CSS custom properties are available to further customize the page header per use case. px, em, and rem unit values are supported in addition to tokens. These properties must be defined at the :root level. --c-bolt-page-header-logo-max-width: At any breakpoint, limit the logo to a specific max-width. This is only effective on long logos, do not use on the plain Pega logo. --c-bolt-page-header-desktop-spacing-y: Above large breakpoint, set the spacing-y (padding top/bottom) of the page header to a specific value. Spacing tokens are recommended. --c-bolt-page-header-desktop-site-nav-link-spacing-x: Above large breakpoint, set the spacing-x (padding left/right) of any primary nav link (top level) to a specific value. Spacing tokens are recommended. --c-bolt-page-header-desktop-primary-nav-link-font-size: Above large breakpoint, set the font-size of any primary nav link (top level) to a specific value. Font-size tokens are recommended. Demo
Pega View
Pega (logged out) View
Academy View
Collaboration Center View
Community View
Documentation View
Partners View
PegaWorld View
SalesHub View
Twig
// Reference each template's schema to learn about each props.

// The main template
{% include '@bolt-components-page-header/page-header.twig' with {
  logo: {
    image_src: '/images/content/logos/pega-logo.svg',
    label: 'Pegasystems',
    attributes: {
      href: 'https://google.com',
    }
  },
  subheadline: 'Subheadline text',
  content: primary_nav_and_search_panel,
  secondary_content: secondary_nav,
  cta: cta_button,
  static: true,
  full_width: true,
} only %}

// Search panel template (pass to main template's content prop)
{% include '@bolt-components-page-header/page-header-search-panel.twig' with {
  content: content,
} only %}

// Primary nav template (pass to main template's content prop)
{% include '@bolt-components-page-header/page-header-primary-nav.twig' with {
  content: content,
  align_site_nav_items: align_site_nav_items,
} 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,
  popover_position: popover_position,
} 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',
    counter: true,
    signifier_before: icon_before,
    signifier_only: icon_only,
    attributes: {
      href: 'https://google.com/products',
    },
  },
  children: children,
  content: content,
  view_all: false,
  full_width: false,
  popover: false,
  flat: false,
  selected: false,
  current: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

pagination docs

Pagination

A navigation system for browsing search results.

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

Placeholder

Placeholder element only used in Pattern Lab demos.

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

profile docs

Profile

UI element that summarizes a particular user.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Profile (profile.twig)
Profile
Prop Name Description Type Default Value Option(s)
attributes

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

object
avatar

Render a custom avatar image.

any
avatar_edit_button

Content of the edit button. profile-avatar-edit-button template is expected here.

any
cover

Render a custom cover image.

any
name

Render a name and/or username for the user.

object
    • content

      Set the text content.

    • tag

      Set the semantic heading level.

      • h1, h2, h3, h4, h5, h6
job_title

Render job title of the user.

any
location

Render location of the user.

any
actions

Render user actions. Icon-only button elements are expected here.

any
chips

Render chips based on user info. Chip components (no Chip List) are expected here.

any
message

Render a message button.

object
    • attributes

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

    • label

      Text label of the message button.

stats

Render stats with text labels.

array
  • See below
full_bleed

Set the profile to expand the full viewport. Use this prop for building a profile header for a particular page.

boolean false
Profile: items
Prop Name Description Type Default Value Option(s)
attributes

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

object
label

Text label of the stat.

any
number

Number of the stat.

any
Profile Avatar Edit Button (profile-avatar-edit-button.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Set the button text.

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

profile

Basic Profile A basic profile summarizes the user information from a particular Pega user. Important Notes: The avatar and cover props expect the Image element or plain HTML image element. The actions prop expects one or many Button elements with icon_only prop. The chips prop expects one or many Chip components. Chip List is not supported. Both the stats and message props accept attributes. If type attribute is passed, it becomse a semantic button. If href attribute is passed, it becomes a semantic link. Otherwise it is just a generic non-interactive element. Never pass both type and href. Optionally, a theme class and a shadow utility class can be added to create a profile card. Demo
First Last
Twig
{% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
  } only %}
{% endset %}
{% set icon_twitter %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'twitter-solid',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'linkedin-solid',
  } only %}
{% endset %}
{% set icon_email %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'email',
  } only %}
{% endset %}
{% set icon_more %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'more',
  } only %}
{% endset %}
{% set icon_pencil %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pencil',
  } only %}
{% endset %}
{% set icon_share %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'share',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
  } only %}
{% endset %}

{% set avatar %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/square.jpg',
      width: 500,
      height: 500,
      alt: 'First Last',
      loading: 'eager',
    },
  } only %}
{% endset %}

{% set cover %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: '/images/content/profiles/promo-shape-1.jpg',
      width: 480,
      height: 480,
      alt: '',
      loading: 'eager',
    },
  } only %}
{% endset %}

{% set actions %}
  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Share profile',
      icon_only: icon_share,
      hierarchy: 'tertiary',
      border_radius: 'full',
      size: 'xsmall',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set popover_menu %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'Share profile',
      items: [
        {
          content: 'Facebook',
          icon_before: icon_facebook,
          url: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse',
          attributes: {
            target: '_blank',
            rel: 'noopener'
          }
        },
        {
          content: 'Twitter',
          icon_before: icon_twitter,
          url: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'LinkedIn',
          icon_before: icon_linkedin,
          url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'Email',
          icon_before: icon_email,
          url: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_menu,
    spacing: 'none',
    placement: 'bottom-end',
    trigger_event: 'hover',
  } only %}

  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'More options',
      icon_only: icon_more,
      hierarchy: 'tertiary',
      border_radius: 'full',
      size: 'xsmall',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set popover_menu %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'More options',
      items: [
        {
          content: 'Edit profile',
          icon_before: icon_pencil,
        },
        {
          content: 'Settings',
          icon_before: icon_pega_setting,
        },
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_menu,
    spacing: 'none',
    placement: 'bottom-end',
    trigger_event: 'hover',
  } only %}
{% endset %}

{% set chips %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Member since 2017',
    size: 'xsmall',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Designer',
    color: 'orange',
    size: 'xsmall',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Available for hire',
    color: 'teal',
    size: 'xsmall',
    border_radius: 'small',
  } only %}
{% endset %}

{% include '@bolt-components-profile/profile.twig' with {
  avatar: avatar,
  cover: cover,
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
  actions: actions,
  chips: chips,
  stats: [
    {
      number: '15',
      label: 'Achievements',
      attributes: {
        href: '#!',
      },
    },
    {
      number: '3k',
      label: 'Contributions',
      attributes: {
        href: '#!',
      },
    },
  ],
  message: {
    label: 'Send message',
    attributes: {
      href: '#!',
    },
  },
  attributes: {
    class: [
      't-bolt-white',
      'u-bolt-shadow-level-20',
    ],
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

profile full bleed

Full Bleed Profile Profile width can expand the full viewport. Important Notes: Use the full_bleed prop for building a profile header for a particular page. While building a profile page, it is recommened to set the semantic heading level of the name to be h1. Use the name.tag prop to set it. See a full page mockup of User Profile. Demo
Send message
Twig
{% set icon_facebook %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'facebook-solid',
  } only %}
{% endset %}
{% set icon_twitter %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'twitter-solid',
  } only %}
{% endset %}
{% set icon_linkedin %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'linkedin-solid',
  } only %}
{% endset %}
{% set icon_email %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'email',
  } only %}
{% endset %}
{% set icon_more %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'more',
  } only %}
{% endset %}
{% set icon_pencil %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pencil',
  } only %}
{% endset %}
{% set icon_share %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'share',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
  } only %}
{% endset %}

{% set actions %}
  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Share profile',
      icon_only: icon_share,
      hierarchy: 'tertiary',
      border_radius: 'full',
      size: 'xsmall',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set popover_menu %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'Share profile',
      items: [
        {
          content: 'Facebook',
          icon_before: icon_facebook,
          url: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'Twitter',
          icon_before: icon_twitter,
          url: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'LinkedIn',
          icon_before: icon_linkedin,
          url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
        {
          content: 'Email',
          icon_before: icon_email,
          url: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
          attributes: {
            target: '_blank',
            rel: 'noopener',
          }
        },
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_menu,
    spacing: 'none',
    placement: 'bottom-end',
    trigger_event: 'hover',
  } only %}

  {% set popover_trigger %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'More options',
      icon_only: icon_more,
      hierarchy: 'tertiary',
      border_radius: 'full',
      size: 'xsmall',
      attributes: {
        type: 'button',
      }
    } only %}
  {% endset %}
  {% set popover_menu %}
    {% include '@bolt-components-menu/menu.twig' with {
      title: 'More options',
      items: [
        {
          content: 'Edit profile',
          icon_before: icon_pencil,
        },
        {
          content: 'Settings',
          icon_before: icon_pega_setting,
        },
      ]
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: popover_trigger,
    content: popover_menu,
    spacing: 'none',
    placement: 'bottom-end',
    trigger_event: 'hover',
  } only %}
{% endset %}

{% set chips %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Member since 2017',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Developer',
    color: 'orange',
    border_radius: 'small',
  } only %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Available for hire',
    color: 'teal',
    border_radius: 'small',
  } only %}
{% endset %}

{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>Toni Kukoc</strong> (@thepinkpanther)',
    tag: 'h1',
  },
  job_title: 'Lead System Architect',
  location: 'Croatia',
  actions: actions,
  chips: chips,
  stats: [
    {
      number: '7',
      label: 'Achievements',
      attributes: {
        type: 'button',
      },
    },
    {
      number: '7k',
      label: 'Contributions',
      attributes: {
        type: 'button',
      },
    },
  ],
  message: {
    label: 'Send message',
    attributes: {
      href: '#!',
    },
  },
  full_bleed: true,
  attributes: {
    class: 't-bolt-gray-xlight',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

profile avatar edit button

Profile with Avatar Edit Button The avatar can display an edit button on hover and focus. Important Notes: Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed in via the edit button's attributes prop. See Button element docs for more info. Demo
Twig
{% set edit_button %}
  {% include '@bolt-components-profile/profile-avatar-edit-button.twig' with {
    content: 'Edit Text'|t,
    attributes: {
      type: 'button',
      class: 'js-button-edit',
      'data-foo': 'bar'
    },
  } only %}
{% endset %}
{% include '@bolt-components-profile/profile.twig' with {
  name: {
    content: '<strong>First Last</strong> (@username)',
    tag: 'h2',
  },
  job_title: 'Lead System Architect',
  location: 'United States',
  avatar_edit_button: edit_button,
} only %}
HTML
Not available in plain HTML. Please use Twig.

progress bar docs

Progress Bar

Visual indicator for the progression of an activity.

Published Last updated: 5.8.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 dark theme
65%
Progress bar in light 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>

deprecated ratio docs

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

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: 5.8.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-list @bolt/components-menu @bolt/core-v3.x @bolt/elements-icon

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

Side Nav

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

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
// List item template
{% set list_items %}
  {% set icon_external_link %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'external-link',
    } only %}
  {% endset %}
  {% include '@bolt-components-side-nav/side-nav-li.twig' with {
    link: {
      content: 'Item text',
      icon: icon_external_link, // Set a custom icon for external link.
      attributes: {
        href: 'https://google.com',
      },
    },
    current: true, // When set to true, the item is indicated as the current page.
    expanded: true, // When set to true, it will show children.
    children: children, // Pass another list in here.
  } only %}
{% endset %}

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

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

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

object
content *

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

any
headline

Set the title of the side nav.

object
    • content

      Text content of the headline.

    • link_attributes

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

Side Nav ul (side-nav-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

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

any
Side Nav li (side-nav-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
link

Set a nav link item.

object
    • attributes

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

    • content

      Text content of the link.

    • icon

      Set an icon after the link text. Use this to indicate external links. Do not use this if the link has children.

children

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

object
current

Indicate the link item as the current page.

boolean
expanded

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

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

side nav

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

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

// Side nav template
{% include '@bolt-components-side-nav/side-nav.twig' with {
  headline: {
    content: 'Headline text',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  content: list, // Pass list in here.
} only %}
HTML
Not available in plain HTML. Please use Twig.

stack docs

Stack

A content container that defines spacing between elements vertically.

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

switch button docs

Switch Button

An interactive UI element that represents a particular boolean function.

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

A Drupal attributes object. Applies extra HTML attributes to this component's parent container.

object
button_attributes

A Drupal attributes object. Applies extra HTML attributes to this component's <button> element.

object
label *

Render a label in front of the switch button.

any
on

Controls the active state of the switch button. Sets button state to "on" by default.

boolean false
Install Install
npm install @bolt/components-switch-button
Dependencies @bolt/core-v3.x

switch button

Basic Switch Button A switch button handles boolean functions that happen instantly. Important Notes: Switch Button should be used to handle changes that happen instantly. It should not be used in a form which requires a submit action. For rendering boolean options within a form, use a checkbox input instead. The label prop can accept anything. For better control of text styling, pass the headline component into the label prop. Set the headline’s tag prop to span since headings are not allowed in a label. The component does not ship with JavaScript. Reference the sample code snippet below to see how to toggle on/off state with the aria-checked attribute. When writing HTML, make sure to follow the sample code snippet below and render all neccessary id, class, and attributes on the <label> and the <button> elements. Demo
Twig
{% include '@bolt-components-switch-button/switch-button.twig' with {
  label: 'Toggle me',
  attributes: {
    class: 'js-target-the-switch-button-container'
  },
} only %}
HTML
<label class="js-target-the-switch-button-container c-bolt-switch-button" for="bolt-switch-button-123">
  <div class="c-bolt-switch-button__label">Toggle me</div>
  <button class="c-bolt-switch-button__button" type="button" id="bolt-switch-button-123" role="switch" aria-checked="false">
    <span class="c-bolt-switch-button__button-text c-bolt-switch-button__button-text--checked">on</span>
    <span class="c-bolt-switch-button__button-text c-bolt-switch-button__button-text--unchecked ">off</span>
  </button>
</label>
JavaScript
const switchButton = document.querySelector(
  '.js-target-the-switch-button-container button[role="switch"]',
);

switchButton.addEventListener('click', e => {
  const el = e.target;
  const isChecked = el.getAttribute('aria-checked') === 'true';

  el.setAttribute('aria-checked', isChecked ? false : true);
});

table docs

Table

Content container for tabular content.

Published Last updated: 5.8.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/components-code-snippet @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

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

table item variations

Pass different items into cells

Item number Description Assemblies

Build 2.0.1.0 — SR-49969

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

table caption

With Caption

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

table with web component

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

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

object
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/elements-icon @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.

tabs content

A text group

Eyebrow

This is a headline.

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

CTA 1 CTA 12
A table
Column 1 Column 2 Column 3
Row 1 R1C1 R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3
An image
Mountains
A video
Tabs
Tab label 1
Tab panel 1
Tab label 2
Tab panel 2
Tab label 3
Tab panel 3
An accordion
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
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: 5.8.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.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} %}
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
signifier

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

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

Use for PDF/articles teasers for estimating reading time. If you choose Video Thumbnail as a signifier do not use this prop since it will conflict with the Video Thumbnail`s duration prop.

string
like

Render the like button. Link element is expected here.

object
share

Render the share button. Share menu is expected here.

object
download

Render the download link. Link element 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.

variant

Set the style variant of the teaser.

string transparent
  • transparent or card
type
(deprecated)

This prop is deprecated, please stop using it. Instead of type: "video", use Video Thumbnail component as a signifier to open a video modal.

string
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. Important Notes: Due to the complexity of the component markup, Twig template is the recommended usage for Drupal. signifier and headline props are required for a basic teaser. When using the signifier prop, it will automatically crop an <img> to the defined ratio (16:9 for vertical and responsive layout, 1:1 for horizontal layout). When using the Image element or the Video Thumbnail component as the signifier, please be sure that the source image file has the appropriate ratio, otherwise there will be undesired white space or cropping. 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.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser layout and variant

Teaser Layout and Variant A teaser can be vertical, horizontal, or responsive. Each has a different layout design that accommodates particular use cases. Additionally, the card variant can turn a teaser into a teaser card. 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. The above restrictions do not apply to the card variant. Reference the schema for all options. Demo
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.
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.
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.
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.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  layout: 'horizontal',
  variant: 'card',
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser gutter

Gutter Size for Horizontal and Responsive Teasers Gutter is the spacing in between columns in the horizontal and responsive teasers. Important Notes: The gutter prop has no effects on vertical teasers. Reference the schema for all options. Demo
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 Chips can be rendered at the bottom of a teaser to display more information. Important Notes: Use the chip_list prop to pass a Chip List component. If linked chips are used, they will work as expected and be excluded from the overall clickable area of the teaser. Demo
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 time

Estimated Reading Time Certain resources come with estimated reading time. A teaser can display that information as an overlay on the signifier. Important Notes: Use the time prop to render such information. This option is perfect for external articles and PDF resources. This option is not to be used with a video resource. If a Video Thumbnail component is used as a signifier do not use the time prop. Please use Video Thumbnail’s duration prop instead. Demo
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  time: '10 min read',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser status and actions

Teaser Status and Actions A teaser can display certain metadata and additional actions as a list. 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. A like button can be set via the like prop. Additional JavaScript is required for the like button to function. A share popover menu can be set via the share prop. boundary is required on the popover so that the popover would be rendered within the teaser. A download button can be set via the download prop. Demo
Twig
// Set up the like and share buttons
{% set like %}
  {% set icon_heart %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'heart',
    } 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-elements-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 download %}
  {% set icon_download %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'download',
    } only %}
  {% endset %}
  {% set tooltip_trigger %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Download slides',
      icon_before: icon_download,
      reversed_underline: true,
      attributes: {
        href: 'https://www.google.com/',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    trigger: tooltip_trigger,
    content: "PDF, 3 pages, 2.3mb",
  } only %}
{% endset %}

// Set up the component
{% include '@bolt-components-teaser/teaser.twig' with {
  like: like,
  share: share,
  download: download,
  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 When creating text content in a teaser, the full features of headline, subheadline, and eyebrow can be used. Important Notes: When setting the eyebrow, 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.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
  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 option to be displayed as an overlay above the signifier. Important Notes: Use the description.show_on_hover prop to render teaser description as an overlay above the signifier. This prop should only be used on vertical and responsive teasers. It does not work with horizontal teasers. Demo
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.

teaser video modal

Teaser Video Within Modal A teaser about a video resource can trigger a video to be played in a modal. Important Notes: Use the Video Thumbnail component as a teaser signifier. Only set up the image, do not make it interactive. Interactivity (triggering of the modal) should be handled via the headline’s link_attributes. Do not use time prop since it will conflict with the Video Thumbnail’s duration prop. Demo
A Rock Climber
Video duration: 4:26

Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna.
Twig
{# Set up video thumbnail as image #}
{% set video_thumbnail %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'A Rock Climber',
        loading: 'lazy',
        width: 400,
        height: 300,
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      title: 'This is a Video Title',
      duration: '4:26',
    }
  } only %}
{% endset %}

{# Pass video thumbnail as signifier, use link attributes to handle the trigger of modal #}
{% include '@bolt-components-teaser/teaser.twig' with {
  signifier: video_thumbnail,
  headline: {
    text: 'The signifier headline.',
    link_attributes: {
      type: 'button',
      'data-bolt-modal-target': '#' ~ modal_id,
    },
  },
  description: {
    content: 'Description.',
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

text docs

Text

Pega branded typography system.

Published Last updated: 5.8.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
Subheadlines
This Is the XXLarge Subheadline This Is the XLarge Subheadline This Is the Large Subheadline
Eyebrow
This Is the Eyebrow
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.

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>

toc docs

Toc

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

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

This sets the specific aria attribute for rendering the tooltip, the 2 available options do different things. 'labelledby' sets the tooltip text as the accessible name for the trigger, while 'describedby' keeps the trigger's accessible name (it must have one in such case) and provides additional description.

string labelledby
  • labelledby or describedby
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 placement="top" uuid="target-this-unique-id">
  CRM
  <span slot="content">Customer relationship management</span>
</bolt-tooltip>

trigger docs

Trigger

An call to action with no styles.

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

Set to noopener, if a link is external.

string
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="https://google.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/16x9.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/16x9.jpg" alt="A Rock Climber" sizes="auto" ratio="640/480"></bolt-image>
  </bolt-trigger>
</bolt-modal>

typeahead docs

Typeahead

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

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

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

object
max_results

The maximum number of typeahead results to display

number 10
items

An array of objects that's used to populate the suggestion list that appears below the input as the users type. This array of objects can be asynchronously fetched and should contain a label, url, and optionally description.

array
clear_input_text

Screenreader-specific text for the clear search button, intended to provide a longer, more descriptive explanation of the clear button's behavior.

string Clear search results
submit_button_text

Screenreader-specific text for the submit button, intended to provide a longer, more descriptive explanation of the submit button's behavior.

string Submit
input_label

Screenreader-specific label text associated with the search input.

string
input_placeholder

The placeholder text to display inside the Typeahead search input.

string Search
input_value

Initial value to pre-populate the input field

string
input_name

Input element's name attribute used when pre-rendering the component

string
no_highlight

Disable text highlighting in matching search results (highlighting is enabled by default)

boolean false
disabled

Disables input as well as the search and cancel buttons.

boolean false
Install Install
npm install @bolt/components-typeahead
Dependencies @bolt/components-form @bolt/components-icon @bolt/core-v3.x @bolt/elements-button @bolt/elements-icon @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",
    rel: "noopener",
    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', 'noopener');
        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",
    rel: "noopener",
    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', 'noopener');
        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",
    rel: "noopener",
    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',
            'noopener',
          );
          win.focus();
        } else {
          window.location = `https://www.pega.com/search?q=${itemSelected.label}`;
        }
      }
    }
  });
};

if (typeahead) {
  if (typeahead) {
    if (typeahead._wasInitiallyRendered) {
      setupEventHandlers();
    }

    typeahead.addEventListener('ready', e => {
      if (e.detail.name === 'bolt-typeahead') {
        setupEventHandlers();
      }
    });
  }
}

ul docs

Ul

Vertical list of bulleted items.

Published Last updated: 5.8.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-components-text/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 thumbnail docs

Video Thumbnail

A graphical element that represents a video.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  video: {
    title: 'Video Title',
    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
chip

Display a chip (or chip-list) that overlays the video thumbnail. Positioned before the video title. Chip or Chip-list component is expected here.

any
button_attributes

A Drupal attributes object. Applies extra HTML attributes to the inner button element.

object
video

Props that pertain to the Brightcove video

object
    • content

      A Brightcove video that will display inside the video thumbnail container.

    • duration

      Display the video duration that overlays the video thumbnail. This should only be plain text.

    • has_subtitles

      Display a subtitles icon that overlays the video thumbnail.

    • has_captions

      Display a captions icon that overlays the video thumbnail.

    • title

      Video title data that is used within the internal button's aria-label and the optional video title chip.

    • show_title

      Display a video title chip that overlays the video thumbnail.

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: Always provide a value for the video.title prop. This will provide contextual information for screen readers.The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail.Video thumbnail is a visual display with a built in button that can trigger a modal or play a video inline.The preferred method is to play videos within modals. View use caseIf required, a video can be played inline. View use caseThe content prop accepts both plain <img> element and Bolt Image element.video.duration prop is optional while recommended. Demo
A Rock Climber
Video duration: 4:55
Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9.jpg',
      alt: 'A Rock Climber',
      background: true,
      loading: 'lazy',
      width: 400,
      height: 300,
    }
  } only %}
{% endset %}
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  video: {
    title: 'Title of the Video',
    duration: '4:55'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail aspect ratio

Video Thumbnail Aspect Ratio Based on the use case, the aspect ratio of the thumbnail can be changed to fit a particular layout. Availalbe aspect ratios are: 1:1, 4:3, and 16:9. Important Notes: If you do not want the image to get cropped, make sure the source image has the same aspect ratio as the one you are using for the component. Demo
A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  aspect_ratio: '1:1',
  video: {
    title: 'Title of the Video',
    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
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  border_radius: 'large',
  video: {
    title: 'Title of the Video',
    duration: '4:55'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Title, Chips and Subtitles Title & Chips can be added or removed per use case. Important Notes: When using Chip alongside Title, please set its size as small, and its border_radius to match the Video Thumbnail’s border_radius. Demo
A Rock Climber
Preview This is a Video Title
Video duration: 4:26
Subtitles available
Twig
{% set chip %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Preview',
    size: 'small',
    border_radius: 'small',
    ...
  } only %}
{% endset %}
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  chip: chip,
  video: {
    title: 'This is a Video Title',
    duration: '4:26',
    has_subtitles: true,
    show_title: true
  }
  ...
} 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: Always provide a value for the video.title prop. This will provide contextual information for screen readers.The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail.Use the button_attributes prop to pass in the required data-bolt-modal-target attribute to hook up a modal.Refer to the Modal Documentation for more information. Demo
Twig
// Set up the thumbnail
{% set video_thumbnail %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'A Rock Climber',
        loading: 'lazy',
        width: 400,
        height: 300,
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    button_attributes: {
      'data-bolt-modal-target': '#js-modal-target'
    },
    video: {
      duration: '4:55',
      title: 'Video Title',
      has_subtitles: true
    }
  } only %}
{% endset %}

{{ video_thumbnail }}

// 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-elements-ratio/ratio.twig' with {
    content: video_embed,
    ratio: 'wide'
  } 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.
Video Thumbnail Inline A video thumbnail can play a video inline if the video.content prop is used. Important Notes: Always provide a value for the video.video_title prop. This will provide contextual information for screen readers.The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail.Use the video.content prop to pass in the video object.The internal button in the video thumbnail will automatically play the video on click.The internal button will be replaced with the video after click. Demo
Twig
// Set up the video thumbnail
{% set video_thumbnail %}
  {% set _image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'A Rock Climber',
        ratio: false,
        background: true,
        loading: 'lazy',
      }
    } only %}
  {% endset %}
  {% set _video %}
    <video-js
      data-account='1900410236'
      data-player='O3FkeBiaDz'
      data-embed='default'
      data-video-id='4892122320001'
      controls
      class="c-base-video"></video-js>
  {% endset %}
  // Utilizing the 'video' prop will open the video inline
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: _image,
    video: {
      content: _video,
      duration: '4:55',
      title: 'Video Title',
      has_subtitles:  true
    }
  } only %}
{% endset %}
{{ video_thumbnail }}
HTML
Not available in plain HTML. Please use Twig.