AccordionBlock
Data-driven accordion block for CMS-managed FAQs, specifications, and policy content.
Best for
Import
import { AccordionBlock } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use AccordionBlock when the content comes from a CMS or API as a list of title and body pairs. It is the easiest way to ship FAQ sections, specification groups, and policy content without manually composing the base accordion primitives.
If you need custom triggers, nested layout inside each panel, or a hand-built composition, use the base Accordion primitive instead.
Composition notes
AccordionBlock is a data-driven wrapper around the base accordion system:
itemsis the source of truth for titles, HTML content, and per-item variants.variant="standard"fits general copy and FAQ content.variant="technical-data"fits denser specification-style content.variant="downloads"is useful when the body should read like attachment or document content.defaultValuelets you open the most important panel on first render.
Because the body is HTML-driven, keep editorial markup predictable and sanitized before it reaches the component.
Behavior and theming guidance
Start with concise panel titles. The block reads best when visitors can scan the list quickly before deciding what to open.
The wrapper inherits the visual language of the base accordion, so theme changes stay aligned with the rest of the docs and storefront. Focus styling and spacing around the surrounding section before changing the internal accordion treatment.
Examples
Live examples you can edit directly in the sandbox.
FAQ content
Use the standard variant when editors manage a familiar list of question and answer pairs from CMS data.
Technical data
The technical-data variant works well for dimension lists and other dense product details coming from editorial HTML.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id?: string | undefined; title: string; content: string; variant?: "standard" | "technical-data" | "downloads" | undefined; children?: ReactNode; }[] | — | Array of accordion panels to render |
| defaultValue | string | — | The id of the item that should be open by default |
| className | string | — | No description yet. |