FAQ & Help

Build an accordion FAQ. Each row is a full-width button with the question in 16px medium weight on the left and a chevron on the right that rotates 180° when open. Top and bottom of each row has a 1px divider in the line color. Click expands the answer with a height + opacity transition over 240ms; answer is 14px in the muted text color, with comfortable line-height (1.55). Only one row open at a time (controlled). Honour prefers-reduced-motion.

Build a two-column FAQ. Left column (sticky on lg screens) shows the section title in 28px serif and a small uppercase eyebrow. Right column lists 3–6 questions for that section, each as a button that expands to reveal the answer inline. Stack sections vertically with 80px gaps between sections, 16px within. On mobile, collapse to single column with the title pinned above each set. Numbered questions in mono on the left of each row.

Build a search-driven FAQ. Hero with a large search input (16px text, generous padding), a row of category chips below acting as quick filters. Below: a live-filtered list of questions and answers. As the user types, debounce 120ms, then highlight matched substrings inside the question and answer text using a soft amber mark. Empty state offers a 'Contact support →' link. Persist last 5 searches in localStorage and show as chips when the input is focused and empty.

Build a tabbed FAQ. Horizontal tab row (Engineering / Billing / Security / Account) with an animated underline under the active tab (framer-motion layoutId). Each tab is a small button with the label and a muted count ('Billing · 12'). Below the tab strip: an accordion list filtered to the active tab, rendered with the standard accordion-faq component. Switching tabs collapses any open accordion in the previous tab. Tabs are keyboard-navigable with left/right arrows.

Build an AI chat FAQ component. A large input at the top with 3 suggested-question chips beneath. On submit, stream a response into the area below using server-sent events. Below the streamed answer, render citation chips that link to the source doc pages (chunks the answer was grounded on). Include a 'Was this helpful?' thumbs up/down row and a 'Talk to a human →' link that escalates to the support inbox. Use the rag-grounded /api/help endpoint.

Build an inline FAQ block for use inside MDX docs. Wrapped in a callout container (rounded-md, subtle border, 6% accent background). Heading: 'Common questions about webhooks' in 15px medium. Below: 4 expandable Q&A pairs in a compact accordion (smaller padding, no border between rows). Component accepts children as MDX so authors can write the questions and answers naturally inside the source file.

Build a pre-purchase FAQ section. Sits below the pricing grid. Heading 'Before you decide' at 32px. Below: a compact accordion list (max-width 760px, centered) of 8 questions - refunds, plan changes, prorating, team billing, taxes, contract terms, free trial, region pricing. Use the standard accordion FAQ component. At the bottom: a quiet 'Still unsure? Talk to sales →' ghost link.

Build a numbered editorial FAQ. Each Q&A is a row in a stacked list. Left of each row: a 36px serif number ('01', '02') in the muted color. Right of the number: the question at 20px medium and the answer at 14px ink-muted with leading-relaxed beneath. Subtle horizontal rule between items. No accordion behavior. All answers are visible. Max-width 720px, centered.

Build a video-answer FAQ. Each row collapsed shows only the question (16px medium) and a small video icon. Expanded: a 16:9 muted-autoplay clip (under 60s) renders inline below the question with a centered play overlay. Beneath the video, a 'Show transcript' toggle reveals the full transcript text. Use IntersectionObserver to pause the video when scrolled off-screen.

Build a feedback-driven FAQ. Render the accordion FAQ as usual. Below each expanded answer, add a 'Was this helpful?' row with a thumbs-up and thumbs-down icon button. On click, POST {questionSlug, vote} to /api/help-feedback and swap the row for 'Thanks - we'll improve this.' If the user clicks thumbs-down, show a small textarea asking what was missing; submit posts to the same endpoint. The aggregate scores drive ordering on the server side over time.