Testimonial Item

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "testimonial_item",
  "display_name": "Testimonial Item",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "quote": {
      "type": "textarea",
      "pos": 0,
      "display_name": "Quote",
      "description": "Customer quote text",
      "required": true
    },
    "author_name": {
      "type": "text",
      "pos": 1,
      "display_name": "Author Name",
      "description": "Customer name",
      "required": true
    },
    "author_role": {
      "type": "text",
      "pos": 2,
      "display_name": "Author Role",
      "description": "Title and company"
    },
    "author_image": {
      "type": "asset",
      "pos": 3,
      "display_name": "Author Image",
      "description": "Optional avatar image"
    },
    "rating": {
      "type": "option",
      "pos": 4,
      "display_name": "Rating",
      "default_value": "none",
      "options": [
        {
          "name": "No Rating",
          "value": "none"
        },
        {
          "name": "5 Stars",
          "value": "5"
        },
        {
          "name": "4 Stars",
          "value": "4"
        }
      ],
      "description": "Optional star rating"
    }
  },
  "preview_field": "author_name"
}

# Testimonial Item

## Purpose
Customer quote item with author details and optional avatar image.

## Storyblok Schema Fields
- `quote` (textarea, required): Customer quote text
- `author_name` (text, required): Customer name
- `author_role` (text): Title and company
- `author_image` (asset): Optional avatar image
- `rating` (option): Optional star rating

## 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 TestimonialItemProps {
  // 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.

# @bloktastic/testimonial-item

Customer quote item with author details and optional avatar image.

## Installation

```bash
bloktastic add @bloktastic/testimonial-item
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| quote | textarea | Yes | Customer quote text |
| author_name | text | Yes | Customer name |
| author_role | text | No | Title and company |
| author_image | asset | No | Optional avatar image |
| rating | option | No | Optional star rating |

## Notes
- Category: `content`
- Tags: `testimonial`, `quote`, `social-proof`, `review`