FAQ accordion
Let visitors expand questions to read the answers without showing every answer at once.
Code name: Accordion · Category: Collections
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use an accordion for genuine questions about your services, process or getting started. Keep essential information visible elsewhere on the page.
In the editor
- Add a question and answer for each item.
- Keep the questions specific to your service.
- Open each item in preview to check its answer.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Accordion data={[{ id: 1, heading: "How do we get started?", details: "Use the contact page to tell us what you need." }]} />Behaviour and limitations
- Items use id, heading and details. Put content in data; the block is self-closing.
- Preserve other questions when changing one answer. Do not invent policies or business facts to fill an FAQ.
Content model
Add or edit FAQ copy inside data. Use heading for the question and details for the answer. Keep Accordion self-closing; do not add headings, HTML, Markdown, or children.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
data | array | [{"id":1,"heading":"Fist FAQ Question?","details":"Short description and explanation."},{"id":2,"heading":"Second FAQ Question?","details":"Short description and explanation."}] (renderer) | Content Data. See the usage notes for this block. |
size | "medium", "large" | "medium" (renderer) | Size. See the usage notes for this block. |
colorVariant | "primary", "secondary", "black", "white", "inherit" | "inherit" (renderer) | Color Variant. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
