Skip to content

Primer Design System

Main navigation navigation

FAQ

Use the FAQ component to display content in a Q&A format.

Anatomy

The FAQ component has a heading, optional subheading, and a list of questions that are interactive to expand and display answers

  • 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 or a river component instead.

For answers that need to provide a list of tasks, we recommend using an ordered list. To split the content into different items, we recommend using an unordered list.

Do

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

Don’t

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

Use the FAQ group for related questions and answers.

Don’t

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.

  • Card: to display navigational related content with higher visual weight.
  • River: To display a list of content items with a visual asset.
  • Pillar: To display related content with less visual emphasis.