#073
Default (closed)
Three independent Collapsible FAQ panels stacked with a small gap, all closed initially.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default (closed)" pattern (@codeatlasdev/ui demo #073, surfaces/collapsible) in my app.
Call get_demo({ ids: ["#073"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Short FAQ or help blocks where each answer expands on its own.
Keep these library parts, with the props and tokens the demo uses:
- Collapsible, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Stack gap="2" class="collapsible-faq">` with `max-width: 560px`
- 3 `<Collapsible` items with a `title`: What is a surface style?, How do presets work?, Is dark mode automatic?
- Each body is a `<p>` child, two of them include a `<code>` token
- Nothing is bound to the open state, each panel manages its own
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Collapsible
@codeatlasdev/ui - Stack
@codeatlasdev/ui
How it is built
- `<Stack gap="2" class="collapsible-faq">` with `max-width: 560px`
- 3 `<Collapsible` items with a `title`: What is a surface style?, How do presets work?, Is dark mode automatic?
- Each body is a `<p>` child, two of them include a `<code>` token
- Nothing is bound to the open state, each panel manages its own
Related
Loading source.