---
title: FAQ
description: Use the FAQ component to display content in a Q&A format.
keywords: ['content', 'questions', 'answers']
---

## Anatomy

![The FAQ component has a heading, optional subheading, and a list of questions that are interactive to expand and display answers](https://github.com/primer/brand/assets/912236/cfc22774-7348-4e2b-9887-2157e1a17e16)

- Heading: The main title of the FAQ.
- Subheading: An optional short description that extends the information provided by the heading and helps group the items in the list.
- Question: The question being answered.
- Answer: The answer to the question.

## Usage

Use the FAQ to provide answers to common questions about a product or a feature presented on a page. The FAQ is a good way to provide additional information that may be beyond the scope of the main content of the page. We recommend placing the FAQ at the bottom of the page, after the main content. Avoid using the FAQ to provide information that is already available in the page.

Answers should be clear and no longer than 2-3 paragraphs. If the answer is longer than the suggested, needs visual assets, or a specific layout treatment, consider using a different component. For instance, if the answer needs an image, we recommend using a list of [cards](../Card/index.md) or a [river](../River/index.md) component instead.

For answers that need to provide a list of tasks, we recommend using an [ordered list](../OrderedList/index.md). To split the content into different items, we recommend using an [unordered list](../UnorderedList/index.md).

**✅ Do**

![](https://github.com/primer/brand/assets/912236/5566161b-439b-4e13-b41c-188723b0bae6)

_Use the FAQ to provide clear answers to common questions. Link to other resources and use ordered/unordered lists
if necessary._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/a42230be-ee4b-4905-885b-dab98f4889c9)

_Don't use visual assets or other content-related components within the answers._

## FAQ group

When using long lists of questions and answers, consider using the FAQ group to organize items into content-related categories to make it easier for the user to scan the list.

**✅ Do**

![](https://github.com/primer/brand/assets/912236/a659524d-4574-4880-8f00-c6846438492e)

_Use the FAQ group for related questions and answers._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/315a9a4e-95de-4dc5-9129-ff31108d5dfd)

_Don't use long lists of questions and answers. We recommend using FAQ groups to group them and to help the user
scan the list._

## Accessibility

### Heading levels

The `FAQ.Heading`, `FAQ.Subheading`, `FAQ.Question`, and `FAQGroup.Heading` components all support the `as` prop, allowing the underlying HTML element to be changed.

When using these components, ensure that the heading levels are semantically correct and follow a logical hierarchy within the document, as the default heading levels for each component may not fit all use cases.

## Related components

- [Card](../Card/index.md): to display navigational related content with higher visual weight.
- [River](../River/index.md): To display a list of content items with a visual asset.
- [Pillar](../Pillar/index.md): To display related content with less visual emphasis.
