React FAQ section components
A FAQ section has to answer the objection that would stop a signup. These blocks put the questions in real DOM text, open one at a time, and leave a booking card beside the list so the visitor has a next step.
Built with the stack you already ship
FAQ accordion blocks you can copy
Each block is one file covering the questions, the accordion, and the booking card. Preview it live, then copy the source into your project.
FAQ Section With Illustration AccordionSplit FAQ accordion with a question mark illustration, isolated question cards, chevron toggles, and a partner questions list. Follows light and dark.
FAQ Section With Split Headline AccordionLeft-aligned two-line headline over a hairline FAQ accordion. Plus rotates to a close mark and the answer unfolds in height. Follows light and dark.
FAQ Section With Photo Consult PanelCentered FAQ badge and heading over a blurred photo panel, with a consult card on the left and numbered question cards on the right. Follows light and dark.
FAQ Section With Numbered Support CardNumbered FAQ accordion with an inverted open row, a blue still have questions card, overlapping faces, and a talk to our team action. Follows light and dark.
FAQ Section With Dashed Grid PillsCentered FAQ accordion with a dashed layout grid, charcoal question pills, a portrait beside the open answer, and contact actions. Follows light and dark.
FAQ Section With Accordion Call CardSplit FAQ accordion with a sidebar book-a-call card, stacked question rows, plus and close icons, and a peach glow behind the answers. Follows light and dark.
Surfaces that sit beside a FAQ
Pricing and product proof from the same library, for the page that has already made the claim and now has to clear the last doubts.
Subscription Tier CardAn animated 1px conic-gradient border with a soft Wensity Red halo on hover and a CTA that shimmers as you approach.
Fluid Drag-and-Drop KanbanA Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.
Metric Card with SparklineDashboard cards with a hand-rolled monotone-cubic SVG line and a glowing dot that snaps to wherever you scrub.
GitHub-Style Activity Grid365 squares sharing one tooltip that flies between days on rails, with a reveal that ripples backward from today.
Multi-Step Morphing WizardAn onboarding card whose container physically reshapes to wrap each new step as the content slides in behind it.
How to choose a FAQ section
A FAQ is not a second blog post. By the time someone reaches it they have already seen the product and the price. The job is to name the objection they would otherwise take to a sales call: who you work with, how long a slice takes, what they must bring, and how quality is checked. If the answers could sit on any agency site, they are too thin for this slot.
FAQ Section With Accordion Call Card is for a page that still needs a human next step. The left column holds the heading and a booking card with a face, a 15 minute promise, and one orange action. The right column is a stack of question cards. The first row opens. Plus turns into a close mark. The answer stays in the DOM, not in a screenshot of an accordion.
FAQ Section With Numbered Support Card is for a studio page that wants the questions counted. Each row carries a number. The open row inverts to charcoal so the active question is obvious from across the layout. The left column is a heading, a line about platform pricing and security, and a blue card with three faces, a You chip, and Talk to our team. Do not put both of these blocks on the same page. One FAQ is enough.
FAQ Section With Illustration Accordion is for a quieter page that already has a picture. The heading and partner line sit on the left. Under them is a drawn question mark, not a stock still. The right column is a stack of bordered cards with chevrons, no booking button. Keep the mark if the page is a FAQ. Swap it if the product already owns a different picture.
FAQ Section With Dashed Grid Pills is for a page that wants the FAQ to look like a short chat. A dashed frame holds the title, the pills, and two actions. Open a charcoal question and the answer arrives in a white card with a face. Contact Us is yellow. Read all FAQ is grey. Do not park this next to another accordion. One FAQ is enough.
FAQ Section With Photo Consult Panel is for a local service page that already owns a photograph. The badge and heading stay on the page. A rounded panel holds a blurred still, a consult card, and three numbered questions. Book a Consultation is black. Swap the still if the product is not a garden. Keep the blur so the cards stay the objects, not the photo.
FAQ Section With Split Headline Accordion is for a product page that can stand on the questions alone. A grey eyebrow sits above two lines of heading. The list is hairlines, not cards. Plus turns into a close mark as the answer unfolds. There is no booking card. Do not park this next to another accordion. One FAQ is enough.
Start from the questions a buyer actually asks. Specialize, early stage, timeline, integration, kickoff, and quality are a working set for a product studio. How did you get started and what is your culture are not. If you cannot answer in two sentences, cut the row. An empty plus icon is worse than a shorter list.
The shipped demo is a fictional AI product studio. Replace the questions, the answers, the portrait, and the booking URL before this goes to production. Keep the coupling. The call card belongs on the left so the accordion never has to carry a second CTA in every row. The peach glow sits behind the questions so the list still reads as the main object.
Do not follow this block with another accordion on the same page. Six answers and a booking card are already a full argument. The next section should be checkout, a comparison of what is included, or the footer. A second FAQ titled still have questions usually means the first list was not edited.
Keep the booking link honest. Book a Free Call belongs here only if it opens a real calendar. An empty hash is worse than no card. If the 15 minute promise cannot be kept, change the label until it can.
