Bolt Design System

Usage recommendations

Recommended	Not Recommended
Prioritize Optional Content: Use accordions for secondary or optional information that supports but isn't crucial to the main content.	Avoid Hiding Critical Info: Never use accordions for essential, must-see information.
Group Related Information: Keep content in each accordion section closely related to ensure user predictability.	Limit Nesting: Avoid multiple levels of nested accordions to prevent user confusion.
Include Section Summaries: For complex or lengthy content, offer short previews in the collapsed state to help users decide to expand.	Don't Overuse: If your page is filled with accordions, reconsider your content strategy to avoid clutter.

Twig Usage

{% include '@bolt-components-accordion/accordion.twig' with {
  content: 'This is a accordion component.'
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Accordion (accordion.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	All of the items in the accordion. Each item should contain a header and a content.	`any`	—	—
single	Allow only one section to open at a time.	`boolean`	`false`	—
no_separator	Hides the separator in between items.	`boolean`	`false`	—
box_shadow	Creates a box shadow around the accordion.	`boolean`	`false`	—
spacing	Controls the inset spacing of each item.	`string`	`medium`	`none`, `xsmall`, `small`, `medium`, `large`
icon_valign	Vertically align the accordion trigger content and trigger icon.	`string`	`center`	`top` or `center`
scroll_offset	Additional offset for smooth scrolling, integer converted to pixel value.	`integer`	—	—

Accordion Item (accordion-item.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Expandable content of an item.	`any`	—	—
trigger	Trigger content of an item.	`any`	`Toggle Accordion`	—
open	Automatically expand an item on page load.	`boolean`	`false`	—
inactive	Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden.	`boolean`	`false`	—

Install

npm install @bolt/components-accordion

Dependencies

@bolt/core

accordion-js

Accordion