Legal Accordion

Overview

View on Figma

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 componentn
    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