---
title: "Accordion — Usage"
canonical: https://sky-ui.cf.sky.com/components/accordion/usage
---

# Accordion — Usage

Accordions allow users to expand and collapse pieces of content.

## 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](/sections/faq-accordions/) and [Legal](/sections/legal-accordion/) 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.

**Note:** To learn more about how composable components are used in Figma, please have a
  look at the Composable Component page or the [Designer
  Quickstart](/intro-to-sky-ui/designer-quickstart/).