Legal Accordion - Overview

Purpose

The Legal Accordion pattern is a bordered Accordion component that can be clicked/tapped to reveal or hide legal content within it. It is used to expose content to users in a progressive manner and to increase user control. 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 pattern can be broken down into the following elements -

1. Accordion component
   Provides the container for the title and legal content.

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

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

4. Content
   Legal content.

5. Dividing line
   Provides separation between titles and subtitles.

Variants & States

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