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

# Legal Accordion — Usage

Used for consistent presentation of legal information in expandable sections.

## Basic Guidelines

Legal Accordions should only use the bordered variant of the Accordion component. This is to allow consistency across all of Sky UI for legal content.

## Content Guidance

### Customised content — Set-up in Figma

The Legal Accordion comes with three placeholder sections which can be edited as required.

If necessary, the element ‘Replaceable Legal Accordion Content Area’ can be swapped for a locally created component without the need to detach the Legal Accordion. There is no need to include padding or a background fill in your own locally created component.

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

## Alignment

Sections are always placed at full width of the viewport.

### Mobile

### Desktop

The Legal Accordion inside the section will only expand up to a width of 996px to span 10 columns on a large viewport.

The example below is downscaled proportionally for illustration purposes.