Figma marketing website FAQ sections

An FAQ section is the last two minutes of a sales conversation, printed. It goes at the foot of a pricing page to kill the objection that page just raised, under a feature page where the same three questions keep arriving, beside a signup form where the question is always about cancelling. That is a narrower job than a full FAQ page, which exists to catch search traffic and everything else.

Each item is a disclosure, and disclosures have rules

The FAQ item carries expanded as a true or false variant, so the file states which state it is showing rather than leaving it to a screenshot. The build has to state it too: the question is a button, Enter and Space both toggle it, and aria-expanded flips between true and false, which is the whole of the W3C's disclosure pattern.

The expanded variant here swaps the trailing icon to a 24px minus circle, and that pairing is worth keeping in the build. A plus and a minus tell you what the control does while it is standing still. A chevron only tells you after it has rotated.

Dividers, icon side, and how tall a question is

A collapsed item with no divider is 24px tall on desktop, which is one line of question text and nothing else. Turn the divider on and it is 48px, the extra 24 being the rule and the space around it. Expanded, the same item is 76px without a divider and 100px with. Six questions with dividers, the first one open, occupy 476px of a 768px column, which is the number that makes the accordion worth building.

The icon can sit to the left or the right of the question: right matches what most of the web has trained people to expect, left works when the questions are short and the column is narrow. Pick one and never mix them in a single list, which is the kind of inconsistency nobody can name and everybody notices.

What the accordion is worth on a phone

More than on desktop. A collapsed item is still 24px in the 343px mobile frame, but expanded it reaches 148px, because the question wraps to two lines and the answer takes three. One open answer costs the height of six closed questions.

That trade is what earns the extra tap, and NN/g's research on accordions on mobile agrees, with one warning worth designing around: when opening an item scrolls the page, people read it as a new page and reach for the back button. Keep the question in view when its answer appears.

Where the section sits, and what closes it

The simple layouts show every answer at once and suit a short list on a landing page. The accordion layouts run a 768px column of collapsed questions instead, and one of them finishes with a closing block: a group of overlapping avatars, a line of supporting text, and a single 48px button. Swapping those avatars for your actual support team takes two minutes and does more for the page than the copy above it.

Every layout comes in a default and a brand theme, drawn at 1,440px and 375px in light and dark, and the natural continuation underneath is a CTA section or, on a plan page, the pricing section the questions were about.

In code, the same section is already built. Untitled UI React FAQ sections are open source, built with Tailwind CSS and React Aria, with the disclosure keyboard behavior and expanded state handled for you.