Bolt Design System

Overview

The Accordion component is a vertical list of items, each of which can be expanded or collapsed to show more content.

Install via NPM

npm install @bolt/components-accordion

Usage

  {% include "@bolt-components-accordion/accordion.twig" with {
  items: [
    {
      trigger: "Accordion item 1",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 2",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 3",
      content: "This is the accordion content.",
    }
  ]
} only %}

Schema

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

Prop Name	Description	Type	Default Value	Option(s)
items	All of the items in the accordion. Each item should contain a header and a content.	`array`	—	[items]: Type: `object` Properties: `trigger` Trigger content of an item. Type: `string`, `object`, `array` `content` Expandable content of an item. Type: `string`, `object`, `array` `open` Automatically expand an item on page load. Type: `boolean` Enum: `true` or `false` `inactive` Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden. Type: `boolean` `uuid` Unique ID for an item, randomly generated if not provided. Type: `string` `open_label` Accessible label for the open trigger to expand an item. Type: `string` `close_label` Accessible label for the close trigger to collapse an item. Type: `string` `trigger_spacing` Overrides the default trigger spacing (by default, inherited from the parent bolt-accordion) Type: `string` Enum: `none`, `xsmall`, `small`, `medium`, `large` `content_spacing` Overrides the default content spacing (by default, inherited from the parent bolt-accordion) Type: `string` Enum: `none`, `xsmall`, `small`, `medium`, `large`
single	Allow only one section to open at a time.	`boolean`	`false`	`true` or `false`
no_separator	Hides the separator in between items.	`boolean`	`false`	`true` or `false`
box_shadow	Creates a box shadow around the accordion.	`boolean`	`false`	`true` or `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`

Accordion

Published

Overview

Install via NPM

Usage

Schema