FAQ Accordion
Accessible FAQ accordion: single-open, keyboard friendly, chevron rotation, honest plain-language answers.
Component code: FaqAccordion.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build an FAQ section that respects the reader: real questions, short answers, no marketing fog.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion (height animation via AnimatePresence).
LAYOUT
Layout
Two-column on desktop: sticky left header (H2 + "still stuck? contact us" link), right column the accordion list. Mobile: stacked. Each item: full-width button row (question + chevron), animated answer panel, hairline separators. First item open by default. Buttons are real <button> with aria-expanded; panel uses region role.
TYPOGRAPHY
Typography
H2: 2rem/600. Question: 1.05rem/550. Answer: 1rem leading 1.65 muted-foreground, max-w-prose.
COLOR TOKENS
Color Tokens
--background: 0 0% 100%; --foreground: 240 20% 10%; --muted-foreground: 240 10% 45%; --border: 240 15% 90%; --primary: 250 80% 60%.
SPACING
Spacing
Item padding 1.25rem 0; answer padding-bottom 1.25rem; container max-w-5xl.
ANIMATION
Animation
Panel height auto-animates 0.3s easeInOut; chevron rotates 180deg. Only one item open at a time. Reduced motion: no height animation, instant toggle.
RESPONSIVE
Responsive
<lg single column; tap targets ≥48px; question text never truncates.
SAMPLE COPY
Sample Copy
Q: "Can I cancel anytime?" A: "Yes. Cancellation takes two clicks in Settings → Billing, and your plan stays active until the end of the paid period. We don't do retention mazes."
Q: "Do you offer refunds?" A: "Yearly plans are refunded pro-rata within the first 30 days, no questions and no forms."