Pricing Tier

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "pricing_tier",
  "display_name": "Pricing Tier",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "plan_name": {
      "type": "text",
      "pos": 0,
      "display_name": "Plan Name",
      "description": "Tier name, e.g. Pro",
      "required": true
    },
    "price": {
      "type": "text",
      "pos": 1,
      "display_name": "Price",
      "description": "Price text, e.g. $29",
      "required": true
    },
    "billing_period": {
      "type": "text",
      "pos": 2,
      "display_name": "Billing Period",
      "description": "Period text, e.g. /month"
    },
    "feature_list": {
      "type": "textarea",
      "pos": 3,
      "display_name": "Feature List",
      "description": "One feature per line",
      "required": true
    },
    "cta_label": {
      "type": "text",
      "pos": 4,
      "display_name": "CTA Label",
      "description": "Button label",
      "required": true
    },
    "cta_link": {
      "type": "multilink",
      "pos": 5,
      "display_name": "CTA Link",
      "description": "Button destination"
    },
    "highlighted": {
      "type": "boolean",
      "pos": 6,
      "display_name": "Highlighted",
      "default_value": false,
      "description": "Visually emphasize this tier"
    }
  },
  "preview_field": "plan_name"
}

# Pricing Tier

## Purpose
Single pricing card tier with plan name, price, features, and CTA settings.

## Storyblok Schema Fields
- `plan_name` (text, required): Tier name, e.g. Pro
- `price` (text, required): Price text, e.g. $29
- `billing_period` (text): Period text, e.g. /month
- `feature_list` (textarea, required): One feature per line
- `cta_label` (text, required): Button label
- `cta_link` (multilink): Button destination
- `highlighted` (boolean): Visually emphasize this tier

## 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 PricingTierProps {
  // 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/pricing-tier

Single pricing card tier with plan name, price, features, and CTA settings.

## Installation

```bash
bloktastic add @bloktastic/pricing-tier
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| plan_name | text | Yes | Tier name, e.g. Pro |
| price | text | Yes | Price text, e.g. $29 |
| billing_period | text | No | Period text, e.g. /month |
| feature_list | textarea | Yes | One feature per line |
| cta_label | text | Yes | Button label |
| cta_link | multilink | No | Button destination |
| highlighted | boolean | No | Visually emphasize this tier |

## Notes
- Category: `commerce`
- Tags: `pricing`, `tier`, `plan`, `saas`