Block FAQ — React Page Block
FAQ accordion with real disclosure semantics: buttons + aria-expanded/controls, arrow-key traversal, CSS grid-rows height animation, long answers with links and lists welcome.
Usage
import { BlockFaq } from "@/components/BlockFaq";
export function Answers() {
return (
<BlockFaq
title="Questions engineers actually ask."
items={[
{
question: "How long does setup take?",
answer: "Most teams see their first graph within ten minutes.",
},
]}
{...{
title: "A few things worth knowing.",
multiple: false,
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: frequently-asked-questions accordion. Copy it, ship it — every string, link and color arrives through props. Runtime: pure DOM + CSS. No WebGPU, canvas, animation library or external assets; SSR-safe on first render. Theming: root custom properties (--vb-bg, --vb-fg, --vb-accent, --vb-border, --vb-radius, --vb-container) or the accent/scheme/className/style props. scheme flips the dark default to light. Guardrails: responsive via container queries down to 320px; interactive behavior degrades on touch; prefers-reduced-motion drops entrance/scroll motion while content stays complete. Answers stay in the accessibility tree only while open (visibility flips with the same transition as the height), and ArrowUp/Down/Home/End move between questions.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header (sticky on wide screens) |
items | readonly FaqItem[] | { question, answer: ReactNode } |
multiple | boolean | false; one answer open at a time |
contact | { text, action } | null | Support line under the header; null hides it |
scheme | "dark" | "light" | dark |
accent | string (hex) | Sets --vb-accent for the whole block |
className / style | string / CSSProperties | Applied to the section root |
children | ReactNode | Replaces the default content entirely |