2.12.0
Accordion Component in Bolt
The Accordion component is a vertical list of items, each of which can be expanded or collapsed to show more content.
npm install @bolt/components-accordion
{% include "@bolt-components-accordion/accordion.twig" with {
items: [
{
trigger: "Accordion item 1",
content: "This is the accordion content.",
},
{
trigger: "Accordion item 2",
content: "This is the accordion content.",
},
{
trigger: "Accordion item 3",
content: "This is the accordion content.",
}
]
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case
.
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
|
All of the items in the accordion. Each item should contain a header and a content. |
array
| — |
|
|
Allow only one section to open at a time. |
boolean
|
false
|
|
|
Hides the separator in between items. |
boolean
|
false
|
|
|
Creates a box shadow around the accordion. |
boolean
|
false
|
|
|
Controls the inset spacing of each item. |
string
|
medium
|
|
|
Vertically align the accordion trigger content and trigger icon. |
string
|
center
|
|
By setting the single
prop to true
, it allows only one item to be opened at a time.
By setting the no_separator
prop to true
, it will remove the separator in between items.
By setting the box_shadow
prop to true
, it will create a box shadow around the accordion.
By setting the spacing
prop to none
, xsmall
, small
, medium
, or large
, it applies the appropriate inset spacing for each accordion item. The default is medium
.
none
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
xsmall
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
small
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
medium
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
large
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
By setting the icon_valign
prop to top
or center
, it will vertically align the trigger and the icon accordingly.
Set the inactive
prop to true
on any accordion item to display the trigger as an inactive element. It will have the same font-styles as the other triggers but none of the interactive styles. It will not be clickable, and that item's content and toggle icon will always be hidden.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
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 |
This is regular text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et.
By setting the content_spacing
or trigger_spacing
prop to an Accordion Item, the default spacing value inherited from the parent Accordion can be optionally overridden.
Using spacing
will uniformly set the same spacing on both the trigger and the content.
spacing
prop defined.
spacing
prop defined.
spacing
prop defined.
Using content_spacing
will only set the spacing on the content container. This should only be used if you don't want the same spacing on both the trigger and the content.
content_spacing
prop defined.
content_spacing
prop defined.
content_spacing
prop defined.
Using trigger_spacing
will only set the spacing on the trigger container. This should only be used if you don't want the same spacing on both the trigger and the content.
trigger_spacing
prop defined.
trigger_spacing
prop defined.
trigger_spacing
prop defined.
2.12.0
Action Blocks Component in Bolt
Stylistic block layout for displaying actionable icon and text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-action-blocks
Action blocks work as a group to provide the user an easy to browse list of options of relativeto take action to discover more information. They commonly exist as links to more detailed content.
{% include "@bolt-components-action-blocks/action-blocks.twig" with {
contentItems: [
{
text: "Item 1",
url: "#!",
icon: {
name: "icon-name",
size: "large",
background: "circle"
}
},
{
text: "Item 2",
url: "#!",
icon: {
name: "icon-name",
size: "large",
background: "circle"
}
},
{
text: "Item 3",
url: "#!",
icon: {
name: "icon-name",
size: "large",
background: "circle"
}
}
]
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case
.
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
The max amount of items (action blocks) to be displayed in one row. |
number
|
6
|
|
|
Vertical alignment of the content inside each action block. |
string
|
start
|
|
|
Removes the border in between each action block. |
boolean
|
false
|
|
|
Content items to populate the action blocks. |
array
| — |
|
|
Use max_items_per_row prop instead. |
| — |
|
|
Use valign prop instead. |
| — |
|
|
Use borderless prop instead. |
| — |
|
2.12.0
Background Component in Bolt
Background can be added to any container. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-background
Background allows Bolt to set an image inside of bands.
We recommend a max-width of 2880px
for full-bleed background images. This recommendation takes into consideration the common HD screen resolution of 1920x1080
and multiplies 1920
by 1.5
.
{% include "@bolt-components-background/background.twig" with {
opacity: "heavy",
fill: "gradient",
focalPoint: {
vertical: "center",
horizontal: "center"
},
contentItems: [
{
pattern: "image",
src: "/images/content/backgrounds/background-tall-4.jpg"
}
]
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case
.
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
Overlay opacity |
string
|
medium
|
|
|
Should an overlay be used for this background. |
string
|
enabled
|
|
|
Add a Bolt Background Shapes group. |
string
| — |
|
|
Alignment of shape group. |
string
|
right
|
|
|
Type of fill to use for the overlay. |
string
| — |
|
|
Where the opacity background should originate. |
object
| — |
|
|
An array of objects to place in the background. Works with Image and Shape components. Video option is deprecated. |
array
| — |
|
Light Opacity
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.
Medium Opacity