Legal Accordion - Overview

Purpose

The Legal Accordion section provides further legal content in a space-saving container, most commonly positioned at the bottom of the page. The Legal Accordions always use the bordered style of Accordion to allow for consistent use of legal content and clear recognition for the user.

Anatomy

The Legal Accordion section can be broken down into the following elements -

1. Section container
   Wraps the Legal Accordion in a container that stretches the page full width.

2. Legal Accordion component
   Provides the container for the title and legal content.

3. Section heading
   Indicates the subject of the following content.

4. Sub-section heading
   Indicates the subject of the following content.

5. Content
   Legal content.

6. Dividing line
   Provides separation between titles and subtitles.

Variants & States

Section

• Breakpoint: Mobile, Desktop

Component

• Breakpoint: Mobile, Desktop
• States: Default, Hover, Focus
• Open or closed