Early research preview — this project is an experiment and may change significantly.
Bloktastic

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`