Teaser Card

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "teaser",
  "display_name": "Teaser",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "eyebrow": {
      "type": "text",
      "pos": 0,
      "display_name": "Eyebrow"
    },
    "headline": {
      "type": "text",
      "pos": 1,
      "required": true,
      "display_name": "Headline"
    },
    "body": {
      "type": "textarea",
      "pos": 2,
      "display_name": "Body"
    },
    "image": {
      "type": "bloks",
      "pos": 3,
      "restrict_components": true,
      "component_whitelist": [
        "image"
      ],
      "maximum": 1
    },
    "cta": {
      "type": "bloks",
      "pos": 4,
      "restrict_components": true,
      "component_whitelist": [
        "button"
      ],
      "maximum": 1
    },
    "theme": {
      "type": "option",
      "pos": 5,
      "default_value": "light",
      "options": [
        {
          "name": "Light",
          "value": "light"
        },
        {
          "name": "Dark",
          "value": "dark"
        },
        {
          "name": "Gradient",
          "value": "gradient"
        }
      ]
    }
  },
  "preview_field": "headline"
}

# Teaser Card Component

## Purpose
Build a reusable teaser card for featured content, services, or product snippets.

## Storyblok Schema Fields
- `eyebrow` (text)
- `headline` (text, required)
- `body` (textarea)
- `image` (bloks: image)
- `cta` (bloks: button)
- `theme` (option)

## Visual Requirements
- Card with clear spacing and hierarchy.
- Optional media at top.
- CTA anchored near bottom when present.
- Hover elevation and subtle motion.

## Accessibility
- Maintain heading hierarchy.
- Ensure card remains readable in all themes.
- Provide meaningful alt text for media.

## Edge Cases
- No image: keep balanced spacing.
- No CTA: render as informational card.
- Long headline/body: avoid layout collapse.

# @bloktastic/teaser

Card-style teaser with optional image and CTA.

## Install

```bash
bloktastic add @bloktastic/teaser
```