Wensity

React FAQ section components

6 FAQ section componentsLive previewFull source in your repo

A FAQ section has to answer the objection that would stop a signup. These FAQ accordions keep every answer in real DOM text, and several pair the list with a booking card so the visitor has a next step.

Browse all FAQ blocksRead the docs

Works with

  • React
  • Next.js
  • TypeScript
  • Tailwind CSS

FAQ accordion sections you can copy

Each FAQ section is one file covering the questions, the accordion and the card beside it. Preview it live, then copy the source into your project.

Pricing sections to place before the FAQ

A FAQ usually answers what the price raised. These pricing blocks from the same library sit directly above it, so the questions follow the numbers.

React accordion and collapsible components

The accessible primitives under every FAQ: an accordion with single or multiple open rows, a collapsible for one disclosure, and tabs for grouped questions, led by cards that expand on hover.

FAQ section design: accordion, numbered list or chat style

A FAQ section answers the questions that would otherwise stop a signup or turn into a sales call. It is not a second blog post. By the time someone opens it they have seen the product and usually the price, so each question should name a real objection: who it is for, how long it takes, what the buyer has to bring, and what happens if it goes wrong.

Good FAQ design starts with the wording. Write each question the way a customer would type it, not the way your team talks about the product, and answer in two or three sentences that stand on their own. Put the questions that block a purchase first. If an answer needs a page, link to the page rather than stretching the accordion.

An accordion is the right container when the answers are long enough that six of them would bury everything below. Each row should be a real button that announces whether it is open, so screen readers hear the state. All six FAQ sections here set aria-expanded on their rows and keep the answer text in the DOM rather than in an image, which keeps it readable by assistive technology and by search engines.

Pair the list with a next step when the product is sold through conversation. FAQ Section With Accordion Call Card puts a booking card with a face and a fifteen minute promise beside the questions. FAQ Section With Numbered Support Card numbers every row, inverts the open one so the active question is obvious, and closes with a blue talk to our team card. FAQ Section With Photo Consult Panel sets a consult card and three numbered questions on a blurred photograph, which suits a local service page.

Let the questions stand alone when the page has already made its ask. FAQ Section With Split Headline Accordion is a two line heading over hairline rows, with no card at all. FAQ Section With Illustration Accordion adds a drawn question mark beside bordered question cards. FAQ Section With Dashed Grid Pills frames charcoal question pills in a dashed grid and opens each answer beside a portrait, so the FAQ reads like a short chat.

Four to six questions is the range that still reads as one section on a laptop. Twelve is a help centre and belongs on its own page. If a question cannot change a buying decision, cut it, and if two answers say the same thing, merge them. An empty plus icon in front of a filler question costs more trust than a shorter list.

Use one FAQ section per page and place it after pricing, or after social proof if the price is not public. The section that follows should be the checkout, a contact path or the footer. A second accordion titled still have questions usually means the first list was never edited.

Replace the demo before shipping. The questions, answers, portraits and booking links in these blocks describe sample businesses. Point every booking button at a real calendar, and if the fifteen minute promise cannot be kept, change the label until it can.

Frequently asked questions

Questions written in the customer's own words, answers of two or three sentences that work on their own, and the questions that block a purchase placed first. Keep it to four to six rows on a landing page, put the answers in real text rather than images, and give the visitor a next step such as a booking card or a contact link.

Run the Wensity CLI with the block slug, for example npx wensity@latest add faq-section-with-accordion-call-card --type block. The CLI writes the component into your codebase and pulls in the packages it needs. You can also open any FAQ section on this page and copy the source from the Code tab. There is no provider to wire up.

Each question row is a button that sets aria-expanded, so screen readers announce whether an answer is open or closed, and the answers stay in the DOM as real text. Check the focus outline against your own theme colours after install, because a custom ring is the part that most often gets lost when a design is restyled.

No. The blocks render the questions as HTML only, so structured data stays your decision. If you want FAQPage JSON-LD, build it from the same array of questions the accordion reads, so the markup and the visible answers can never drift apart. Since 2023 Google shows FAQ rich results mainly for well known government and health sites, so treat the schema as a description of the page rather than a route to a bigger search result.

Six is the upper bound that still reads as one section on a laptop. Four is calmer if you only have a few objections you can stand behind. Twelve questions is a help center. If a row cannot change a buying decision, cut it.

After pricing, or after a social proof strip if the page has no public price. It should not be the first screen. By the time someone is opening questions they have already decided the product is in the set. One accordion, then checkout or a contact path.

Where to go next