FAQ Accordions

Overview

View on FigmaView on GitHub

Purpose

FAQ Accordion is a pattern created to allow for a consistent delivery of FAQs, paired with a title, body copy, and optional Text Link to show the user more information.

Anatomy

The FAQ Accordion component can be broken down into the following elements -

  1. Headline content
    Headline delivers a consistent title for all FAQ patterns.

  2. Body content (optional)
    Copy which supports the headline and provides more information to the user.

  3. Accordion component
    Up to six Accordions are used by default in the FAQ Accordion pattern.

  4. Divider line
    A simple 1px line used to separate the Accordions.

  5. Text Link component (optional)
    An optional Text Link can be used as a call to action.

Variants & States

  • Breakpoint: Mobile, Desktop
  • Number of FAQs: One — Six
  • Description: on/off
  • Link: on/off

Mobile

Frequently asked questions

An optional description to support the content of the FAQs.

Text Link