Library · Content Sections

Content / FAQ Accordion

Section wrapper around the Accordion primitive — heading, optional intro, and a Q&A list. Single-open (native <details name> grouping) by default. Tone via the shared contract.

Figma: Content / FAQ Accordion ↗

Live preview — edit theme bottom-right

---
import FaqAccordion from "../components/figma/FaqAccordion.astro";
---
<FaqAccordion
  heading="Frequently asked questions"
  intro="Everything you need to know about working with us. Can't find an answer? Get in touch and we'll help."
  tone="base-200"
  items={[
    { q: "How long does a project take?", a: "Most builds run two to six weeks depending on scope, with a clear timeline agreed up front so you always know what's next." },
    { q: "Do you work with existing brand guidelines?", a: "Absolutely. We can work within your established brand, or help evolve it if you'd like a refresh alongside the build." },
    { q: "What happens after launch?", a: "Minor revisions are covered for thirty days after go-live, and we offer ongoing support and maintenance plans for longer-term peace of mind." },
    { q: "Can I update the content myself?", a: "Yes — we hand over a site you can maintain, with training and documentation so your team stays in control." },
  ]}
/>

Props

Name	Type	Required	Description
`heading`	`string;`	Yes	Section heading
`intro`	`string;`	—	Optional intro paragraph under the heading
`items`	`FaqItem[];`	Yes	Question/answer pairs
`singleOpen`	`boolean;`	—	When true, only one item stays open at a time (native <details name> grouping). (default: true)
`variant`	`"default" \| "chevron";`	—	Accordion visual variant (plus/minus vs chevron) (default: 'chevron')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<FaqAccordion
  heading="Frequently asked questions"
  intro="Everything you need to know about working with us."
  tone="base-200"
  items={[
    { q: "How long does a project take?", a: "Most builds run two to six weeks depending on scope." },
    { q: "What happens after launch?", a: "Minor revisions are covered for thirty days after go-live." },
  ]}
/>