---
title: "FAQ Accordions — Usage"
canonical: https://sky-ui.cf.sky.com/sections/faq-accordions/usage
---

# FAQ Accordions — Usage

Used for consistent delivery of FAQs

## Basic Guidelines

The Accordions within the section should always use the Default variant. This is already fixed within the Figma component and should not be altered. This is to allow consistency across all of Sky UI for FAQ content.

### Optional Text link component

The FAQ Accordions component has an optional Text Link at the bottom that can be used to link to a separate page that shows all FAQs if there are too many to fit into one section.

The Text Link should not be used as a method to expand to view more FAQs. Unlike Buttons, Text links are used for directions, linking to a different location. It’s better to show all FAQs in one place (on a new page) if there are too many to show in one section. This allows the user to easily browse through all FAQs and navigate back to their journey once complete.

## Variants Usage

Thumbnails within Accordion titles are not supported in FAQ accordions by design. This ensures FAQs remain quick and easy for users to read and understand. Please do not enable thumbnails in Figma, while the option appears due to the nested component’s properties, it is not supported in React and will not be implemented.

## Content Guidance

### Customised content - Set up in Figma

The layer 'Replaceable Content Area' within the expanded area of each of the individual Accordion components is set up as a composable component. It can be swapped for a locally created component without the need to detach the Accordion. There is no need to include padding or a background fill in your own locally created component.

**Note:** To learn more about how composable components are used in Figma, please have a
  look at the [Designer Quickstart](/intro-to-sky-ui/designer-quickstart/).

### Accordion structure

Each [Accordion](/components/accordion) within the FAQ Accordion section should only contain one question and answer. If you have many FAQs, you may want to consider having only the six most frequently asked questions within the component, placing follow up questions on a separate page which can be linked via the [Text Link](/components/text-link/) at the bottom of the pattern.

For SEO purposes, only the title of the Accordion is visible, not the content within. This is why it’s important that each FAQ is housed within its own Accordion, otherwise this information won’t be surfaced for users researching for an answer.

## Alignment

Sections are always placed at full width of the viewport.

### Mobile

### Desktop

The FAQ Accordion inside the section will only expand up to a width of 996px to span 10 columns on a large viewport.

The example below is downscaled proportionally for illustration purposes.