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. |
{% include '@bolt-components-accordion/accordion.twig' with {
content: 'This is a accordion component.'
} only %}
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
|
|
icon_valign
|
Vertically align the accordion trigger content and trigger icon. |
string
|
center
|
|
scroll_offset
|
Additional offset for smooth scrolling, integer converted to pixel value. |
integer
| — |
|
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
|
|
npm install @bolt/components-accordion
{% 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 %}
single
prop to true
, it allows only one Accordion item to be opened at a time.
{% include '@bolt-components-accordion/accordion.twig' with {
content: items,
single: true,
} only %}
no_separator
prop to true
, it will remove the separator in between Accordion items.
{% include '@bolt-components-accordion/accordion.twig' with {
content: items,
no_separator: true,
} only %}
box_shadow
prop to true
, it will create a box shadow around the accordion.
{% include '@bolt-components-accordion/accordion.twig' with {
content: items,
box_shadow: true,
} only %}
spacing
prop to none
, xsmall
, small
, medium
, or large
, it applies the appropriate inset spacing for each accordion item. The default is medium
.
{% include '@bolt-components-accordion/accordion.twig' with {
content: items,
spacing: 'xlarge',
} only %}
icon_valign
prop to top
or center
, it will vertically align the trigger and the icon accordingly. The default is center
.
{% include '@bolt-components-accordion/accordion.twig' with {
content: items,
icon_valign: 'top',
} only %}
open
prop to true
on any accordion item to display the content of that item on page load.
{% 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 %}
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.
{% 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 %}
{% 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 %}
{% include '@bolt-components-accordion/accordion.twig' with {
content: items,
scroll_offset: 5,
} only %}
trigger
prop of the accordion-item
.
{% 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 %}
accordion-item
props.
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
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
|
|
max_items_per_row
|
The max amount of items (action blocks) to be displayed in one row. |
number
|
6
|
|
valign
|
Vertical alignment of the content inside each action block. |
string
|
start
|
|
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
| — |
|
maxItemsPerRow
(deprecated) |
Use max_items_per_row prop instead. |
— | — |
|
align
(deprecated) |
Use valign prop instead. |
— | — |
|
border
(deprecated) |
Use borderless prop instead. |
— | — |
|
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 |
— | — |
|
npm install @bolt/components-action-blocks
none
themed container.white
themed container.black
themed container.gray-xlight
themed container.navy-dark
themed container.navy
themed container.navy-light
themed container.teal
themed container.yellow
themed container.orange
themed container.pink
themed container.wine
themed container.berry
themed container.violet
themed container.{% 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>
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
|
|
fill
|
Type of fill to use for the overlay. |
string
|
solid
|
|
focal_point
|
Point where the background gradient highlight should originate. |
object
| — |
|
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
| — |
|
shape_group
|
Add a Bolt Background Shapes group. |
string
|
none
|
|
shape_alignment
|
Alignment of shape group. |
string
|
right
|
|
npm install @bolt/components-background
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.
{% include '@bolt-components-background/background.twig' with {
opacity: 'medium',
items: [
image
]
} only %}
valign
options.
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.
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.
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.
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.
{% 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 %}
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.
{% 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 %}
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.
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.
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.
{% include '@bolt-components-background/background.twig' with {
shape_group: 'A',
shape_alignment: 'left'
} only %}
All themes are supported. A few examples are shown below.
This background has a solid
fill and the surrounding theme is t-bolt-white
This background has a solid
fill and the surrounding theme is t-bolt-black
This background has a solid
fill and the surrounding theme is t-bolt-navy-dark
<div class="t-bolt-navy-dark">
{% include '@bolt-components-background/background.twig' with {
fill: 'solid',
} only %}
</div>
focal_point
sets the horizontal and vertical alignment of the gradient (if applicable).
gradient
fill and the focal point is set to horiztonal: left
and vertical: top
gradient
fill and the focal point is set to horiztonal: left
and vertical: bottom
{% include '@bolt-components-background/background.twig' with {
fill: 'gradient',
focal_point: {
vertical: 'top',
horizontal: 'left',
},
} only %}
solid
and gradient
fill options.
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.
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.
{% 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 %}
opacity: none
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: light
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: medium
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: heavy
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: full
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.
{% include '@bolt-components-background/background.twig' with {
opacity: 'medium',
items: [
image
]
} only %}
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.
{% 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 %}
{% include '@bolt-components-background-shapes/background-shapes.twig' with {
shapeGroup: 'B'
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
shapeGroup
|
The shapeGroup to use to build the shapes layout. |
string
|
A
|
|
npm install @bolt/components-background-shapes
{% include '@bolt-components-band/band.twig' with {
content: 'This is a band.',
} only %}
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
| — |
|
tag
|
Controls the semantic HTML tag to use for the band's content. |
string
|
div
|
|
valign
|
Controls the internal vertical alignment of the band's content. |
string
|
center
|
|
size
|
Controls the vertical spacing of the band. |
string
|
medium
|
|
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
|
|
row_gutter
(deprecated) |
Please use |
— | — |
|
content_row_start
(deprecated) |
Please use |
— | — |
|
items
(deprecated) |
Please use |
— | — |
|
fullBleed
(deprecated) |
This prop has been renamed. Please use |
— | — |
|
contentTag
(deprecated) |
This prop is no longer needed. |
— | — |
|
npm install @bolt/components-band
Note: turn off full bleed option if you don't want the band to span the full width of the page.
This band spans the full width of the page, it ignores the spacing of its parent container.
This band only takes up the available space within its parent container, it accounts for the spacing of its parent container.
This Is a Subheadline
This Is a Subheadline
This Is a Subheadline
Note: please convert the deprecated items prop to the new pinned_content prop.
{% 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 %}
{% include '@bolt-components-band/band.twig' with {
content: content,
pinned_content: {
upper: [
{
content: pinned_share,
align: 'end',
},
],
}
} only %}
This Is an Eyebrow
This Is a Subheadline
This is a paragraph.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.'
} only %}
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
|
|
weight
|
Text weight. |
string
|
semibold
|
|
align_items
|
Aligns items left, center, or right. |
string
|
start
|
|
border
|
Add a border. |
string
|
vertical
|
|
indent
|
Indent text. |
boolean
|
false
|
|
no_quotes
|
Hide quotation marks. |
boolean
|
false
|
|
logo
|
Add a logo. |
object
| — |
|
author
|
Author of the quote. |
object
| — |
|
npm install @bolt/components-blockquote
This is a blockquote component.
This is a blockquote component.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
} only %}
![]()
This is a blockquote component with
logo.position
set totop
(default).
This is a blockquote component with
logo.position
set tobottom
.![]()
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
logo: {
content: paypal_logo,
position: 'bottom',
}
} only %}
This is a blockquote component with
size
set tomedium
.
This is a blockquote component with
size
set tolarge
.
This is a blockquote component with
size
set toxlarge
.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
size: 'large',
} only %}
This is a blockquote component with
weight
set tosemibold
.
This is a blockquote component with
weight
set tobold
.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
weight: 'bold',
} only %}
This is a blockquote component with
align_items
set tostart
.
This is a blockquote component with
align_items
set tocenter
.
This is a blockquote component with
align_items
set toend
.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
align_items: 'end',
} only %}
This is a blockquote component with
border
set tovertical
.
This is a blockquote component with
border
set tohorizontal
.
This is a blockquote component with
border
set tonone
.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
border: 'horizontal',
} only %}
This is a blockquote component with
indent
set tofalse
.
This is a blockquote component with
indent
set totrue
.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
indent: true,
} only %}
This is a blockquote component with
no_quotes
set tofalse
.
This is a blockquote component with
no_quotes
set totrue
.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
no_quotes: true,
} only %}
This is a blockquote component with
--c-bolt-blockquote-max-width
set to44rem
. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.
This is a blockquote component with
--c-bolt-blockquote-max-width
set to400px
. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.
This is a blockquote component with
--c-bolt-blockquote-max-width
set to100%
. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.
{% include '@bolt-components-blockquote/blockquote.twig' with {
content: 'This is a blockquote component.',
attributes: {
style: '--c-bolt-blockquote-max-width: 100%;',
}
} only %}
// 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 %}
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
|
|
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
|
|
border_radius
|
Controls the border-radius of the card-replacement. |
string
|
small
|
|
spacing
|
Controls the spacing of the card-replacement. |
string
|
medium
|
|
theme
|
Controls the theme of the individual card-replacement. Note: the values xlight, light, dark, xdark, xxdark are deprecated. |
string
|
none
|
|
link
|
Providing a link will make the whole card-replacement clickable. |
object
| — |
|
media
|
Media section of the card-replacement, accepts either image and video, or custom content. |
object
| — |
|
body
|
Body section of the card-replacement, accepts pre-configured eyebrow, headline, and paragraph or custom content. |
object
| — |
|
actions
|
Actions section of the card-replacement, accepts buttons. |
array
| — |
|
content
|
Content will override media, body, and actions props. Use this to build a completely cuztomized card-replacement. |
string
, array
, object
|
— |
|
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
| — |
|
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 |
boolean
| — |
|
npm install @bolt/components-card-replacement
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 %}
This is an eyebrow
This is a paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
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%',
}
}
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 paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
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 paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
body: {
content: customContentWithGrid,
}
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 paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
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 paragraph. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
Each card-replacement can be individually theme, only when the theme is set to none should the card-replacement background be semi-transparent.
This card doesn't have a link.
This card has a url, which makes the whole card clickable, but you can still have text links in the body (like this) or the action button to link somewhere else if needed.
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.
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.
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.
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
This is an eyebrow
This is a paragraph.
This is an eyebrow
This is a paragraph.
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 |
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
<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>
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>
<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>
<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>
Recommended | Not Recommended |
---|---|
Encourage Exploration: Use carousels 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 carousels for essential content; it might be overlooked. |
Series Introduction: Use the carousel 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 carousel 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 Carousels: Nesting a carousel within another carousel can make navigation a confusing, disorienting experience for the user. |
{% include '@bolt-components-carousel/carousel.twig' with {
slides: [
'Slide 1',
'Slide 2',
'Slide 3',
]
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-carousel> tag. |
object
| — |
|
slides
|
Array of content to include in the carousel. Note: each slide gets wrapped with a |
array
| — |
|
slides_per_view
|
Controls the number of slides to be shown at once. Note: the value auto is deprecated, please be explicit. |
string
|
1
|
|
slides_per_group
|
Controls the number of slides to be swiped at once. |
string
|
auto
|
|
space_between
|
Controls the horizontal spacing between each slide. |
string
|
medium
|
|
nav_button_position
|
Positions the previous and next buttons to either inside or outside of the carousel container. |
string
|
inside
|
|
overflow
|
Makes overflowing carousel slides visible. |
boolean
|
false
|
|
no_nav_buttons
|
Visually hide the previoius and next nav buttons. |
boolean
|
false
|
|
autoplay
|
Allows the carousel to automatically rotate through its slides until the user interacts with it. |
boolean
|
false
|
|
free_scroll
|
Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar. |
boolean
|
false
|
|
prev_slide_message
|
Accessible label for previous button. |
string
|
Previous slide
|
|
next_slide_message
|
Accessible label for next button. |
string
|
Next slide
|
|
first_slide_message
|
Accessible label for the previous button when the carousel is on the first slide. |
string
|
This is the first slide
|
|
last_slide_message
|
Accessible label for previous button when the carousel is on the last slide. |
string
|
This is the last slide
|
|
pagination_bullet_message
|
Accessible label for a single pagination bullet. |
string
|
Go to slide {{index}}
|
|
max_slides_per_view
|
- [1
~
4]
Limits the maximum number of slides that can display at any screen size. Combine this with the |
integer
|
4
|
|
no_pagination
|
Removes the pagination. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews). |
boolean
|
false
|
|
no_scrollbar
|
Removes the scrollbar. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews). |
boolean
|
false
|
|
no_min_width
|
Disables the slide min width logic. Typically not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews). |
boolean
|
false
|
|
mode
|
Switches between the default carousel mode and the image gallery mode. |
string
|
default
|
|
slide_to_clicked_slide
|
Set to true and click on any slide will produce transition to this slide. |
boolean
|
false
|
|
loop
|
Enables continuous loop mode.Not: the loop option is temporarily disabled and will be re-enabled in a future Bolt release. |
boolean
|
false
|
|
npm install @bolt/components-carousel
When using the basic carousel component, it is recommended to pass the same type of content for each slide of the carousel, and make sure each piece of content have similar dimensions.
This Is an Eyebrow
This Is an Eyebrow
This Is an Eyebrow
This Is an Eyebrow
This Is an Eyebrow
Slide 1
Slide 2
Slide 3
Slide 4
You buy yourself a tape recorder, you just record yourself for a whole day. I think you’re going to be surprised at some of your phrasing.
There’s always money in the banana stand.
I don’t understand the question and I won’t respond to it.
Use specific combination of props to create different kinds of advanced carousel.
Customer engagement meets intelligent automation.
Every enterprise success story starts with the right technology.
<bolt-carousel>
in the markup to make it render. For each slide, you must use <bolt-carousel-slide>
to wrap around the slide content.
<bolt-carousel>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
</bolt-carousel-slide>
</bolt-carousel>
<bolt-carousel>
element. Use unique combinations to customize a carousel to your liking.
<bolt-carousel nav-button-position="inside" slides-per-view=2 loop autoplay>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-xlight">Slide 4</div>
</bolt-carousel-slide>
</bolt-carousel>
{% include '@bolt-components-chip/chip.twig' with {
content: 'This is a chip component.'
} only %}
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
|
|
border_radius
|
Controls the border radius of the chip. |
string
|
full
|
|
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
| — |
|
npm install @bolt/components-chip
{% include '@bolt-components-chip/chip.twig' with {
content: 'This is a chip.'
} only %}
<div class="c-bolt-chip">
This is a chip.
</div>
{% include '@bolt-components-chip/chip.twig' with {
content: 'Size Medium Chip',
size: 'medium',
} only %}
<div class="c-bolt-chip c-bolt-chip--size-medium">
Size Medium Chip
</div>
{% include '@bolt-components-chip/chip.twig' with {
content: 'Border Radius None Chip',
border_radius: 'none',
} only %}
<div class="c-bolt-chip c-bolt-chip--border-radius-none">
Border Radius None Chip
</div>
<img>
element is also acceptable.
// 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 %}
<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>
// 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 %}
<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>
a
element or the button
element is being used, the proper HTML attributes should be passed.
{% include '@bolt-components-chip/chip.twig' with {
content: 'Linked chip.',
attributes: {
href: 'https://google.com',
target: '_blank',
rel: 'noopener'
}
} only %}
<a href="https://google.com" target="_blank" rel="noopener" class="c-bolt-chip">
Linked chip.
</a>
{% include '@bolt-components-chip/chip.twig' with {
content: 'Navy Chip',
attributes: {
class: 't-bolt-navy',
}
} only %}
<div class="c-bolt-chip t-bolt-navy">
Navy Chip
</div>
{% 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 %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
items
|
An array of Chips. |
array
| — |
|
size
|
Sets the size used for all of the chips (if size isn't specified on the individual chip) |
string
| — |
|
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 |
array
| — |
|
expanded
|
Shows truncated items. |
boolean
|
false
|
|
npm install @bolt/components-chip-list
{% 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 %}
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
|
|
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
|
|
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
| — |
|
npm install @bolt/components-code-snippet
import { props } from '@bolt/core/utils';
import { props } from '@bolt/core/utils';
{% 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 %}
<div class="c-bolt-code-snippet" data-lang="js" data-mode="light">
<pre><code>import { props } from '@bolt/core/utils';</code></pre>
</div>
.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 %}
{% 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 %}
<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><p>Hello World!</p></code></pre>
</div>
<div class="c-bolt-code-snippet" data-lang="twig" data-mode="light">
<pre><code>{% include '@bolt-components-banner/banner.twig' with {
content: 'This is the banner content.'
} only %}</code></pre>
</div>
import { props } from '@bolt/core/utils';
import { props } from '@bolt/core/utils';
{% 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 %}
<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>
$ echo "Hello World"
{% 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 %}
<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>
.my-css {
display: block;
}
.my-css {
display: block;
}
.my-css {
display: block;
}
{% 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 %}
<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>
{% 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 %}
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
| — |
|
previous
|
Set the previous page link. |
object
| — |
|
next
|
Set the next page link. |
object
| — |
|
npm install @bolt/components-content-pagination
{% 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 %}
{% include '@bolt-components-copy-to-clipboard/copy-to-clipboard.twig' with {
text_to_copy: 'https://boltdesignsystem.com'
} only %}
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
|
— |
|
npm install @bolt/components-copy-to-clipboard
{% 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 %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
deviceName
|
Name of the device. |
string
| — |
|
color
|
Device color. |
string
| — |
|
orientation
|
Device orientation. |
string
| — |
|
content
|
Renderable content (i.e. a string, render array, or included pattern) to display within the device. Usually represents an image or video. |
any
| — |
|
npm install @bolt/components-device-viewer
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'
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. |
{# 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 %}
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
|
|
spacing
|
Controls the inset spacing of the dialog header, body, and footer. |
string
|
medium
|
|
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
|
|
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
| — |
|
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
| — |
|
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
| — |
|
npm install @bolt/components-dialog
{# 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 %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
width: 'full',
attributes: {
id: 'dialog-width-1'
},
} only %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
spacing: 'large',
attributes: {
id: 'dialog-spacing-1'
},
} only %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
persistent: true,
attributes: {
id: 'dialog-persistent-1'
},
} only %}
{% 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 %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
attributes: {
class: 't-bolt-navy',
id: 'dialog-theme-1',
},
} only %}
{# 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 %}
{# 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
icon_size
|
Customize the size of the input icon used |
— |
medium
|
|
npm install @bolt/components-form
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
{% set form_children %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Employees or contractors',
displayType: 'floating',
attributes: {
for: 'search',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
search_button_label: 'Search people',
attributes: {
placeholder: 'Employees or contractors',
type: 'search',
id: 'search',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% include '@bolt-components-form/form.twig' with {
children: form_children
} only %}
(all fields are required)
(all fields are required)
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
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
|
|
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
| — |
|
weight
|
Set the weight of the headline. |
string
|
regular
|
|
style
|
Set the style fo the headline. |
string
|
normal
|
|
size
|
Set the size of the headline. |
string
|
medium
|
|
autoshrink
|
Automatically shrink the font size used in the |
boolean
|
true
|
|
transform
|
Text transformation. |
string
| — |
|
icon
|
Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by |
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
| — |
|
numberText
(deprecated) |
Use number_text instead. |
— | — |
|
numberColor
(deprecated) |
Use number_color instead. |
— | — |
|
url
(deprecated) |
Use link_attributes instead. |
— | — |
|
target
(deprecated) |
Use link_attributes instead. |
— | — |
|
npm install @bolt/components-headline
This text is <p> and medium size.
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
before
after
Left
Icon PositionRight
Icon Position{% include '@bolt-components-headline/headline.twig' with {
text: 'Example numbered headline (w/o number_color)',
number_text: 7,
} only %}
{% include '@bolt-components-headline/headline.twig' with {
text: 'Example numbered headline (w/ number_color)',
number_text: 42,
number_color: 'orange'
} only %}
4 Numbered Eyebrow
2 Numbered Subheadline (xxlarge)
3 Numbered Text
By setting the number_color
prop to navy
, violet
, teal
, or orange
, you can choose the background color of the Headline Number.
If you don't specify a number_color
, the current theme's colors will be used instead.
{% include '@bolt-components-image/image.twig' with {
src: '/src/images/turtle.jpg',
alt: 'A Turtle'
} only %}
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 |
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 |
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
| — |
|
zoom
(deprecated) |
Support will be dropped along with device viewer magnify |
boolean
|
false
|
|
npm install @bolt/components-image
{% 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 %}
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
|
Content of the info section. |
any
| — |
|
details_link
|
Render a link or button that leads to more details. |
object
| — |
|
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 |
boolean
|
true
|
|
npm install @bolt/components-info-section
{% 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 %}
{% 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 %}
{% 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 %}
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
|
|
spacing
|
Controls the spacing around the modal container. |
string
|
medium
|
|
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 |
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 |
string
| — |
|
theme
|
Controls the color theme of the modal container. Note: the values xlight, light, dark, xdark, xxdark are deprecated. |
string
|
white
|
|
scroll
|
Controls the scrolling area. |
string
|
container
|
|
uuid
|
Unique ID for modal, randomly generated if not provided. |
string
| — |
|
npm install @bolt/components-modal
This is the modal container's header.
This is the modal container's body.
This is the modal container's footer.
width
prop. The default is set to optimal
.
{% 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 %}
spacing
prop. The default is set to medium
.
{% 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 %}
theme
prop. The default is set to white
.
{% 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 %}
scroll
prop. The default is set to container
.
{% 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 %}
{# 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 %}
data-bolt-modal-target
data attribute to a trigger element, or by calling the Modal's show()
and hide()
methods directly via JavaScript.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.
data-bolt-modal-target
data attribute.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.
show()
method.hide()
method will be called when you click the button below.<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>
<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.width
is set to auto
and image has width
attribute defined.This is the caption for the image.
width
is set to auto
and image has width
attribute defined.This is the caption for the image.
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-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.full_bleed
prop must be set to false
.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.
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 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.
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).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.
(all fields are required)
<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.
<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>
header
, default
, footer
. To pass content to either the header or footer, slot
must be defined.
<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>
<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>
{% include '@bolt-components-notifications/notifications.twig' with {
header: {
switch_button: header_switch_button,
actions: header_actions,
},
content: content,
footer: {
content: footer_content,
},
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to the outermost container. |
object
| — |
|
header
|
object
| — |
|
|
footer
|
object
| — |
|
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
| — |
|
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
| — |
|
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
| — |
|
|
read
|
boolean
|
false
|
|
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
| — |
|
npm install @bolt/components-notifications
{% 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 %}
{% 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 %}
{% 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 %}
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
| — |
|
items
*
|
All items can be simple text or |
array
| — |
|
items
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
text
|
string
| — |
|
|
contentItems
|
Passes to |
object
| — |
|
npm install @bolt/components-ol
Theme: xlight
Theme: light
Theme: dark
Theme: xdark
Theme: medium
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>
.
<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>
Theme: xlight
Theme: light
Theme: dark
Theme: xdark
{% 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 %}
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
| — |
|
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
|
|
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
| — |
|
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
| — |
|
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
| — |
|
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
| — |
|
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
|
|
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
| — |
|
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
|
|
npm install @bolt/components-page-header
Pega | View |
---|---|
Pega (logged out) | View |
Academy | View |
Collaboration Center | View |
Community | View |
Documentation | View |
Partners | View |
PegaWorld | View |
SalesHub | View |
// 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 %}
{% 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 %}
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
|
|
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
| — |
|
previous
|
A link object for the previous page (e.g. if on page 3, this links to page 2) |
object
| — |
|
next
|
A link object for the next page (e.g. if on page 3, this links to page 4) |
object
| — |
|
last
|
A link object for the last page |
object
| — |
|
previousText
|
Text to be displayed for the previous anchor |
string
|
Previous
|
|
nextText
|
Text to be displayed for the next anchor |
string
|
Next
|
|
npm install @bolt/components-pagination
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.
In this case, you must set the align prop to be start
so it is not centered within the cell.
Something on the right
{% 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 %}
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
|
|
npm install @bolt/components-panel
{% 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 %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed odio morbi quis commodo.
{% include '@bolt-components-panel/panel.twig' with {
signifier: signifier,
title: title,
content_header: content_header,
content_main: content,
content_footer: content_footer,
} only %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{% 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 %}
{% set slides %}
{% include '@bolt-components-slideshow/slideshow-slide.twig' with {
content: panel,
} only %}
...
{% endset %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
...
} only %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: 'This is the popover trigger',
content: 'This is the popover content.'
} only %}
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
|
|
trigger_event
|
Controls the event that triggers the popover to show. |
string
|
click
|
|
spacing
|
Controls the spacing around the popover content. |
string
|
small
|
|
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
|
|
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
| — |
|
npm install @bolt/components-popover
{% 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 %}
<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>
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]).
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
placement: 'auto',
boundary: '.js-target-container'
} only %}
<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>
spacing
prop.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
spacing: 'medium',
} only %}
<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>
--c-bolt-popover-bubble-width
CSS custom property via inline style.
This Is an Eyebrow
This is a paragraph.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
attributes: {
style: '--c-bolt-popover-bubble-width: min(80vw, 500px);'
},
} only %}
<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>
theme
prop.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
theme: 'navy',
} only %}
<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>
trigger_event
prop.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
trigger_event: 'hover', // Default is 'click'.
content: content,
} only %}
<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>
{% 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 %}
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
| — |
|
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
| — |
|
stats
|
Render stats with text labels. |
array
| — |
|
full_bleed
|
Set the profile to expand the full viewport. Use this prop for building a profile header for a particular page. |
boolean
|
false
|
|
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
| — |
|
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
| — |
|
npm install @bolt/components-profile
{% 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&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 %}
{% 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&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 %}
{% include '@bolt-components-progress-bar/progress-bar.twig' with {
value: 65,
} only %}
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
|
|
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
|
|
min
|
The minimum value. Note: this prop is reserved for advanced usage. |
number
|
0
|
|
npm install @bolt/components-progress-bar
<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>
<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>
<bolt-progress-bar>
in the markup to make it render.
<bolt-progress-bar value=65></bolt-progress-bar>
<bolt-progress-bar>
with the properties specified in the schema.
<bolt-progress-bar value=7 value-format="step" max=12 animated></bolt-progress-bar>
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. |
{% set slides %}
{% include '@bolt-components-slideshow/slideshow-slide.twig' with {
content: 'content',
} only %}
{% endset %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides
} only %}
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
|
|
slides_per_group
|
Controls the number of slides to be swiped at once. |
string
|
auto
|
|
space_between
|
Controls the horizontal spacing between each slide. |
string
|
medium
|
|
nav_button_position
|
Positions the previous and next buttons to either inside or outside of the carousel container. |
string
|
inside
|
|
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
|
|
npm install @bolt/components-slideshow
{% set slides %}
{% include '@bolt-components-slideshow/slideshow-slide.twig' with {
content: 'content',
} only %}
...
{% endset %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
slides_per_view: '3',
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
slides_per_group: '2',
slides_per_view: '3',
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
space_between: 'large',
slides_per_view: '3',
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
free_scroll: true,
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
overflow: true,
space_between: 'small',
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
autoplay: true,
} only %}
{% include '@bolt-components-slideshow/slideshow.twig' with {
content: slides,
slides_per_view: '3',
nav_button_position: 'outside',
} only %}
{% include '@bolt-components-stack/stack.twig' with {
content: 'This is one stack.'
} only %}
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
|
|
content
|
Content of the stack. |
string
, array
, object
|
— |
|
npm install @bolt/components-stack
{% embed '@bolt-components-sticky/sticky.twig' %}
{% block sticky_content %}
// Sticky content
{% endblock %}
{% endembed %}
npm install @bolt/components-sticky
{% 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 %}
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 |
object
| — |
|
rows
*
|
Generates an array of rows, each can contain an array of |
array
| — |
|
footer
|
Generates a table footer, can contain an array of |
object
| — |
|
format
|
Display either a regular table or a more complex numeric table. |
string
|
regular
|
|
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
| — |
|
npm install @bolt/components-table
R1C1 | R1C2 | R1C3 |
R2C1 | R2C2 | R2C3 |
R3C1 | R3C2 | R3C3 |
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
R2C1 | R2C2 | R2C3 |
R3C1 | R3C2 | R3C3 |
Row 1 | R1C1 | R1C2 | R1C3 |
---|---|---|---|
Row 2 | R2C1 | R2C2 | R2C3 |
Row 3 | R3C1 | R3C2 | R3C3 |
Column 1 | Column 2 | Column 3 | |
---|---|---|---|
Row 1 | R1C1 | R1C2 | R1C3 |
Row 2 | R2C1 | R2C2 | R2C3 |
Row 3 | R3C1 | R3C2 | R3C3 |
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 |
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 |
Numeric format is recommended for a table with numbers only, such as box scores.
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 |
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 |
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 |
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
|
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
|
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 |
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 |
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 |
Item number | Description | Assemblies | |
---|---|---|---|
Build 2.0.1.0 — SR-49969 |
SR-49941 | This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. |
OpenSpan.UpdaterService.Remoting.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.Git.dll OpenSpan.VersionFinder.exe OpenSpan.UpdaterService.exe OpenSpan.Updater.X509tool.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.Initializer.exe |
Build 2.0.1.0 — SR-49969 | SR-44869 |
![]() |
OpenSpan.Updater.Git.dll |
Build 1.1.360 — SR-44891 | SR-43163 | This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated. |
![]() |
SR-44850 | This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. | ManagedOpenSsl.dll |
<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>
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>
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>
Item number | Description | Assemblies | |
---|---|---|---|
|
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>
<caption>
tag to add a caption to your table.
R1C1 | R1C2 | R1C3 |
R2C1 | R2C2 | R2C3 |
R3C1 | R3C2 | R3C3 |
<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>
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. |
{% 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 %}
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
| — |
|
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
|
|
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
|
|
label_spacing
|
Set label spacing. |
string
|
small
|
|
panel_spacing
|
Set panel spacing. |
string
|
small
|
|
inset
|
Controls spacing placement on tab labels and panels. |
string
|
auto
|
|
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
| — |
|
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
| — |
|
npm install @bolt/components-tabs
vertical_tabs
prop, when tabs desired placement should be to the left or right. Please note that below 600px vertical tabs become horizontal.
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.
auto
, horizontal tabs.on
, horizontal tabs.off
, horizontal tabs.auto
, vertical tabs.on
, vertical tabs.off
, vertical tabs.label_spacing
and panel_spacing
props, in conjunction with inset
, to set spacing around tab labels and panels. See Inset variations page for more on the inset
prop.
label_spacing
to set spacing around (or between) tab labels.
small
auto
on
off
medium
auto
on
off
panel_spacing
to set spacing around tab panels.
none
auto
on
off
small
auto
on
off
medium
auto
on
off
label_spacing
to set spacing around (or between) tab labels.
small
auto
on
off
medium
auto
on
off
panel_spacing
to set spacing around tab panels.
none
auto
on
off
small
auto
on
off
medium
auto
on
off
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.align: 'start'
when vertical tabs are used, or be sure that all of your tab content is the same height.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 |
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 |
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 |
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 |
selected_tab
prop to pre-selected a tab by number. To select the second tab, set selected_tab
to 2
. Defaults to first.
inset: 'off',
label_spacing: 'medium',
panel_spacing: 'medium',
Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.
Blow away your customer’s expectations - engage each individual one-to-one, letting the AI constantly adapt to their needs.
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 Actionjs-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.
<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".
<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>
<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>
<bolt-tab-panel>
by setting selected-tab
on <bolt-tabs>
or by adding selected
to a single <bolt-tab-panel>
.
<!-- 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>
<bolt-text>
This is text.
</bolt-text>
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
|
|
display
|
Inline text or a block of text. |
string
|
block
|
|
color
|
Text color in context of theme colors. |
string
|
theme-body
|
|
align
|
Text alignment. |
string
|
inherit
|
|
opacity
|
Opacity level. |
number
|
100
|
|
quoted
|
Quoted text. |
boolean
|
false
|
|
line-height
|
Line height in context of the typographic design. |
string
|
regular
|
|
letter-spacing
|
Letter spacing in context of the typographic design. |
string
|
regular
|
|
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
|
|
font-family
|
Font family in context of the typographic design. |
string
|
body
|
|
font-size
|
Font size in context of the typographic design. |
string
|
medium
|
|
font-weight
|
Font weight in context of the typographic design. |
string
|
regular
|
|
font-style
|
Emphasized text. |
string
|
regular
|
|
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 |
array
| — |
|
npm install @bolt/components-text
<bolt-text>
in the markup to make it render.
<bolt-text>
This is text.
</bolt-text>
<bolt-text>
allows for separation of semantics and visual. Using a semantically correct tag will not affect the appearance of the text.
<bolt-text tag="h1">
This text has its tag prop defined as: h1
</bolt-text>
<bolt-text tag="h2">
This text has its tag prop defined as: h2
</bolt-text>
<bolt-text tag="h3">
This text has its tag prop defined as: h3
</bolt-text>
<bolt-text tag="h4">
This text has its tag prop defined as: h4
</bolt-text>
<bolt-text tag="h5">
This text has its tag prop defined as: h5
</bolt-text>
<bolt-text tag="h6">
This text has its tag prop defined as: h6
</bolt-text>
<bolt-text tag="p">
This text has its tag prop defined as: p
</bolt-text>
<bolt-text tag="div">
This text has its tag prop defined as: div
</bolt-text>
<bolt-text tag="span">
This text has its tag prop defined as: span
</bolt-text>
<bolt-text>
can be defined as a paragraph of text (block display) or a piece of inline text (inline display).
<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>
<bolt-text>
can be colored accordingly based on theming. It can either take on a particular theme's headline color or body text color.
<bolt-text color="theme-headline" font-weight="bold" font-size="large">
This text has its color prop defined as: theme-headline
</bolt-text>
<bolt-text color="theme-body" font-weight="bold" font-size="large">
This text has its color prop defined as: theme-body
</bolt-text>
<bolt-text>
can be aligned horizontally. This only applies if display is set to block.
<bolt-text display="block" align="inherit">
This text has its align prop defined as: inherit
</bolt-text>
<bolt-text display="block" align="start">
This text has its align prop defined as: start
</bolt-text>
<bolt-text display="block" align="center">
This text has its align prop defined as: center
</bolt-text>
<bolt-text display="block" align="end">
This text has its align prop defined as: end
</bolt-text>
<bolt-text>
can be adjusted in terms of opacity. The options are synced with Bolt's opacity scale.
<bolt-text opacity="100">
This text has its opacity prop defined as: 100
</bolt-text>
<bolt-text opacity="80">
This text has its opacity prop defined as: 80
</bolt-text>
<bolt-text opacity="60">
This text has its opacity prop defined as: 60
</bolt-text>
<bolt-text opacity="40">
This text has its opacity prop defined as: 40
</bolt-text>
<bolt-text opacity="20">
This text has its opacity prop defined as: 20
</bolt-text>
<bolt-text>
can be turned into a quote by using the quoted
boolean prop.
<bolt-text quoted>
This text is quoted.
</bolt-text>
<bolt-text headline quoted>
This headline text is also quoted.
</bolt-text>
<bolt-text>
has a few options for leading (line-height). Leading can be adjusted for legibility. The default is regular.
<bolt-text line-height="tight">
This text has<br>
its line-height<br>
prop defined as:<br>
tight
</bolt-text>
<bolt-text line-height="regular">
This text has<br>
its line-height<br>
prop defined as:<br>
regular
</bolt-text>
<bolt-text line-height="loose">
This text has<br>
its line-height<br>
prop defined as:<br>
loose
</bolt-text>
<bolt-text>
has a few options for the spacing in between letters. It can be adjusted for legibility. The default is regular.
<bolt-text letter-spacing="narrow">
This text has its letter-spacing prop defined as: narrow
</bolt-text>
<bolt-text letter-spacing="regular">
This text has its letter-spacing prop defined as: regular
</bolt-text>
<bolt-text letter-spacing="wide">
This text has its letter-spacing prop defined as: wide
</bolt-text>
<bolt-text>
has a few options for transforming letter case. It can be adjusted for legibility. The default is regular.
<bolt-text text-transform="regular">
This text has its text-transform prop defined as: regular
</bolt-text>
<bolt-text text-transform="uppercase">
This text has its text-transform prop defined as: uppercase
</bolt-text>
<bolt-text text-transform="lowercase">
This text has its text-transform prop defined as: lowercase
</bolt-text>
<bolt-text text-transform="capitalize">
This text has its text-transform prop defined as: capitalize
</bolt-text>
<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.
<bolt-text font-family="headline">
This text has its font-family prop defined as: headline
</bolt-text>
<bolt-text font-family="body">
This text has its font-family prop defined as: body
</bolt-text>
<bolt-text font-family="code">
This text has its font-family prop defined as: code
</bolt-text>
<bolt-text>
has font-size options to indicate information hierarchy.
<bolt-text font-size="xsmall">
This text has its font-size prop defined as: xsmall
</bolt-text>
<bolt-text font-size="small">
This text has its font-size prop defined as: small
</bolt-text>
<bolt-text font-size="medium">
This text has its font-size prop defined as: medium
</bolt-text>
<bolt-text font-size="large">
This text has its font-size prop defined as: large
</bolt-text>
<bolt-text font-size="xlarge">
This text has its font-size prop defined as: xlarge
</bolt-text>
<bolt-text font-size="xxlarge">
This text has its font-size prop defined as: xxlarge
</bolt-text>
<bolt-text font-size="xxxlarge">
This text has its font-size prop defined as: xxxlarge
</bolt-text>
<bolt-text>
has font-style options to indicate simple emphasis.
<bolt-text font-style="regular">
This text has its font-style prop defined as: regular
</bolt-text>
<bolt-text font-style="italic">
This text has its font-style prop defined as: italic
</bolt-text>
<bolt-text>
has font-weight options to indicate emphasis hierarchy.
<bolt-text font-weight="regular">
This text has its font-weight prop defined as: regular
</bolt-text>
<bolt-text font-weight="semibold">
This text has its font-weight prop defined as: semibold
</bolt-text>
<bolt-text font-weight="bold">
This text has its font-weight prop defined as: bold
</bolt-text>
{% 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 %}
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 |
boolean
| — |
|
variant
|
Set the visual variant. |
string
|
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
| — |
|
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 |
string
| — |
|
active
|
Indicates that the item represents the current section being viewed. |
boolean
| — |
|
npm install @bolt/components-toc
{% 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 %}
<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>
active
to indicate that the page is anchored to the respective section.
{% 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 %}
<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>
header
prop.
{% 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 %}
<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>
variant
prop.
{% 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 %}
<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
prop.
{% 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 %}
<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>
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'This is the tooltip trigger',
content: 'This is the tooltip content.'
} only %}
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
|
|
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
|
|
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
| — |
|
npm install @bolt/components-tooltip
inverted
prop to invert the colors so it stands out better against the dark background. Such as
<bolt-tooltip>
in the markup to make it render.
<bolt-tooltip>
CRM
<span slot="content">Customer relationship management</span>
</bolt-tooltip>
<bolt-tooltip placement="top" uuid="target-this-unique-id">
CRM
<span slot="content">Customer relationship management</span>
</bolt-tooltip>
<bolt-tooltip placement="top" uuid="target-this-unique-id">
CRM
<span slot="content">Customer relationship management</span>
</bolt-tooltip>
{% include '@bolt-components-trigger/trigger.twig' with {
content: 'This is a trigger'
} only %}
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
|
|
type
|
Determines the button tag type for semantic buttons |
string
|
button
|
|
rel
|
Set to |
string
| — |
|
cursor
|
Type of cursor shown on hover. |
string
|
pointer
|
|
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
|
|
no_outline
|
Turn off the default outline on focus |
boolean
|
false
|
|
disabled
|
Make trigger unusable and un-clickable. Only applies to |
boolean
|
false
|
|
npm install @bolt/components-trigger
<bolt-trigger>
element in the markup.
<bolt-trigger onclick="alert('Trigger clicked')">
This is a trigger
</bolt-trigger>
button
tag. Set the url
prop to render a semantic a
tag.
<bolt-trigger url="https://google.com">
This is a trigger
</bolt-trigger>
cursor
prop.
<bolt-trigger cursor="zoom-in">
This is a trigger
</bolt-trigger>
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>
{% include '@bolt-components-typeahead/typeahead.twig' %}
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 |
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
|
|
npm install @bolt/components-typeahead
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();
}
});
}
{% 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 %}
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
| — |
|
items
|
All items can be simple text or |
array
| — |
|
items
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
text
|
Item text |
string
| — |
|
contentItems
|
Items pass to |
array
| — |
|
npm install @bolt/components-ul
Theme: xlight
Theme: light
Theme: dark
Theme: xdark
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>
.
<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>
Theme: xlight
Theme: light
Theme: dark
Theme: xdark
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
video: {
title: 'Video Title',
duration: '4:55'
}
} only %}
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
|
|
aspect_ratio
|
Set the aspect ratio of the video thumbnail. |
string
|
16:9
|
|
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
| — |
|
npm install @bolt/components-video-thumbnail
{% 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 %}
{% 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 %}
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
border_radius: 'large',
video: {
title: 'Title of the Video',
duration: '4:55'
}
} only %}
{% 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 %}
// 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 %}
video.content
prop is used.
// 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 }}
{% 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
} only %}
{% endset %}
<a href="https://google.com" target="_blank" rel="noopener" aria-label="Link to Video Resource">
{{ video_thumbnail }}
</a>