UI components · Marketing
FAQ Section
Also called: FAQ, Frequently asked questions, Q&A, Questions and answers
A section that collects the questions visitors ask most, with their answers. On marketing sites it's usually a list of questions you can click to expand, placed after the pricing table and before the footer.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd an FAQ section below the pricing table. The left third holds an h2 heading "FAQ" and a line "Didn't find your answer? Contact us" (linking to the contact page). The right two thirds hold a list of expandable questions: each question is one row of 17px bold text with a + icon on the right. Clicking it expands the answer (15px gray, line height 1.7) and turns the icon into −. Several can be open at once, and questions are separated by 1px dividers. Build it with details / summary so it works with the keyboard. Use the questions and answers I provide: [Question 1 + answer] [Question 2 + answer] …; don't invent policies like refunds, trials, or invoices that I haven't covered. On mobile, stack the heading above the list.
Send to
01Decide
Does your content look like this?
Check both columns to confirm FAQ Section is what you need.
Use FAQ Section when
- Marketing and pricing pages, to answer the questions visitors ask before buying, like cancellation, refunds, and data security
- Questions the support team gets over and over, which can be answered right on the page
- Event and sign-up pages that need to explain rules, dates, and eligibility
Pick something else when
Dozens or hundreds of questions that need search and categories. Build a help center.
Only one or two notes. A plain paragraph is easier to find.
Step-by-step instructions. Use How It Works or docs instead of forcing them into Q&A.
Use insteadHow It Works
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Hiding key info like prices and limits only inside collapsed answers, which most visitors never open
- 02
Self-praising questions like "What makes us better?" that aren't what visitors actually care about
- 03
Answers that promise policies you don't have, like "30-day no-questions-asked refunds"
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section heading (optionally with a "Contact us" link) and a set of questions and answers. Each item is one line of question and a block of answer. With many questions, a collapse hides the answers; they can also be laid out flat in two columns.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
An FAQ section answers the doubts visitors have before they buy: "Can I cancel anytime?" "Is my data safe?" "Do you send invoices?" The usual layout is a section heading with 5–10 questions below it, one per row, each expanding to show its answer when clicked. Some pages lay the questions and answers out flat in two columns instead. The section often ends with a line like "Didn't find your answer? Contact us."
It's a content section, and it's often built with a Collapse. But collapse is just the interaction, and it's also used on settings pages and in filters. "FAQ" means this particular set of questions and answers. It's different from a help center, which is a whole set of docs with search and categories. The FAQ on a marketing site only picks the few questions that most affect buying. How it differs from a Testimonial: testimonials are other people saying it's good, while an FAQ clears up doubts.
Answers are product and policy facts (refunds, trials, how long data is kept), so they must match reality. Don't write anything you haven't confirmed. Phrase questions the way visitors would ("Can I…?") and put the conclusion in the first sentence of the answer. Don't hide key info like pricing only inside a collapsed answer. Build the items with details / summary or buttons with aria-expanded so they work with the keyboard. If you want search engines to pick them up, add FAQPage structured data.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-faq- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[itemtype*="FAQPage" i]section[class*="faq" i]:is(section, div)[id*="faq" i]:not([id*="faq" i] *):is(section, div)[class*="faq" i]:has(details, [aria-expanded], .accordion, [data-slot="accordion"]):not([class*="faq" i] *, [id*="faq" i] *)dl:has(> div > dt button[aria-expanded], > dt button[aria-expanded])
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
faqfaqsfaq-sectionfaq-listfaq-accordionfaq-gridfaq-itemsfrequently-asked-questionscommon-questions
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
FaqFaqSectionFaqListFaqAccordionFrequentlyAskedQuestions
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with headingrepeated items
- Priority
- 4 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026