Faq

section · static (no JavaScript) · no children. All components: component playground.

Description for the model

Questions and answers as an accessible disclosure list (no JavaScript).

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "Faq",
  "props": {
    "id": "faq",
    "eyebrow": "FAQ",
    "title": "Questions",
    "items": [
      {
        "q": "Do I need equipment?",
        "a": "A scale and a kettle are enough to start."
      },
      {
        "q": "Can I take it on my phone?",
        "a": "Yes, every lesson works on small screens."
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "faq"
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
items	array of objects	yes	Questions. min 1 items, max 12 items
items[].q	string	yes	Question. max length 200
items[].a	string	yes	Answer. max length 1000

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Questions
Do I need equipment?
Can I take it on my phone?

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "items": [
    {
      "q": "No answer"
    }
  ]
}

Issues:

• /items/0/a is required

Rendered as:

No answer

Accessibility

axe-core: 16 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.