Accordion

📖 Overview

Expandable accordion items. Each item has a heading and description that can be toggled open or closed.

✏️ Content Options

Accordion items are managed via a repeater. Add as many items as needed; each has a heading and description.

Field	Type	Required	Description
Accordion (repeater)	Repeater	Yes	Add Accordion Item
↳ Heading	Text	Yes	Item heading
↳ Description	Wysiwyg	Yes	Item content

⚙️ Settings Options

Setting	Type	Default	Description
Close all on open	Toggle	Off	Close all accordions when one is opened
Open first by default	Toggle	Off	Open the first accordion item by default
Accordion icon	Select	Chevron	Chevron / Arrow / Plus-Minus

🎨 CSS Variables

The following CSS variables can be configured to customise the block’s appearance (see assets/scss/configuration.scss and assets/scss/mixins/_root-vars.scss).

Block

Variable	Default Value
`--block-accordion-colour`	`var(--colour-black)`
`--block-accordion-colour-hover`	`var(--colour-neutral-7)`
`--block-accordion-colour-focus`	`var(--colour-black)`
`--block-accordion-colour-active`	`var(--colour-black)`
`--block-accordion-colour-disabled`	`var(--colour-neutral-5)`
`--block-accordion-border-colour`	`var(--colour-black)`
`--block-accordion-border-colour-hover`	`var(--colour-neutral-7)`
`--block-accordion-border-colour-focus`	`var(--colour-brand-2-base)`
`--block-accordion-border-colour-active`	`var(--colour-brand-2-base)`
`--block-accordion-border-colour-disabled`	`var(--colour-neutral-5)`
`--block-accordion-icon-colour`	`var(--colour-black)`
`--block-accordion-icon-colour-hover`	`var(--colour-neutral-7)`
`--block-accordion-icon-colour-focus`	`var(--colour-brand-2-base)`
`--block-accordion-icon-colour-active`	`var(--colour-brand-2-base)`
`--block-accordion-icon-colour-disabled`	`var(--colour-neutral-5)`
`--block-accordion-active-border-colour`	`var(--colour-black)`
`--block-accordion-active-icon-colour`	`var(--colour-black)`
`--block-accordion-padding-top`	`var(--spacing-xs)`
`--block-accordion-padding-bottom`	`var(--spacing-xs)`
`--block-accordion-icon-width`	`var(--icon-sml)`
`--block-accordion-border-width`	`2px`
`--block-accordion-gap`	`var(--spacing-xs)`
`--block-accordion-plus-minus-height`	`2px`
Dark mode
`--block-accordion-colour-dark`	`var(--colour-white)`
`--block-accordion-colour-hover-dark`	`var(--colour-neutral-3)`
`--block-accordion-colour-focus-dark`	`var(--colour-white)`
`--block-accordion-colour-active-dark`	`var(--colour-white)`
`--block-accordion-colour-disabled-dark`	`var(--colour-neutral-5)`
`--block-accordion-border-colour-dark`	`var(--colour-white)`
`--block-accordion-border-colour-hover-dark`	`var(--colour-neutral-3)`
`--block-accordion-border-colour-focus-dark`	`var(--colour-brand-2-base)`
`--block-accordion-border-colour-active-dark`	`var(--colour-brand-2-base)`
`--block-accordion-border-colour-disabled-dark`	`var(--colour-neutral-5)`
`--block-accordion-icon-colour-dark`	`var(--colour-white)`
`--block-accordion-icon-colour-hover-dark`	`var(--colour-neutral-3)`
`--block-accordion-icon-colour-focus-dark`	`var(--colour-brand-2-base)`
`--block-accordion-icon-colour-active-dark`	`var(--colour-brand-2-base)`
`--block-accordion-icon-colour-disabled-dark`	`var(--colour-neutral-5)`
`--block-accordion-active-border-colour-dark`	`var(--colour-white)`
`--block-accordion-active-icon-colour-dark`	`var(--colour-white)`

Note: Default values are defined in the block map in assets/scss/configuration.scss. Dark-mode variants are applied inside .layout--dark (or equivalent).

No results found matching your criteria

Title

Title

Title

Title

Title

Title

Accordion

📖 Overview

✏️ Content Options

⚙️ Settings Options

🎨 CSS Variables

Block