content
Feature Item
Reusable feature item with icon, title, and short description for feature grids.
#feature#item#benefit#card
Storyblok Schema
json
{
"$bloktastic": {
"version": "1.0.0"
},
"name": "feature_item",
"display_name": "Feature Item",
"is_root": false,
"is_nestable": true,
"schema": {
"icon": {
"type": "text",
"pos": 0,
"display_name": "Icon Name",
"description": "Icon identifier from your icon set"
},
"title": {
"type": "text",
"pos": 1,
"display_name": "Title",
"description": "Feature title",
"required": true
},
"description": {
"type": "textarea",
"pos": 2,
"display_name": "Description",
"description": "Short feature explanation",
"required": true
},
"link": {
"type": "multilink",
"pos": 3,
"display_name": "Link",
"description": "Optional link for more details"
}
},
"preview_field": "title"
} Generation Prompt
md
# Feature Item
## Purpose
Reusable feature item with icon, title, and short description for feature grids.
## Storyblok Schema Fields
- `icon` (text): Icon identifier from your icon set
- `title` (text, required): Feature title
- `description` (textarea, required): Short feature explanation
- `link` (multilink): Optional link for more details
## 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 FeatureItemProps {
// 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/feature-item
Reusable feature item with icon, title, and short description for feature grids.
## Installation
```bash
bloktastic add @bloktastic/feature-item
```
## Fields
| Field | Type | Required | Description |
|---|---|---|---|
| icon | text | No | Icon identifier from your icon set |
| title | text | Yes | Feature title |
| description | textarea | Yes | Short feature explanation |
| link | multilink | No | Optional link for more details |
## Notes
- Category: `content`
- Tags: `feature`, `item`, `benefit`, `card`