Skip to main navigationSkip to main content
Return to Sky UI homepage

FAQ Accordions - Overview

View on Figma

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. 1
  2. 2
  3. 3
  4. 4
  5. 5

  1. Headline content

    Headline content delivers a consistent title for all FAQ patterns.

  2. Body content (optional)

    Body content supports the headline and provides more information to the user.

  3. Accordion component

    Accordion component allows users to expand and collapse content.

  4. Divider line

    Divider line separates the Accordions.

  5. Text Link component (optional)

    Text Link component 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