sections
FAQ Section
Frequently asked questions wrapper with optional intro and nested accordion block.
#faq#questions#support#accordion
Storyblok Schema
json
{
"$bloktastic": {
"version": "1.0.0"
},
"name": "faq_section",
"display_name": "FAQ Section",
"is_root": false,
"is_nestable": true,
"schema": {
"headline": {
"type": "text",
"pos": 0,
"display_name": "Headline",
"description": "FAQ heading",
"required": true
},
"intro": {
"type": "textarea",
"pos": 1,
"display_name": "Intro",
"description": "Optional helper text"
},
"faq_accordion": {
"type": "bloks",
"pos": 2,
"display_name": "FAQ Accordion",
"description": "Embed a single accordion blok",
"required": true,
"restrict_components": true,
"component_whitelist": [
"accordion"
],
"maximum": 1
}
},
"preview_field": "headline"
} Generation Prompt
md
# FAQ Section
## Purpose
Frequently asked questions wrapper with optional intro and nested accordion block.
## Storyblok Schema Fields
- `headline` (text, required): FAQ heading
- `intro` (textarea): Optional helper text
- `faq_accordion` (bloks, required): Embed a single accordion blok
## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.
## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.
## Example Props Structure
```typescript
interface FaqSectionProps {
// Map Storyblok fields to your frontend props here
}
```
## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.
README
md
# @bloktastic/faq-section
Frequently asked questions wrapper with optional intro and nested accordion block.
## Installation
```bash
bloktastic add @bloktastic/faq-section
```
## Fields
| Field | Type | Required | Description |
|---|---|---|---|
| headline | text | Yes | FAQ heading |
| intro | textarea | No | Optional helper text |
| faq_accordion | bloks | Yes | Embed a single accordion blok |
## Notes
- Category: `sections`
- Tags: `faq`, `questions`, `support`, `accordion`