accordion docs

Accordion

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

Usage recommendations
Recommended Not Recommended
Prioritize Optional Content: Use accordions for secondary or optional information that supports but isn't crucial to the main content. Avoid Hiding Critical Info: Never use accordions for essential, must-see information.
Group Related Information: Keep content in each accordion section closely related to ensure user predictability. Limit Nesting: Avoid multiple levels of nested accordions to prevent user confusion.
Include Section Summaries: For complex or lengthy content, offer short previews in the collapsed state to help users decide to expand. Don't Overuse: If your page is filled with accordions, reconsider your content strategy to avoid clutter.
Twig Usage
{% include '@bolt-components-accordion/accordion.twig' with {
  content: 'This is a accordion component.'
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Accordion (accordion.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

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

any
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

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

integer
Accordion Item (accordion-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

object
content

Expandable content of an item.

any
trigger

Trigger content of an item.

any Toggle Accordion
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
Install Install
npm install @bolt/components-accordion
Dependencies @bolt/core accordion-js

accordion

Basic Accordion An accordion component embeds a responsive, interactive accordion on the page.
Important Notes: When passing data to the content prop, use the accordion-item sub-template.
Demo
Light Theme
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dark Theme
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    content: 'Lorem ipsum dolor sit amet..',
  } only %}
  ...
{% endset %}

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

accordion single

Accordion Single By setting the single prop to true, it allows only one Accordion item to be opened at a time.
Important Notes: Please note that if you are setting single to true, as well as using open and deep-linking, that the deep-link item will take priority over the open item.
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  single: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion no seperator

Accordion No Separator By setting the no_separator prop to true, it will remove the separator in between Accordion items. Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  no_separator: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion box shadow

Accordion Box Shadow By setting the box_shadow prop to true, it will create a box shadow around the accordion. Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  box_shadow: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion spacing

Accordion Spacing 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.
Important Notes: This prop is set using the design systems spacing values.
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  spacing: 'xlarge',
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion icon valign

Accordion Icon V-Align By setting the icon_valign prop to top or center, it will vertically align the trigger and the icon accordingly. The default is center. Demo
Accordion Item Content
Accordion Item Content
Twig
{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  icon_valign: 'top',
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion item open

Accordion Item Open Set the open prop to true on any accordion item to display the content of that item on page load. Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    open: true,
  } only %}
  ...
{% endset %}

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

accordion item inactive

Accordion Item Inactive 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. Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    inactive: true,
  } only %}
  ...
{% endset %}

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

accordion item deep linking

Accordion Item Deep Linking With Scroll Offset 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=accordion-item-2. This link will open in a new tab in order to demonstrate the functionality. Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    attributes: {
      id: 'accordion-item-3',
    }
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}
HTML
Not available in plain HTML. Please use Twig.
Accordion Item Deep Linking 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, add js-bolt-sticky class to 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=second-accordion-item-3. This link will open in a new tab in order to demonstrate the functionality. Demo
Placeholder "fixed" element, should not overlap active accordion item when page first loads.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Twig
{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  scroll_offset: 5,
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion use case qa

Accordion Use Case QA This demo passes a type element into the trigger prop of the accordion-item. Demo
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.
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.
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?
Twig
{% set trigger1 %}
  {% include '@bolt-elements-type/type.twig' with {
    content: 'What are the different ways we can debug an issue in Rest OR SOAP Connector?',
    weight: 'bold',
    tag: 'h2',
    size: 'medium',
    color: 'navy',
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: trigger1,
    content: '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.',
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  box_shadow: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

accordion use case schedule

Accordion Use Case Schedule This demo passes many kinds of content into various grids before passing those into the accordion-item props. Demo

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

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

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur 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
Twig
{% set trigger %}
  {% set headline_1 %}
    {% include '@bolt-elements-type/type.twig' with {
      content: '12:00 PM',
    } only %}
  {% endset %}

  {% set headline_2 %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Lunch & Networking',
      size: 'xlarge',
    } only %}
  {% endset %}

  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '12 3@small',
        content: headline_1,
      },
      {
        column_start: '1 4@small',
        column_span: '12 9@small',
        content: headline_2,
      },
    ]
  } only %}
{% endset %}

{% set content %}
  {% set link_1 %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Get the presentation',
      icon_before: icon_presentation,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}

  {% set link_2 %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Watch video',
      icon_before: icon_video,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}

  {% set content_item %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
    } only %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.',
      weight: 'bold',
    } only %}
    {% include '@bolt-components-list/list.twig' with {
      display: 'inline',
      spacing: 'small',
      items: [
        link_1,
        link_2,
      ]
    } only %}
  {% endset %}
  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1 4@small',
        column_span: '12 9@small',
        content: content_item,
      },
    ]
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: trigger,
    content: content,
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}
HTML
Not available in plain HTML. Please use Twig.
Accordion Use Case Content Examples An accordion component embeds a responsive, interactive accordion on the page. Demo
Alt text.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.

This is a headline

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

Share this page Share via X Share via LinkedIn Copying...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab label 1
Tab Panel Small
Tab label 2
Tab Panel Medium
Tab label 3
Tab Panel Large
Slide 1
Slide 2
Slide 3
Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9.jpg',
      alt: 'Alt text.',
      loading: 'lazy',
      width: 800,
      height: 450,
    }
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Expand this to see an image.',
    content: image,
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}
HTML
Not available in plain HTML. Please use Twig.
Accordion Use Case Vertical Separator There's a possibility to have two labels in the accordion item. We can achieve that by using the list element with a separator prop.
Important Notes: Visit the List Element page to see how to use the separator prop. It's not recommended to use more than two accordion labels in a single accordion item.
Demo
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Twig
{% set list_items %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: 'Heading very long accordion first label',
    } only %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: 'Heading second label',
    } only %}
  {% endset %}
  {% set double_label %}
    {% include '@bolt-elements-list/list.twig' with {
      separator: 'solid',
      content: list_items,
      display: 'horizontal',
      nowrap: true,
      tag: 'span'
    } only %}
  {% endset %}

  {% set accordion_items %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
  {% endset %}

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

action blocks docs

Action Blocks

A grid layout of actions consist of icon and text.

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

action blocks

Action Blocks inside a none themed container.

Action Blocks inside a white themed container.

Action Blocks inside a black themed container.

Action Blocks inside a gray-xlight themed container.

Action Blocks inside a navy-dark themed container.

Action Blocks inside a navy themed container.

Action Blocks inside a navy-light themed container.

Action Blocks inside a teal themed container.

Action Blocks inside a yellow themed container.

Action Blocks inside a orange themed container.

Action Blocks inside a pink themed container.

Action Blocks inside a wine themed container.

Action Blocks inside a berry themed container.

Action Blocks inside a violet themed container.

background docs

Background

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

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 %}
  <div style="height: 400px; position: relative;" class="t-bolt-black">
    {% include '@bolt-components-background/background.twig' with {
      fill: 'gradient',
      items: [
        image,
      ]
    } only %}
  </div>
Schema
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 none
  • none, light, medium, heavy, full
fill

Type of fill to use for the overlay.

string solid
  • solid or gradient
focal_point

Point where the background gradient highlight should originate.

object
    • horizontal

      X-axis positioning for the background focal point

      • center, left, right
    • vertical

      Y-axis positioning for the background focal point

      • center, top, bottom
video

Set to true if you like to use video as a background.

boolean false
video_toggle_button

A Drupal-rendered button that will play and pause a background video.

any
items

An array of renderable items to place in the background.

array
  • [items]:
    • Type:any
shape_group

Add a Bolt Background Shapes group.

string none
  • A, B, none
shape_alignment

Alignment of shape group.

string right
  • left or right
Install Install
npm install @bolt/components-background
Dependencies @bolt/components-background-shapes @bolt/core @bolt/elements-image

background

Background Component Basic Usage Example of a default Background Component.
Important Notes: When adding an image to the Background Component always consider the contrast ratio between the foreground text and background image. The Background Component has a couple of options to add contrast, the Opacity prop, the Fill prop and the Gradient Utility class. Please refer to the documentation for more information.
Demo
Alt text.

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.

Twig
{% include '@bolt-components-background/background.twig' with {
  opacity: 'medium',
  items: [
    image
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.

background valign

Background Component with a Valign Examples of a Background Component with the different valign options.
Important Notes: Alignment of an background image can be achieved by leveraging the Image Element's attributes prop with the a CSS var. Please refer to the fit and position documentation for more information.
Demo

Background Component with an image vertically centered

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 Component with an image vertically aligned to 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.

Background Component with an image vertically aligned to 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.

Background Component with an image vertically aligned 25% from 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.

Twig
{% 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: 4320,
      height: 2880,
      style: '--e-bolt-image-position: center center;',
    },
  } only %}
{% endset %}

{% include '@bolt-components-background/background.twig' with {
  opacity: 'medium',
  items: [
    image
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.

background video

Background Video Background Video should be used only for decorative purposes.
Important Notes: Set video boolean prop to true when you want to render a background video. When creating the video element, it is required to make sure the controls attribute is not present. In addition, make sure the following attributes are present on the video element; autoplay, loop, and muted. Consider this video as decoration and not content (limit elements like words, prominant faces, or brand marks from the video), expect it to be cropped at some point. By design, the background video will disappear when the device witdth is below 800px (this is for visible stablity on smaller screens). The background video should be nested inside the Ratio Element, refer to the Ratio Element docs for more information. Provide a poster background image as a fallback. This will be displayed when the video is being loaded and smaller screen sizes, refer to the Background Image Element docs for more information. The background video play or pause toggle button will be displayed based on logic in the Background Component Drupal module.
Demo

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.

Twig
{% set toggle_button %}
  {% set icon_video %}
    <svg class="e-bolt-icon" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26">
        <animate class="background-video-toggle-animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="0.1s" keySplines=".4 0 1 1"
        repeatCount="1"></animate>
      </path>
  </svg>
  {% endset %}

  {% include '@bolt-elements-button/button.twig' with {
    content: 'Pause',
    icon_only: icon_video,
    border_radius: 'full',
    hierarchy: 'secondary',
    attributes: {
      type: 'button',
      'data-video-target': 'backgroundVideoTarget',
      class: 'js-base-video-toggle js-bolt-background-video-toggle c-bolt-background__video-toggle-button is-playing',
      'aria-label': 'Pause the background video'
    }
  } only %}
{% endset %}
{% set background_video %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/backgrounds/background-light-tall.jpg',
      background: true,
      loading: 'lazy',
    }
  } only %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="5999324539001"
      autoplay loop muted
      id="backgroundVideoTarget"
      class="c-base-video"></video-js>
  {% endset %}
  {% include '@bolt-elements-ratio/ratio.twig' with {
    content: video,
    ratio: 'wide'
  } only %}
{% endset %}
{% include './_00-background-band-demo.twig' with {
  background: {
    fill: 'solid',
    video: true,
    video_toggle_button: toggle_button,
    opacity: 'heavy',
    items: [
      background_video,
    ]
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

background shapes

Background Component with Background Shapes Examples of a Background Component with Background Shapes and Background Alignment.
Important Notes: The shape_group and shape_alignemnt props are deprecated and are no longer supported. Please don't use them.
Demo

Example of a Background Shape "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.

Example of a Background Shape "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.

Example of a Background Shape "A" with Shape 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.

Twig
{% include '@bolt-components-background/background.twig' with {
  shape_group: 'A',
  shape_alignment: 'left'
} only %}
HTML
Not available in plain HTML. Please use Twig.
Theme Background inherits its theme from the closest parent element with a theming class.
Important Notes: The background component does not have a theme prop. Theme is instead determined by a t-bolt-* class on the nearest parent element. Theme affects both background color and text, buttons, etc. For this reason, do not add a t-bolt-* class to the background itself, but rather a parent element that is also a parent of any overlaid text. Accessibility may vary with gradient fills or opacity less than full. Use the focal_point prop, text positioning, and good judgment in these scenarios.
Demo

All themes are supported. A few examples are shown below.

Alt text.
White Theme

This background has a solid fill and the surrounding theme is t-bolt-white

Alt text.
Black Theme

This background has a solid fill and the surrounding theme is t-bolt-black

Alt text.
Dark Navy Theme

This background has a solid fill and the surrounding theme is t-bolt-navy-dark

Twig
<div class="t-bolt-navy-dark">
  {% include '@bolt-components-background/background.twig' with {
    fill: 'solid',
  } only %}
</div>
HTML
Not available in plain HTML. Please use Twig.

background focal point

Focal Point focal_point sets the horizontal and vertical alignment of the gradient (if applicable).
Important Notes: The coordinates of the point represent the lightest or most transparent part of the gradient. Use this prop to make overlayed text more readible or change the point of interest in background colors and/or image. Focal point only makes sense with gradients. It has no effect on solid backgrounds.
Demo
This background has a gradient fill and the focal point is set to horiztonal: left and vertical: top
This background has a gradient fill and the focal point is set to horiztonal: left and vertical: bottom
Twig
{% include '@bolt-components-background/background.twig' with {
  fill: 'gradient',
  focal_point: {
    vertical: 'top',
    horizontal: 'left',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

background fill

Background Component with a Fill Examples of a Background Component with the solid and gradient fill options.
Important Notes: When using the fill prop consider using an opacity prop as well. For more information on the opacity prop, reference the Background Opacity documentation.
Demo

Background Component with Solid Fill

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 Component with Gradient Fill

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.

Twig
{% 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: 4320,
      height: 2880
    },
  } only %}
{% endset %}

{% include '@bolt-components-background/background.twig' with {
  fill: 'solid',
  opacity: 'medium',
  items: [
    image
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.

background opacity

Background Component with Opacity Examples of a Background Component with Opacity options.
Important Notes: The default opacity color is the brand navy color.
Demo

Example of a Background Component with opacity: none

Alt text.

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.

Example of a Background Component with opacity: light

Alt text.

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.

Example of a Background Component with opacity: medium

Alt text.

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.

Example of a Background Component with opacity: heavy

Alt text.

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.

Example of a Background Component with opacity: full

Alt text.

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.

Twig
{% include '@bolt-components-background/background.twig' with {
  opacity: 'medium',
  items: [
    image
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.

background use case hero

Background Component Use Case Hero This is an example of a Background Component with an image being used as a hero section.
Important Notes: Any images at the top of the page, or in the hero section, should have loading set to eager.
Demo

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.

Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: '/images/placeholders/backgrounds/background-light-tall.jpg',
      loading: 'eager'
    },
  } only %}
{% endset %}
{% include '@bolt-components-background/background.twig' with {
  opacity: 'heavy',
  fill: 'gradient',
  focal_point: {
    horizontal: 'right',
    vertical: 'top',
  },
  items: [
    image,
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.

background shapes docs

Background Shapes

Pega branded shapes, for use with background component.

Twig Usage
{% include '@bolt-components-background-shapes/background-shapes.twig' with {
  shapeGroup: 'B'
} only %}
Schema
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

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.

Twig Usage
{% include '@bolt-components-band/band.twig' with {
  content: 'This is a band.',
} only %}
Schema
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. Note: the values xlight, light, dark, xdark, xxdark are deprecated.

string navy
  • none, white, black, gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, violet
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/core @bolt/element @bolt/layouts-grid @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 white.
This is a band with theme set to black.
This is a band with theme set to gray-xlight.
This is a band with theme set to navy-dark.
This is a band with theme set to navy.
This is a band with theme set to navy-light.
This is a band with theme set to teal.
This is a band with theme set to yellow.
This is a band with theme set to orange.
This is a band with theme set to pink.
This is a band with theme set to wine.
This is a band with theme set to berry.
This is a band with theme set to violet.

band tag variations

Setting the container's HTML tag to: div

This is a band.

Setting the container's HTML tag to: article

This is a band.

Setting the container's HTML tag to: section

This is a band.

Setting the container's HTML tag to: header

This is a band.

Setting the container's HTML tag to: footer

This is a band.

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

This is a band.

band full bleed variations

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

Full bleed

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

This is a band.

Not full bleed

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

This is a band.

band with pinned content

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

upper pinned 1
upper pinned 2
upper pinned 3

This Is a Headline

This Is a Subheadline

lower pinned 1
lower pinned 2
lower pinned 3
Share this page Share via X Share via LinkedIn Copying...

This Is a Headline

This Is a Subheadline

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

Share this page Share via X Share via LinkedIn Copying...

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.

Twig Usage
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.'
} 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 banner.

object
content

The main banner content.

any
status

Sets the status that the banner is trying to convey.

string information
  • information, error, warning, success
align

Sets the text alignment of the content.

string center
  • start, center, end
dismiss

Accepts a button to be used for dismissal.

any
Install Install
npm install @bolt/components-banner
Dependencies @bolt/core

banner

Basic Banner A slim container used to call attention to a short message. Demo
This is a banner component.
Twig
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.'
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner status

Banner Status Use this to change the color of the banner based on the priority of your message.
Important Notes: The default status value is information. Use the t-bolt- theme classes found in the Theming System. Note that you will have to set a status as well to avoid the blue line given by the information default.
Demo
Light Theme
This is a banner component.
This is a banner component.
This is a banner component.
This is a banner component.
Dark Theme
This is a banner component.
This is a banner component.
This is a banner component.
This is a banner component.
Twig
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.',
  status: 'error'
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner align

Banner Align A simple text alignment property.
Important Notes: The align prop uses start and end values to support RTL languages.
Demo
This is a banner component.
This is a banner component.
This is a banner component.
Twig
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.'
  align: 'start'
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner dismiss

Banner Dismiss A button passed here will be placed in the top right of the banner.
Important Notes: The functionality of the button should be provided by the user. The button in the demo is the recommended style, any deviation may not be fully supported.
Demo
This is a banner component.
Twig
{% set icon_close %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'close',
  } only %}
{% endset %}

{% set dismiss_button %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Download',
    icon_only: icon_close,
    size: 'xsmall',
    border_radius: 'full',
    hierarchy: 'transparent',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}

{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.',
  dismiss: dismiss_button,
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner use case notes

Banner with Important Notes A banner showing Important Notes, seen all over our documentation. Demo
Important Notes: Lorem Ipsum Lorem Ipsum
Twig
{% set notes_content %}
  <bolt-text headline tag="h3" font-size="medium">Important Notes:</bolt-text>
  <bolt-ol>
    <bolt-li>Lorem Ipsum</bolt-li>
    <bolt-li>Lorem Ipsum</bolt-li>
  </bolt-ol>
{% endset %}

{% include '@bolt-components-banner/banner.twig' with {
  content: notes_content,
  align: 'start',
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote docs

Blockquote

Pullquote layout with author info.

Twig Usage
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.'
} 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.

object
content

The main blockquote content.

any
size

Text size.

string large
  • medium, large, xlarge
weight

Text weight.

string semibold
  • semibold or bold
align_items

Aligns items left, center, or right.

string start
  • start, center, end
border

Add a border.

string vertical
  • vertical, horizontal, none
indent

Indent text.

boolean false
no_quotes

Hide quotation marks.

boolean false
logo

Add a logo.

object
    • content

      Display a logo. Image element is expected here.

    • position

      Position of the logo.

      • top or bottom
author

Author of the quote.

object
    • name

      Author's name.

    • title

      Author's title.

    • content

      Display an author photo. Image element is expected here.

    • image

      Display an author photo. Image element is expected here.

Install Install
npm install @bolt/components-blockquote
Dependencies @bolt/core

blockquote

Basic Blockquote The simplest form of blockquote. Demo
Light Theme

This is a blockquote component.

Dark Theme

This is a blockquote component.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote author

Blockquote Author Attribution for the quote.
Important Notes: A rendered image should be passed into the author.image property. Consider using the image element.
Demo

If you're cooking and not making mistakes, you're not playing outside your safety zone.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: "If you're cooking and not making mistakes, you're not playing outside your safety zone.",
  author: {
    name: 'Guy Fieri',
    title: 'Chef, restaurateur, and New York Times Best Selling author',
    image: guy_img,
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote size

Blockquote Size Change the font size of the quote text. Demo

Medium Size


This is a blockquote component with size set to medium.

Large Size


This is a blockquote component with size set to large.

Xlarge Size


This is a blockquote component with size set to xlarge.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  size: 'large',
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote weight

Basic Blockquote Change the font weight of the quote text. Demo

Semibold Weight


This is a blockquote component with weight set to semibold.

Bold Weight


This is a blockquote component with weight set to bold.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  weight: 'bold',
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote align items

Blockquote Align Items Change the alignment of the blockquote.
Important Notes: The align_items prop uses start and end values to support RTL languages. Note that the border also changes based on the alignment.
Demo

Start Item Alignment


This is a blockquote component with align_items set to start.

Center Item Alignment


This is a blockquote component with align_items set to center.

End Item Alignment


This is a blockquote component with align_items set to end.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  align_items: 'end',
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote border

Blockquote Border Change the position of the border.
Important Notes: Note that the horizontal border is on top and bottom of the quote.
Demo

Vertical Border Option


This is a blockquote component with border set to vertical.

Horizontal Border Option


This is a blockquote component with border set to horizontal.

None Border Option


This is a blockquote component with border set to none.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  border: 'horizontal',
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote indent

Blockquote Indent A boolean property for quote indentation. Demo

No Indent


This is a blockquote component with indent set to false.

Has Indent


This is a blockquote component with indent set to true.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  indent: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote no quotes

Blockquote No Quotes A boolean property for quotation marks.
Important Notes: The quotation mark styles change based on the language of the site.
Demo

Has Quotes


This is a blockquote component with no_quotes set to false.

No Quotes


This is a blockquote component with no_quotes set to true.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  no_quotes: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

blockquote max width

Blockquote Max-Width A CSS Var to override the max-width of the blockquote.
Important Notes: By default, this is set to 44rem.
Demo

Default Max Width Blockquote


This is a blockquote component with --c-bolt-blockquote-max-width set to 44rem. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.

400px Max Width Blockquote


This is a blockquote component with --c-bolt-blockquote-max-width set to 400px. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.

100% Max Width Blockquote


This is a blockquote component with --c-bolt-blockquote-max-width set to 100%. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.

Twig
{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  attributes: {
    style: '--c-bolt-blockquote-max-width: 100%;',
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

breadcrumb docs

Breadcrumb

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

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

breadcrumb

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

breadcrumb use case popover

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

breadcrumb use case band

Breadcrumb Component in a Band ^

The above example shows a xsmall band containing the breadcrumbs.

Eyebrow

Headline

Subheadline

Body text.

Breadcrumb Band Stacking On Top of Featured Band ^

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

Background and Theming

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

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

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

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

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

Background and Theming

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

Digital Transformation

Be Future Empowered

Start with the outcomes you want.

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

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

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

Background and Theming

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

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)

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. Note: the values xlight, light, dark, xdark, xxdark are deprecated.

string none
  • none, white, black, gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, violet
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 @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

none

Inside NONE Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside WHITE Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside BLACK Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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
gray-xlight

Inside GRAY-XLIGHT Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside NAVY-DARK Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside NAVY Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside NAVY-LIGHT Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside TEAL Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside YELLOW Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside ORANGE Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside PINK Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside WINE Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside BERRY Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

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

Inside VIOLET Parent Container

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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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

WHITE 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

BLACK 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

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

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

NAVY 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

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

TEAL 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

YELLOW 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

ORANGE 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

PINK 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

WINE 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

BERRY 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

VIOLET 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
@bolt-Layouts-grid/grid.twig

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"><path fill="#001F5F" fill-rule="evenodd" d="M16 25.72c-.36 0-.71-.12-.99-.37l-7.63-6.68c-.41-.36-.45-.99-.09-1.41.36-.41.99-.45 1.41-.09l6.3 5.51V1c0-.55.45-1 1-1s1 .45 1 1v21.68l6.3-5.51a.99.99 0 011.41.09c.37.41.33 1.05-.09 1.41l-7.63 6.68c-.29.25-.63.37-.99.37zm14-.97c0-.55.45-1 1-1s1 .45 1 1V30c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2v-5.25c0-.55.45-1 1-1s1 .45 1 1V30h28v-5.25z" clip-rule="evenodd"/></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"><path fill="#001F5F" fill-rule="evenodd" d="M16 25.72c-.36 0-.71-.12-.99-.37l-7.63-6.68c-.41-.36-.45-.99-.09-1.41.36-.41.99-.45 1.41-.09l6.3 5.51V1c0-.55.45-1 1-1s1 .45 1 1v21.68l6.3-5.51a.99.99 0 011.41.09c.37.41.33 1.05-.09 1.41l-7.63 6.68c-.29.25-.63.37-.99.37zm14-.97c0-.55.45-1 1-1s1 .45 1 1V30c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2v-5.25c0-.55.45-1 1-1s1 .45 1 1V30h28v-5.25z" clip-rule="evenodd"/></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.

Twig Usage
{% include '@bolt-components-chip/chip.twig' with {
  content: 'This is a chip component.'
} 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 chip.

object
content *

The main chip content.

any
size

Controls the size of the chip.

string small
  • xsmall, small, medium
border_radius

Controls the border radius of the chip.

string full
  • full, large, small, none
icon_before

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

any
icon_after

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

any
icon_only

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

any
Install Install
npm install @bolt/components-chip
Dependencies @bolt/core

chip

Basic Chip Pill like container for displaying meta data text. Demo
Light Theme
This is a chip.
Dark Theme
This is a chip.
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'This is a chip.'
} only %}
HTML
<div class="c-bolt-chip">
  This is a chip.
</div>

chip size

Size Chip Chips come with a few sizing options. Demo
Size Xsmall Chip
Size Small Chip
Size Medium Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Size Medium Chip',
  size: 'medium',
} only %}
HTML
<div class="c-bolt-chip c-bolt-chip--size-medium">
  Size Medium Chip
</div>

chip border radius

Border Radius Chip Other than the fully rounded chips, there are options for adjusting the border radius. Demo
Border Radius Full Chip
Border Radius Large Chip
Border Radius Small Chip
Border Radius None Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Border Radius None Chip',
  border_radius: 'none',
} only %}
HTML
<div class="c-bolt-chip c-bolt-chip--border-radius-none">
  Border Radius None Chip
</div>

chip with icon

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

Chip Icon Before and After

Chip Icon Before

Chip Icon After

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

// chip include
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Chip Icon',
  icon_before: icon_info_open,
  icon_after: icon_info_open,
} only %}
HTML
<div class="c-bolt-chip">
  <span class="c-bolt-chip__icon-before"><!-- Icon or image markup --></span>
  This is a chip with icons before and after
  <span class="c-bolt-chip__icon-after"><!-- Icon or image markup --></span>
</div>

chip with icon only

Chip with Icon Only Icon only chip visually hides the text content of the chip. Such a chip should be used sparingly and only in places where screen real estate is a concern.
Important Notes: If the intent is for the icon_only chip to be used as a button or link, it is reccomended to to be used in tandem with tooltip as shown in the Icon Only Button documentation.
Demo
Twig
// icon var
{% set icon_info_open %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'info-circle',
  } only %}
{% endset %}

// chip include
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Chip Icon',
  icon_only: icon_info_open,
} only %}
HTML
<div class="c-bolt-chip c-bolt-chip--icon-only" aria-label="Chip Icon">
  <span class="c-bolt-chip__icon-center"><!-- Icon or image markup --></span>
</div>

chip linked

Linked Chip Depending on if the a element or the button element is being used, the proper HTML attributes should be passed.
Important Notes: Adding the href attribute will automatically change the chip tag to an anchor.
Demo
Light Theme Linked chip.
Dark Theme Linked chip.
Twig
{% include '@bolt-components-chip/chip.twig' with {
    content: 'Linked chip.',
    attributes: {
      href: 'https://google.com',
      target: '_blank',
      rel: 'noopener'
    }
  } only %}
HTML
<a href="https://google.com" target="_blank" rel="noopener" class="c-bolt-chip">
  Linked chip.
</a>

chip button

Button Chip When appropriate, a button element can use the chip style. For example, the chip performs a function such as opening a modal or popover. Demo
Light Theme
Dark Theme
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Button Chip.',
  attributes: {
    type: 'button',
  }
} only %}
HTML
<button type="button" class="c-bolt-chip">
  Button Chip.
</button>

chip themes

Themed Chip When appropriate, use a theme class to apply brand colors to a chip.
Important Notes: 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
Light Theme
Basic Chip
None Chip
White Chip
Black Chip
Gray-Xlight Chip
Navy-Dark Chip
Navy Chip
Navy-Light Chip
Teal Chip
Yellow Chip
Orange Chip
Pink Chip
Wine Chip
Berry Chip
Violet Chip
Dark Theme
Basic Chip
None Chip
White Chip
Black Chip
Gray-Xlight Chip
Navy-Dark Chip
Navy Chip
Navy-Light Chip
Teal Chip
Yellow Chip
Orange Chip
Pink Chip
Wine Chip
Berry Chip
Violet Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Navy Chip',
  attributes: {
    class: 't-bolt-navy',
  }
} only %}
HTML
<div class="c-bolt-chip t-bolt-navy">
  Navy Chip
</div>

chip list docs

Chip List

An inline list of chips.

Twig Usage
{% include '@bolt-components-chip-list/chip-list.twig' with {
  items: [
    {
      content: 'Chip 1',
      attributes: {
        href: '#!'
      }
    },
    {
      content: 'Chip 2',
      attributes: {
        href: '#!'
      }
    },
    {
      content: 'Chip 3',
      attributes: {
        href: '#!'
      }
    }
  ]
} 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 @bolt/elements-icon

chip list

Chip list with links

Chip list with content

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.

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
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 @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 Theme
import { props } from '@bolt/core/utils';
Dark Theme
import { props } from '@bolt/core/utils';
Twig
{% set code_snippet %}
import { props } from '@bolt/core/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/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/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/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/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/utils';
import { props } from '@bolt/core/utils';
Twig
{% set code_snippet %}
import { props } from '@bolt/core/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/utils';</code></pre>
</div>
<div class="c-bolt-code-snippet" data-lang="js" data-mode="dark">
<pre><code>import { props } from '@bolt/core/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.

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

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

Twig Usage
{% set content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: 'https://placehold.co/1500x2668',
      loading: 'lazy',
    }
  } only %}
{% endset %}

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

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.

Usage recommendations
Recommended Not Recommended
Short Forms: Quick actions like logins or email subscriptions. Non-Essential Information: Anything not directly related to the task at hand.
Confirmations: For irreversible actions like deletions. Long Content: Articles, long forms, or extensive information.
Quick Previews: Enlarged images, videos or short descriptions. Avoid Complex UI in Dialogs: Steer clear of nesting modals, carousels, or similar elements within dialogs.
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
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

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

Share profile

  • Facebook
  • X
  • LinkedIn
  • Email
  • More options

  • 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

    Share certificzte

  • Facebook
  • X
  • LinkedIn
  • Email
  • 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

    Share certificzte

  • Facebook
  • X
  • LinkedIn
  • Email
  • 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

    Share certificzte

  • Facebook
  • X
  • LinkedIn
  • Email
  • 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.

    deprecated figure docs

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

    floating action buttons docs

    Floating Action Buttons

    A sticky list container for action buttons.

    Twig Usage
    {# Assemble the button(s) as list item(s) #}
    {% set scroll_to_top_button %}
      {% set trigger %}
        {% set icon_chevron_up %}
          {% include '@bolt-elements-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
    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, quaternary, 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

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

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

    headline docs

    Headline

    Specific combinations of typographic styles for displaying text.

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

    Any valid anchor element attribute can be used. For example: href, target, rel, etc.

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

    Text transformation.

    string
    • uppercase, lowercase, capitalize
    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.

    url
    (deprecated)

    Use link_attributes instead.

    target
    (deprecated)

    Use link_attributes instead.

    Install Install
    npm install @bolt/components-headline
    Dependencies @bolt/core @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.

    Twig Usage
    {% include '@bolt-components-image/image.twig' with {
      src: '/src/images/turtle.jpg',
      alt: 'A Turtle'
    } only %}
    Schema
    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 @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.

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

    Set the info section to be collapsible by default. Set to false if the card content should be always visible.

    boolean true
    Install Install
    npm install @bolt/components-info-section
    Dependencies @bolt/core

    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.

    info section no collapse

    Info Section No Collapse An info section without content collapsing.
    Important Notes: Use the collapsible prop set to false when the content of the card should be always visible.
    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',
        },
      },
      collapsible: false,
    } 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.

    deprecated list docs

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

    listing teaser docs

    Listing Teaser

    An interactive UI element that summarizes a particular listing.

    Usage recommendations
    Recommended Not Recommended
    Highlight Key Information: Prioritize showing the most relevant attributes of the listing, article, or thread, like the title, a brief description, and perhaps an accompanying image, to give users a quick but informative overview. Avoid Clutter: Don't overload the Listing Teaser with too much information or visual elements, as it should serve as a simplified preview of the full listing.
    For Results Listing: The listing teaser is intended to be only used on results pages to organize the content in the most efficient way (ie. search results. Don't Be Misleading: Ensure that the teaser accurately represents the content of the full listing, article, or thread. Misleading teasers can frustrate users and decrease engagement.
    No Complex Interactions: Don't include complex interactions like forms or multi-level menus within the teaser. Keep it simple and direct users to a more appropriate context for detailed actions.
    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
    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
    description_clamp

    Set prop to false to remove the default line clamping on the description.

    boolean true
    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 @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 %}
      {% set list_items %}
        {% set reply %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Reply',
            icon_before: icon_reply,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% set reply %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Reply',
            icon_before: icon_reply,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: reply,
        } only %}
        {% set favorite %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Favorite',
            icon_before: icon_heart,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: favorite,
        } only %}
        {% set subscribe %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Subscribe',
            icon_before: icon_eye,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: subscribe,
        } only %}
      {% endset %}
      {% include '@bolt-elements-menu/menu.twig' with {
        title: 'More actions',
        content: list_items
      } 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: 'x',
            attributes: {
              href: 'https://x.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).
    Important Notes: When using the horizontal or responive layout, the spacing between the signifier and the content can be controlled by the gutter.
    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.

    listing teaser line clamp

    Listing Teaser Line Clamp By default, a listing teaser will shorten the description after a number of lines determind by a breakpoint. Setting this prop to false will allow the entire description to be previewed. Demo
    • Posted 8 hours 15 minutes ago
    • Last activity: 2 minutes ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tellus elementum sagittis vitae. Leo vel fringilla est ullamcorper eget nulla facilisi. Quis blandit turpis cursus in. Praesent semper feugiat nibh sed pulvinar proin. Fermentum posuere urna nec tincidunt praesent semper. Donec pretium vulputate sapien nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Eget lorem dolor sed viverra. Donec enim diam vulputate ut pharetra sit amet aliquam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Purus non enim praesent elementum facilisis leo vel fringilla est. Eget duis at tellus at urna condimentum mattis. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dolor purus non enim praesent elementum facilisis leo vel.

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

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tellus elementum sagittis vitae. Leo vel fringilla est ullamcorper eget nulla facilisi. Quis blandit turpis cursus in. Praesent semper feugiat nibh sed pulvinar proin. Fermentum posuere urna nec tincidunt praesent semper. Donec pretium vulputate sapien nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Eget lorem dolor sed viverra. Donec enim diam vulputate ut pharetra sit amet aliquam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Purus non enim praesent elementum facilisis leo vel fringilla est. Eget duis at tellus at urna condimentum mattis. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dolor purus non enim praesent elementum facilisis leo vel.

    Twig
    {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
        description_clamp: false,
        ...
      } 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

    More actions

  • 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 %}
      {% set list_items %}
        {% set reply %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Reply',
            icon_before: icon_reply,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% set reply %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Reply',
            icon_before: icon_reply,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: reply,
        } only %}
        {% set favorite %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Favorite',
            icon_before: icon_heart,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: favorite,
        } only %}
        {% set subscribe %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Subscribe',
            icon_before: icon_eye,
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: subscribe,
        } only %}
      {% endset %}
      {% include '@bolt-elements-menu/menu.twig' with {
        title: 'More actions',
        content: list_items
      } 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: 'x',
            attributes: {
              href: 'https://x.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

    More actions

  • 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 %}
        {% set list_items %}
          {% set menu_item_one %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'View in Org Chart',
              icon_before: icon_connection_hierarchy,
              attrbiutes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% set menu_item_two %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'View on PeopleHub',
              icon_before: icon_partners,
              attrbiutes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: menu_item_one,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: menu_item_two,
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu.twig' with {
          title: 'More actions',
          content: list_items
        } 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.

    deprecated menu docs

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

    modal docs

    Modal

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

    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. Note: the values xlight, light, dark, xdark, xxdark are deprecated.

    string white
    • none, white, black, gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, violet
    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 @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 white.
    Important Notes: The none prop makes the modal container transparent. The black, white,gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, and violet, 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 black theme. This is a modal with a white theme. This is a modal with a gray xlight theme. This is a modal with a navy dark theme. This is a modal with a navy theme. This is a modal with a navy light theme. This is a modal with a teal theme. This is a modal with a yellow theme. This is a modal with a orange theme. This is a modal with a pink theme. This is a modal with a wine theme. This is a modal with a berry theme. This is a modal with a violet theme.
    Twig
    {% include '@bolt-components-modal/modal.twig' with {
      content: 'This is a modal with a white theme.',
      theme: 'white',
      attributes: {
        class: 'js-bolt-modal--theme-white',
      },
    } 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 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.

    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
    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. Note: the values xlight, light, dark, xdark, xxdark are deprecated.

    string navy
    • none, white, black, gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, violet
    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. Please note that currently Twitter, after rebranding, from July 2023 operating under the name X

            • add-circle, add-single, add-solid, add, agile, agile2, agriculture, ambulance, app-code, app-development, app-search, arrow-down, arrow-left, arrow-right, arrow-up, balance, bar-chart-circle, bar-chart-growth, bar-chart, bell-solid, bell, bicycle, bold-chevron-double, bold-chevron, bolt-logo-colored, box-open, briefcase, bullseye, calendar-solid, calendar, car, cart-solid, case-management, cell-tower, center-out, certification, check-circle, check-single, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, clock-circle, clock-solid, close-circle, close-single, close-solid, close, closed-caption-solid, closed-caption, cloud-solid, cloud, co-browse, coffee, collaboration, communications, contract, copy-to-clipboard, credit-card, cube, currency, customer-decision-hub, customer-onboarding, customer-service, customer, dashboard, data-integrations-encrypted, data-integrations, decisioning, directional-down, directional-left, directional-right, directional-up, documentation, dollar-circle, download-cloud, download, email, energy, entertainment, exclamation, exclamation-solid, external-link, eye-off-solid, eye-off, eye-solid, eye, face-happy, face-sad, facebook-circle, facebook-solid, facebook, farmhouse, fast, fast-delivery, filter, filter-solid, financial, flag, flag-solid, forward, full-screen-off, full-screen-on, gavel, genai-analyze, genai-automate, genai-autopilot, genai-blueprint, genai-cdh, genai-coach, genai-knowledge-buddy, genai-socrates, github-circle, github-solid, github, globe-circle, globe, government, grid, growth, health-chart, health, healthcare, heart-solid, heart, hospital, hospital-bed, hospitality, house, ideas, imbalance, industries, info-circle, info-solid, insurance, integration, intelligent-automation, intelligent-virtual-assistant, interactive, java, key, knowledgebase, laptop, life-sciences, link, linkedin-circle, linkedin-solid, linkedin, list, loading, lock, lock-solid, manufacturing, map-pin, map-pin-solid, media, menu, meteor, mining, minus, minus-circle, minus-single, minus-solid, mobility, molecule, money, money-bag, more-vertical, more, multiple-case-management, network-solid, network, omni-channel, orbit, package, parent-child-case, partners, path, pause-solid, pause, pega-announce, pega-book, pega-building-complex, pega-building, pega-cart, pega-catalyst, pega-chat-double-question, pega-chat-double-typing, pega-chat-double, pega-chat-question, pega-chat-square-double-question, pega-chat-square-double-typing, pega-chat-square-double, pega-chat-square-question, pega-chat-square-typing, pega-chat-square, 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-phone-ringing, pega-pie-chart, pega-pin-drop-circle, pega-pin-drop, pega-pin, pega-plane, pega-process-ai, pega-process-fabric, pega-process-mining, pega-send-submit, pega-setting, pega-shuffle, pega-subtitles-solid, pega-subtitle, pega-tag, pega-thumbs-up, pega-timer, pencil-solid, pencil, personal-chart, personalized, phone-call-solid, phone-call, picture, platform, play-solid, play, podcast-solid, podcast, prembridge, presentation, print, product-delivery, refresh, reload, reply, reporting, retail, ribbon, robo-auto, rocket, sales-automation, scalability, search, setting-solid, share-solid, share, small-business, sort-descending, sort, speed-dial, star-solid, star, support, system-admin, target, text-align-center, text-align-left, text-align-right, tools, transportation, trash-solid, trash, triangle, trophy, truck, twitter-solid, twitter, unlock-solid, unlock, upload-cloud, upload, user-interface, user-solid, user, video-solid, video, warning-solid, warning, watch, pega-wifi, workflow, workforce-intelligence, x-circle, x-solid, x, youtube-circle, youtube-solid, youtube
          • 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

    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 navy 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: 'gray-xlight',
      ...
    } 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.

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

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

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

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

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

    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.

    panel docs

    Panel

    An interactive UI element that can display additional content on interaction.

    Twig Usage
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        attributes: {
          alt: 'Alt text.',
          src: 'https://placehold.co/400x300',
          width: 400,
          height: 300,
        },
      } only %}
    {% endset %}
    
    {% include '@bolt-components-panel/panel.twig' with {
      signifier: image,
      title: 'This is a panel component.',
    } only %}
    Schema
    Prop Name Description Type Default Value Option(s)
    attributes

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

    object
    signifier *

    This image will is visible before interaction.

    any
    title *

    This content is visible before interaction.

    any
    content_header

    This content is not visible until after interaction. It will be at the top of the panel.

    any
    content_main

    This content is not visible until after interaction.

    any
    content_footer

    This content is not visible until after interaction. It will be pinned to the bottom of the panel.

    any
    short_reveal

    Decides how much of the original panel will be covered to reveal the content.

    boolean false
    Install Install
    npm install @bolt/components-panel
    Dependencies @bolt/core

    panel

    Basic Panel A simple interactive element best used in story telling or displaying headshots. Demo
    Alt text.
    Twig
    {% set signifier %}
      {% include '@bolt-elements-image/image.twig' with {
        ...
      } only %}
    {% endset %}
    
    {% set title %}
      {% include '@bolt-elements-type/type.twig' with {
        ...
      } only %}
    {% endset %}
    
    {% include '@bolt-components-panel/panel.twig' with {
      signifier: signifier,
      title: title,
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    panel content

    Panel Content Adding content to a panel will create the interaction for revealing the additional content.
    Important Notes: If more content is added, the height of the Panel will be increased to match. This will crop the signifier image to create uniformity. If multiple Panels are placed in a layout, they will all match the height of the tallest one.
    Demo
    Alt text.
    Alt text.
    Alt text.
    Alt text.
    Twig
    {% include '@bolt-components-panel/panel.twig' with {
        signifier: signifier,
        title: title,
        content_header: content_header,
        content_main: content,
        content_footer: content_footer,
      } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    panel short reveal

    Panel Short Reveal Instead of filling the whole Panel, the height of revealed content can be dictated by the height of the content itself.
    Important Notes: More content will force the revealed panel to be taller.
    Demo
    Alt text.
    Alt text.
    Alt text.
    Alt text.
    Twig
    {% include '@bolt-components-panel/panel.twig' with {
        signifier: signifier,
        title: title,
        content_header: content_header,
        content_main: content,
        content_footer: content_footer,
        short_reveal: true,
      } only %}
    HTML
    Not available in plain HTML. Please use Twig.
    Panel Use Case Slideshow A slideshow can be used to display several Panels in a format conducive to story telling.
    Important Notes: If the slideshow nav buttons are covering content, know that you can set nav button positiont to outside.
    Demo
    Alt text.
    Alt text.
    Alt text.
    Alt text.
    Alt text.
    Alt text.
    Twig
    {% set slides %}
        {% include '@bolt-components-slideshow/slideshow-slide.twig' with {
          content: panel,
        } only %}
        ...
      {% endset %}
    
      {% include '@bolt-components-slideshow/slideshow.twig' with {
        content: slides,
        ...
      } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    popover docs

    Popover

    A small overlay that opens on demand.

    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. Note: the values xlight, light, dark, xdark, xxdark are deprecated.

    string white
    • none, white, black, gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, violet
    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 @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

    Choose one of these

  • Twig
    {% set trigger %}
      {% include '@bolt-elements-button/button.twig' with {
        content: 'This triggers a popover menu',
        attributes: {
          type: 'button'
        }
      } only %}
    {% endset %}
    {% set content %}
      {% set list_items %}
        {% set menu_item_one %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item One',
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% set menu_item_two %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item Two',
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% set menu_item_three %}
          {% include '@bolt-elements-text-link/text-link.twig' with {
            content: 'Menu Item Three',
            attributes: {
              type: 'button'
            }
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_one,
        } only %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_two,
        } only %}
        {% include '@bolt-elements-menu/menu-item.twig' with {
          content: menu_item_three,
        } only %}
      {% endset %}
      {% include '@bolt-elements-menu/menu.twig' with {
        title: 'Choose one of these',
        content: list_items
      } 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 . 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,
      theme: 'navy',
    } only %}
    HTML
    <bolt-popover theme="navy">
      <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.

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

    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

    Share profile

  • Facebook
  • X
  • LinkedIn
  • Email
  • More options

  • Twig
    {% set icon_facebook %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'facebook-solid',
      } only %}
    {% endset %}
    {% set icon_X %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'x',
      } 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 %}
        {% set list_items %}
          {% set facebook %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Facebook',
              icon_before: icon_facebook,
              attributes: {
                href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse',
                target: '_blank',
                rel: 'noopener'
              }
            } only %}
          {% endset %}
          {% set x %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
                content: 'X',
                icon_before: icon_X,
                attributes: {
                  href: 'https://x.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
                  target: '_blank',
                  rel: 'noopener'
                }
            } only %}
          {% endset %}
          {% set LinkedIn %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'LinkedIn',
              icon_before: icon_linkedin,
              attributes: {
                href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
                target: '_blank',
                rel: 'noopener'
              }
            } only %}
          {% endset %}
          {% set email %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Email',
              icon_before: icon_email,
              attributes: {
                href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
                target: '_blank',
                rel: 'noopener'
              }
            } only %}
          {% endset %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: facebook,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: x,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: LinkedIn,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: email,
          } only %}
        {% endset %}
    
        {% include '@bolt-elements-menu/menu.twig' with {
          spacing: 'medium',
          title: 'Share profile',
          content: list_items,
        } 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 %}
        {% set list_items %}
          {% set edit %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Edit profile',
              icon_before: icon_pencil,
              attributes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% set settings %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Settings',
              icon_before: icon_pega_setting,
              attributes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: edit,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: settings,
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu.twig' with {
          spacing: 'medium',
          title: 'More options',
          content: list_items
        } 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 {
        content: 'Member since 2017',
        size: 'xsmall',
        border_radius: 'small',
      } only %}
      {% include '@bolt-components-chip/chip.twig' with {
        content: 'Designer',
        size: 'xsmall',
        border_radius: 'small',
        attributes: {
          class: 't-bolt-orange',
        }
      } only %}
      {% include '@bolt-components-chip/chip.twig' with {
        content: 'Available for hire',
        size: 'xsmall',
        border_radius: 'small',
        attributes: {
          class: 't-bolt-teal',
        }
      } 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

    Share profile

  • Facebook
  • X
  • LinkedIn
  • Email
  • More options

  • Send message
    Twig
    {% set icon_facebook %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'facebook-solid',
      } only %}
    {% endset %}
    {% set icon_X %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'x',
      } 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 %}
        {% set list_items %}
          {% set facebook %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Facebook',
              icon_before: icon_facebook,
              attributes: {
                href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse',
                target: '_blank',
                rel: 'noopener'
              }
            } only %}
          {% endset %}
          {% set x %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
                content: 'X',
                icon_before: icon_X,
                attributes: {
                  href: 'https://x.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
                  target: '_blank',
                  rel: 'noopener'
                }
            } only %}
          {% endset %}
          {% set LinkedIn %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'LinkedIn',
              icon_before: icon_linkedin,
              attributes: {
                href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
                target: '_blank',
                rel: 'noopener'
              }
            } only %}
          {% endset %}
          {% set email %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Email',
              icon_before: icon_email,
              attributes: {
                href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
                target: '_blank',
                rel: 'noopener'
              }
            } only %}
          {% endset %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: facebook,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: x,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: LinkedIn,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: email,
          } only %}
        {% endset %}
    
        {% include '@bolt-elements-menu/menu.twig' with {
          spacing: 'medium',
          title: 'Share profile',
          content: list_items,
        } 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 %}
        {% set list_items %}
          {% set edit %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Edit profile',
              icon_before: icon_pencil,
              attributes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% set settings %}
            {% include '@bolt-elements-text-link/text-link.twig' with {
              content: 'Settings',
              icon_before: icon_pega_setting,
              attributes: {
                type: 'button'
              }
            } only %}
          {% endset %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: edit,
          } only %}
          {% include '@bolt-elements-menu/menu-item.twig' with {
            content: settings,
          } only %}
        {% endset %}
        {% include '@bolt-elements-menu/menu.twig' with {
          spacing: 'medium',
          title: 'More options',
          content: list_items
        } 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 {
        content: 'Member since 2017',
        border_radius: 'small',
      } only %}
      {% include '@bolt-components-chip/chip.twig' with {
        content: 'Developer',
        border_radius: 'small',
        attributes: {
          class: 't-bolt-orange',
        }
      } only %}
      {% include '@bolt-components-chip/chip.twig' with {
        content: 'Available for hire',
        border_radius: 'small',
        attributes: {
          class: 't-bolt-teal',
        }
      } 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.

    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

    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.

    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: 'x',
          attributes: {
            href: 'https://x.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 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, x, linkedin, email, secure-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 @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
    Share this page Share via X Share via LinkedIn Copying...
    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: 'x',
          attributes: {
            href:  'https://x.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
          }
        },
        {
          name: 'linkedin',
          attributes: {
            href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
          }
        },
        {
          name: 'email',
          attributes: {
            href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
          }
        }
      ],
      copy_to_clipboard: {
        text_to_copy: 'https://boltdesignsystem.com'
      },
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    share size variations

    Title, icon, and spacing size Share is available in small and medium sizes. Use the size prop to control the title text size, the icon size, and the spacing between the icons. Demo
    Share this page Share via X Share via LinkedIn Copying...
    Share this page Share via X Share via LinkedIn Copying...
    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

    Share this page

  • Share via X
  • Share via LinkedIn
  • Copying... Copied!
  • Twig
    {% set popover_trigger %}
      {% include '@bolt-elements-button/button.twig' with {
        content: 'Share menu',
        attributes: {
          type: 'button'
        }
      } only %}
    {% endset %}
    {% set popover_content %}
      {% include '@bolt-components-share/share.twig' with {
        display: 'menu',
        sources: var_foo,
        copy_to_clipboard: var_bar,
      } only %}
    {% endset %}
    {% include '@bolt-components-popover/popover.twig' with {
      trigger: popover_trigger,
      content: popover_content,
      spacing: 'none',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    share opacity variations

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

    share align variations

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

    share theme variations

    Theme compatibility Share can be used in various themes. Demo
    Share this page Share via X Share via LinkedIn Copying...
    Share this page Share via X Share via LinkedIn Copying...
    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 X 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.

    share secure email

    Secure Share Secure share allows for a more secure sharing workflow with a secure HTML email to share content.
    Important Notes: Use the secure-email option within the source prop to add a secure share option. The secure share should be the only source option passed into the Share Component. Only use the secure share with the display: inline prop option. The secure share will not display correctly with in a Share Menu. Due to accessbility reasons the size prop will not affect the secure share button.
    Demo
    [Place secure form here.]
    Secure Share
    Twig
    {% include '@bolt-components-dialog/dialog.twig' with {
      ...
      attributes: {
        id: 'dialog-1'
      },
    } only %}
    
    {% set demo_sources_secure = [
      {
        name: 'secure-email',
        attributes: {
          'data-bolt-dialog-target': '#dialog-1'
        }
      }
    ] %} 
    
    {% include '@bolt-components-share/share.twig' with {
      sources: demo_sources_secure,
      text: 'Secure Share'
    } 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.

    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
    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/core @bolt/elements-icon

    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.

    slideshow docs

    Slideshow

    A slideshow component for cycling through a series of content such as images, text, or cards.

    Usage recommendations
    Recommended Not Recommended
    Encourage Exploration: Use slideshows to highlight content that invites user curiosity and exploration, like "Did You Know?" facts or tips related to the main subject. No Critical Info: Don't use slideshows for essential content; it might be overlooked.
    Series Introduction: Use the slideshow to introduce a series of upcoming events, workshops, or webinars that users may find value in, but which are not the primary focus of the page. Limit Slide Count: Too many slides can fatigue users.
    Showcase Varied but Coherent Content Types: Employ the slideshow to display different types of media, such as images, short videos, and articles, ensuring they are unified by a common theme or message. Avoid Nested Slideshows: Nesting a slideshow within another slideshow can make navigation a confusing, disorienting experience for the user.
    Twig Usage
    {% set slides %}
      {% include '@bolt-components-slideshow/slideshow-slide.twig' with {
        content: 'content',
      } only %}
    {% endset %}
    
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides
    } only %}
    Schema
    Prop Name Description Type Default Value Option(s)
    attributes

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

    object
    content

    Content of the Slideshow. Slides are expected here.

    any
    slides_per_view

    Controls the number of slides to be shown at once.

    string 1
    • 1, 2, 3, 4
    slides_per_group

    Controls the number of slides to be swiped at once.

    string auto
    • auto, 1, 2, 3, 4
    space_between

    Controls the horizontal spacing between each slide.

    string medium
    • none, small, medium, large
    nav_button_position

    Positions the previous and next buttons to either inside or outside of the carousel container.

    string inside
    • inside or outside
    no_nav_buttons

    Visually hide the previous and next nav buttons.

    boolean false
    free_scroll

    Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar.

    boolean false
    autoplay

    Enables content to begin swiping through slides on page load. This feature stops on user interaction.

    boolean false
    overflow

    Makes overflowing carousel slides visible on desktop only.

    boolean false
    Install Install
    npm install @bolt/components-slideshow
    Dependencies @bolt/core swiper

    slideshow

    Basic Slideshow A slideshow component embeds a responsive, interactive carousel on the page.
    Important Notes: When passing data to the content prop, use the slideshow-slide sub-template.
    Demo
    Light Theme
    Slide 1
    Slide 2
    Slide 3
    Dark Theme
    Slide 1
    Slide 2
    Slide 3
    Twig
    {% set slides %}
      {% include '@bolt-components-slideshow/slideshow-slide.twig' with {
        content: 'content',
      } only %}
      ...
    {% endset %}
    
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow slides per view

    Slides Per View Controls the number of slides to be shown at once. Demo
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      slides_per_view: '3',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow slides per group

    Slides Per Group Controls the number of slides to be swiped at once.
    Important Notes: The default value is auto, this means that this value will be equal to the slides_per_view. Set a numeric value to overide the auto value.
    Demo
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      slides_per_group: '2',
      slides_per_view: '3',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow space between

    Space Between Controls the horizontal spacing between each slide.
    Important Notes: This prop is set using the design systems spacing values.
    Demo
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      space_between: 'large',
      slides_per_view: '3',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.
    Nav Button Position Positions the previous and next buttons to either inside or outside of the carousel container.
    Important Notes: Setting the prop to outside will also slightly shrink the width of the component.
    Demo
    Light Theme
    Slide 1
    Slide 2
    Slide 3
    Dark Theme
    Slide 1
    Slide 2
    Slide 3
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      nav_button_position: 'outside',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow no nav buttons

    No Nav Buttons Visually hide the previous and next nav buttons. Demo
    Slide 1
    Slide 2
    Slide 3
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      no_nav_buttons: true,
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow free scroll

    Free Scroll Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar. Demo
    Slide 1
    Slide 2
    Slide 3
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      free_scroll: true,
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow overflow

    Overflow Makes overflowing carousel slides visible on desktop only.
    Important Notes: This change is only visible on large breakpoint and above, this prevents a related issue with scrolling on mobile devices.
    Demo
    Slide 1
    Slide 2
    Slide 3
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      overflow: true,
      space_between: 'small',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow autoplay

    Autoplay Enables content to begin swiping through slides on page load. This feature stops on user interaction. Demo
    Slide 1
    Slide 2
    Slide 3
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      autoplay: true,
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow use case cards

    Use Case: Cards Demo for a card based slideshow
    Important Notes: This is built to loosely mimic the Academy Dashboard.
    Demo
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      slides_per_view: '3',
      nav_button_position: 'outside',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    slideshow use case teasers

    Use Case: Teasers Demo for a teaser based slideshow
    Important Notes: This is built to loosely mimic Alan's picks from the Best of Content Gallery. These teasers trigger a video modal.
    Demo
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Alt text.
    7 mins

    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.
    Chip 1
    Chip 2
    Twig
    {% include '@bolt-components-slideshow/slideshow.twig' with {
      content: slides,
      slides_per_view: '4',
      nav_button_position: 'outside',
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    stack docs

    Stack

    A content container that defines spacing between elements vertically.

    Twig Usage
    {% include '@bolt-components-stack/stack.twig' with {
      content: 'This is one stack.'
    } only %}
    Schema
    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 @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.

    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 @bolt/lazy-queue

    switch button docs

    Switch Button

    An interactive UI element that represents a particular boolean function.

    Twig Usage
    {% include '@bolt-components-switch-button/switch-button.twig' with {
      label: 'This is the label for the switch button'
    } only %}
    Schema
    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

    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.

    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 @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.
    R-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>
              <a href="#!" class="c-bolt-chip">R-44850</a>
            </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.

    Usage recommendations
    Recommended Not Recommended
    Group Related Content: Use for closely related information or functionalities. No Essential Info: Don't hide crucial content that users might miss.
    Progressive Disclosure: Ideal for breaking down complex info into manageable sections. No Mixed Content: Keep each tab's content coherent and related.
    Quick Filters: Useful for frequently switched content, like "Inbox" and "Sent" in an email client. Avoid Complex UI Inside: Don't nest other complex UI components like carousels or additional sets of tabs within a tab, as it complicates navigation.
    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
    vertical_tabs

    Makes tabs arranged vertically - one on top of the other and place them on the left or right side of the content.

    string none
    • none, left, right
    align

    Tab labels alignment. Horizontally arranged tabs can be on the left, center or right. When tabs are vertical, they can be at the top, center, or bottom if the height of the content allows.

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

    This is deprecated. Now selecting the sticky element and offsetting smooth scrolling by the height of that element is done automatically. It's also possible to use the js-bolt-sticky class on any other "fixed" element to flag that it should be used in the scroll offset calculation

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

    Use vertical_tabs prop, when tabs desired placement should be to the left or right. Please note that below 600px vertical tabs become horizontal. Vertical tabs: left
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Vertical tabs: right
    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, horizontal tabs.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Inset: on, horizontal tabs.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Inset: off, horizontal tabs.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Inset: auto, vertical tabs.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Inset: on, vertical tabs.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Inset: off, vertical tabs.
    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. Examples for horizontal tabs. 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
    Examples for verical tabs. 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 for horizontal tabs: start
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Align for horizontal tabs: center
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Align for horizontal tabs: end
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Align for vertical tabs. When using vertical tabs, align of center or end make sens only when your tabs total height is larger than content height or content height is larger than total tabs height.
    Please note that when individual tab contents are not the same height it will cause bad user experience when changing tabs. It's recomended to have default - align: 'start' when vertical tabs are used, or be sure that all of your tab content is the same height. Align for vertical tabs when: start. Tabs content height is not the same - please avoid.
    Tab label 1
    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
    Tab label 2
    Tab label 3
    Mountains
    Align for vertical tabs when: center. Tabs content height is not the same - please avoid.
    Tab label 1
    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
    Tab label 2
    Tab label 3
    Mountains
    Align for vertical tabs when: end. Tabs content height is not the same - please avoid.
    Tab label 1
    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
    Tab label 2
    Tab label 3
    Mountains
    Align for vertical tabs: start. Tabs content height is the same height.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Tab label 4
    Tab panel 4
    Tab label 5
    Tab panel 5
    Tab label 6
    Tab panel 6
    Align for vertical tabs: center. Tabs content height is the same height.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Tab label 4
    Tab panel 4
    Tab label 5
    Tab panel 5
    Tab label 6
    Tab panel 6
    Align for vertical tabs: end. Tabs content height is the same height.
    Tab label 1
    Tab panel 1
    Tab label 2
    Tab panel 2
    Tab label 3
    Tab panel 3
    Tab label 4
    Tab panel 4
    Tab label 5
    Tab panel 5
    Tab label 6
    Tab panel 6

    tabs 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

    Different content for horizontal tabs examples.
    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 a accordion content.
    This is a accordion content.
    This is a 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
    Different content for vertical tabs examples.
    @bolt-components-grid/grid.twig
    @bolt-components-grid/grid.twig
    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, add js-bolt-sticky class to 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-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 taband vertical-tabs to display tabs vertically -->
    <bolt-tabs  vertical-tabs="left">
      <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.

    Usage recommendations
    Recommended Not Recommended
    Prioritize Relevance: Make sure the teaser's content is a direct and compelling representation of the linked resource or external content it leads to. Avoid Distractors: Skip additional links or CTAs within the teaser. The entire block serves as a single CTA, and multiple actions can confuse the user.
    Entice but Don't Overshare: Include just enough detail to spark interest and provoke a click-through. Don't give away everything, maintaining a level of curiosity. No Mixed Messages: Ensure the teaser content directly correlates with the destination it points to, avoiding any misleading or irrelevant information.
    Balance Text and Imagery: Use a harmonious blend of text and visuals to represent the content effectively, ensuring neither overpowers the other. Don't Clutter: Keep the content streamlined. Overloading the teaser with too much text, imagery, or icons can dilute its purpose and make it less effective.
    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
    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
    spacing

    This works only with the card variant teaser. Set spacing around the component content

    string small
    • small, medium, large
    border_radius

    This works only with the card variant teaser. Set rounded corners on the component. Note: the value none is deprecated, use small (default) and large instead.

    string small
    • small or large
    no_aspect_ratio

    By default teaser signifiers have predefined aspect ratios (16/9 or 1/1). Set this prop to true if signifiers should not have predefined aspect ratios but auto rendered aspect ratio.

    boolean false
    valign

    Control the vertical alignment of items.

    string center
    • start, center, end
    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

    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. Both the signifier and headline props are recommended for all teasers, though neither is strictly required. 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

    Teaser Layout A teaser can be vertical, horizontal, or responsive. Each has a different layout design that accommodates particular use cases.
    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.
    Twig
    {% include '@bolt-components-teaser/teaser.twig' with {
      layout: 'horizontal',
      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 card variant

    Teaser Card Variant The variant card prop can turn a teaser into a teaser card.
    Important Notes: When the variant prop is set to card it's possible to apply spacing around the teaser and rounding the teaser's corners. Reference the schema for spacing and border_radius props. The card variant teaser, unlike the transparent teaser, has default background color set to white. It doesn't inherit the theme color from the wrapping element. The default white color can be changed using a theme class on the teaser component. Scroll the page to see examples.
    Demo
    Alt text.
    This card has the border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Alt text.
    This card has the prop border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Alt text.
    This card has the prop border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Alt text.
    This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Alt text.
    This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Alt text.
    This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.

    The navy color theme is set on the element which wraps the card variant teaser.

    The black color theme is set on the element which wraps the card variant teaser.

    A navy gradient is set on the element which wraps the card variant teaser.

    A custom (teal-wine) gradient is set on the element which wraps the card variant teaser.

    Twig
    {% include '@bolt-components-teaser/teaser.twig' with {
      layout: 'horizontal',
      variant: 'card',
      border_radius: 'large',
      spacing: 'medium',
      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 Card Clickability And Hover Effect The card variant teaser can have entire card clickable which on hover, the card will animate with a rising effect.
    Important Notes: When we use the headline.link_attributes the whole card is clickable and has rising effect on hover. Don't add any clickable elements to the description part of the card teaser because they will not be clickable. When we use theheadline prop without link_attributes, there's no whole card clickability and the card teaser doesn't have rising effect on hover. You can add interactive elements like links to the card teaser desciption.content.
    Demo

    Entire card clickability, with hover effect.

    No entire card clickability, without hover effect.

    Twig
    {% include '@bolt-components-teaser/teaser.twig' with {
      variant: 'card',
      signifier: image,
      headline: {
        text: 'This is the teaser headline',
      },
      description: {
        content: 'It is possible to have <a href="https://www.google.com" target="_blank" rel="noopener">a link here</a> when the headline is not a link.',
      },
    } only %}
    HTML
    Not available in plain HTML. Please use Twig.

    teaser no aspect ratio

    Teaser No Aspect Ratio Display the signifier with its original image dimensions with no predefined aspect-ratio.
    Important Notes: By default, teaser signifiers have predefined aspect ratios (16/9 or 1/1). If the no_aspect_ratio prop is set to true, the signifier will display in an aspect ratio based on the original image dimensions.
    Demo

    Regular teasers.

    Card variant teasers.

    Twig
    {% include '@bolt-components-teaser/teaser.twig' with {
      variant: 'card',
      no_aspect_ratio: true,
      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: [
          {
            content: 'Video',
          },
          {
            content: '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.

    teaser valign

    Teaser Vertical Alignment Control the vertical alignment of the teaser's signifier image.
    Important Notes: By default, the teaser signifier's vertical alignment is centered. With the valign prop, you can set the vertical alignment to 'start', 'center', or 'end'. This only applies to teasers that are set to “visual style → card”, “layout → horizontal”, and “signifier → image”.
    Demo

    Vertical alignment examples in card variant teasers.

    Alt text.
    Proin faucibus arcu quis ante. Phasellus tempus. Donec vitae sapien ut libero venenatis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus blandit leo ut odio.
    Alt text.
    Proin faucibus arcu quis ante. Phasellus tempus. Donec vitae sapien ut libero venenatis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus blandit leo ut odio.
    Alt text.
    Proin faucibus arcu quis ante. Phasellus tempus. Donec vitae sapien ut libero venenatis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus blandit leo ut odio.
    Twig
    {% include '@bolt-components-teaser/teaser.twig' with {
      variant: 'card',
      layout: 'horizontal',
      valign: 'start',
      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.

    text docs

    Text

    Pega branded typography system.

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

    Twig Usage
    {% set toc_items %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section One',
        url: '#section-one',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Two',
        url: '#section-two',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Three',
        url: '#section-three',
      } only %}
    {% endset %}
    {% include '@bolt-components-toc/toc.twig' with {
      header: 'This is the header',
      content: toc_items
    } only %}
    Schema
    Toc (toc.twig)
    Prop Name Description Type Default Value Option(s)
    attributes

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

    object
    header

    Renders a header for the table of contents. If not specified, the default value will be used and the header will be visually hidden but accessible to screen readers.

    string Table of Contents
    sticky

    When enabled, TOC will automatically use sticky positioning + add a top offset style based on the height of the header and/or any other sticky elements + the scroll_offset height (if defined),

    boolean
    variant

    Set the visual variant.

    string card
    • transparent or card
    scroll_offset

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

    integer
    content

    Generates toc items. Accepts @bolt-components-toc-item

    object
    Toc item (toc-item.twig)
    Prop Name Description Type Default Value Option(s)
    attributes

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

    object
    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

    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 url should match the id of the particular section container or section heading. When using plain HTML: To adhere to accessibility guidelines, always add aria-label attribute to the nav element with the Table of Contents header text as the value. If you decide to not have a Table of Contents header, it is recommended to still add a h2 heading with a c-bolt-toc__header--hidden class. This will hide the heading visually, but still will be accessible for screen readers.
    Demo
    Twig
    {% set toc_items %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section One',
        url: '#section-one',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Two',
        url: '#section-two',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Three',
        url: '#section-three',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Four',
        url: '#section-four',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Five',
        url: '#section-five',
      } only %}
    {% endset %}
    {% include '@bolt-components-toc/toc.twig' with {
      content: toc_items
    } only %}
    HTML
    <div class="c-bolt-toc">
      <nav aria-label="Table of Contents">
        <h2 class="c-bolt-toc__header c-bolt-toc__header--hidden">
          Table of Contents
        </h2>
        <ul class="c-bolt-toc__list">
          <li>
            <a href="#section-one" class="c-bolt-toc__item">
              Section One
            </a>
          </li>
          <li>
            <a href="#section-two" class="c-bolt-toc__item">
              Section Two
            </a>
          </li>
          <li>
            <a href="#section-three" class="c-bolt-toc__item">
              Section Three
            </a>
          </li>
        </ul>
      </nav>
    </div>

    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.
    Important Notes: When using plain HTML to make a Table Of Contents have a default active section, add a c-bolt-toc__item--current class to the desired Table of Content item.
    Demo
    Twig
    {% set toc_items %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section One',
        url: '#section-one',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Two',
        url: '#section-two',
        active: true
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Three',
        url: '#section-three',
      } only %}
    {% endset %}
    {% include '@bolt-components-toc/toc.twig' with {
      content: toc_items
    } only %}
    HTML
    <div class="c-bolt-toc">
      <nav aria-label="Table of Contents">
        <h2 class="c-bolt-toc__header c-bolt-toc__header--hidden">
          Table of Contents
        </h2>
        <ul class="c-bolt-toc__list">
          <li>
            <a href="#section-one" class="c-bolt-toc__item">
              Section One
            </a>
          </li>
          <li>
            <a href="#section-two" class="c-bolt-toc__item c-bolt-toc__item--current">
              Section Two
            </a>
          </li>
          <li>
            <a href="#section-three" class="c-bolt-toc__item">
              Section Three
            </a>
          </li>
        </ul>
      </nav>
    </div>

    toc header variations

    Visible Header A header for Table Of Contents can be created by passing plain text into the header prop.
    Important Notes: When using plain HTML: To adhere to accessibility guidelines, always add aria-label attribute to the nav element with the Table of Contents header text as the value. If you decide to not have a Table of Contents header, it is recommended to still add a h2 header with a c-bolt-toc__header--hidden class. This will hide the heading visually, but still will be accessible for screen readers.
    Demo
    Twig
    {% set toc_items %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section One',
        url: '#section-one',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Two',
        url: '#section-two',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Three',
        url: '#section-three',
      } only %}
    {% endset %}
    {% include '@bolt-components-toc/toc.twig' with {
      header: 'This is the header',
      content: toc_items
    } only %}
    HTML
    <div class="c-bolt-toc">
      <nav aria-label="This is the header">
        <h2 class="c-bolt-toc__header">
          This is the header
        </h2>
        <ul class="c-bolt-toc__list">
          <li>
            <a href="#section-one" class="c-bolt-toc__item">
              Section One
            </a>
          </li>
          <li>
            <a href="#section-two" class="c-bolt-toc__item">
              Section Two
            </a>
          </li>
          <li>
            <a href="#section-three" class="c-bolt-toc__item">
              Section Three
            </a>
          </li>
        </ul>
      </nav>
    </div>

    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.
    Important Notes: When using plain HTML to make a Table Of Contents transparent, add c-bolt-toc--variant-transparent class.
    Demo
    Twig
    {% set toc_items %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section One',
        url: '#section-one',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Two',
        url: '#section-two',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Three',
        url: '#section-three',
      } only %}
    {% endset %}
    {% include '@bolt-components-toc/toc.twig' with {
      header: 'This is the transparent variant',
      content: toc_items,
      variant: 'transparent',
    } only %}
    HTML
    <div class="c-bolt-toc c-bolt-toc--variant-transparent">
      <nav aria-label="This is the transparent variant">
        <h2 class="c-bolt-toc__header">
          This is the transparent variant
        </h2>
        <ul class="c-bolt-toc__list">
          <li>
            <a href="#section-one" class="c-bolt-toc__item c-bolt-toc__item--current">
              Section One
            </a>
          </li>
          <li>
            <a href="#section-two" class="c-bolt-toc__item">
              Section Two
            </a>
          </li>
          <li>
            <a href="#section-three" class="c-bolt-toc__item">
              Section Three
            </a>
          </li>
        </ul>
      </nav>
    </div>

    Sticky Scrolling

    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 prop scroll_offset is available to adjust the sticky placement in relation to other sticky elements on the same page. For plain HTML use a data attrbiute data-bolt-scroll-offset="{integer}", for example data-bolt-scroll-offset="20"
    Demo View full page demo
    Twig
    {% set toc_items %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section One',
        url: '#section-one',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Two',
        url: '#section-two',
      } only %}
      {% include '@bolt-components-toc/toc-item.twig' with {
        text: 'Section Three',
        url: '#section-three',
      } only %}
    {% endset %}
    {% include '@bolt-components-toc/toc.twig' with {
      header: 'Table of Contents',
      content: toc_items,
      sticky: true,
      scroll_offset: 20,
    } only %}
    HTML
    <div class="c-bolt-toc c-bolt-toc--sticky" data-bolt-scroll-offset="20">
      <nav aria-label="Table of Contents with a sticky position">
        <h2 class="c-bolt-toc__header">
          Table of Contents with a sticky position
        </h2>
        <ul class="c-bolt-toc__list">
          <li>
            <a href="#section-one" class="c-bolt-toc__item">
              Section One
            </a>
          </li>
          <li>
            <a href="#section-two" class="c-bolt-toc__item">
              Section Two
            </a>
          </li>
          <li>
            <a href="#section-three" class="c-bolt-toc__item">
              Section Three
            </a>
          </li>
        </ul>
      </nav>
    </div>

    tooltip docs

    Tooltip

    Floating label that briefly describes an element.

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

    Twig Usage
    {% include '@bolt-components-trigger/trigger.twig' with {
      content: 'This is a trigger'
    } only %}
    Schema
    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

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

    string
    target

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

    string _self
    • _blank, _self, _parent, _top, framename
    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, block, flex
    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 @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.

    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 @bolt/elements-button @bolt/elements-icon @bolt/lazy-queue fuse.js html-react-parser mousetrap react react-autosuggest

    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.

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

    Twig Usage
    {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
      content: image,
      video: {
        title: 'Video Title',
        duration: '4:55'
      }
    } only %}
    Schema
    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

    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 {
        content: '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.