sections
Testimonial Grid
Testimonials section with nested testimonial items and flexible layout options.
#testimonials#social-proof#reviews#quotes
Storyblok Schema
json
{
"$bloktastic": {
"version": "1.0.0"
},
"name": "testimonial_grid",
"display_name": "Testimonial Grid",
"is_root": false,
"is_nestable": true,
"schema": {
"headline": {
"type": "text",
"pos": 0,
"display_name": "Headline",
"description": "Section headline",
"required": true
},
"intro": {
"type": "textarea",
"pos": 1,
"display_name": "Intro",
"description": "Optional supporting copy"
},
"testimonials": {
"type": "bloks",
"pos": 2,
"display_name": "Testimonials",
"description": "List of testimonial items",
"required": true,
"restrict_components": true,
"component_whitelist": [
"testimonial_item"
]
},
"columns": {
"type": "option",
"pos": 3,
"display_name": "Columns",
"default_value": "3",
"options": [
{
"name": "1 Column",
"value": "1"
},
{
"name": "2 Columns",
"value": "2"
},
{
"name": "3 Columns",
"value": "3"
}
],
"description": "Desktop column count"
}
},
"preview_field": "headline"
} Generation Prompt
md
# Testimonial Grid
## Purpose
Testimonials section with nested testimonial items and flexible layout options.
## Storyblok Schema Fields
- `headline` (text, required): Section headline
- `intro` (textarea): Optional supporting copy
- `testimonials` (bloks, required): List of testimonial items
- `columns` (option): Desktop column count
## 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 TestimonialGridProps {
// 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/testimonial-grid
Testimonials section with nested testimonial items and flexible layout options.
## Installation
```bash
bloktastic add @bloktastic/testimonial-grid
```
## Fields
| Field | Type | Required | Description |
|---|---|---|---|
| headline | text | Yes | Section headline |
| intro | textarea | No | Optional supporting copy |
| testimonials | bloks | Yes | List of testimonial items |
| columns | option | No | Desktop column count |
## Notes
- Category: `sections`
- Tags: `testimonials`, `social-proof`, `reviews`, `quotes`