Accordion - Usage

Behaviour

Multiple Accordions on one page can be open at any one time.

Variants Usage

The Default variant is the most simple option of the Accordion that fits in-line with other full width elements and copy on the screen. It makes the most of the space available.

Do not combine FAQ and Legal Accordions. If both are needed on a page, use the individual sections. This will give you the correct spacing between those two elements by default.

Alignment

The Accordion must align with the grid system with no additional padding. It sits in-line with the rest of the content and always span full width (minus margins) on mobile and tablet.

In a 12-column grid layout, the Accordion sits within the ten centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.

Spacing - Border and Drop Shadow variants

If several accordions are stacked, a spacing of 16px should be used between elements on both mobile and desktop.

Spacing - Default variant

If several accordions in the default variant style are stacked, a spacing of 8px and an additional divider line (grey-20, 1px width) should be used between elements on both mobile and desktop (same as FAQ section).

Composable component

The Accordion is set up as a composable component. It is used by replacing the layer 'Replacable Content Area' for a locally created component. Optional elements like the Thumbnail will be kept available.

There is no need to include padding or a background fill in the component that replaces the placeholder.