Pricing Section

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "pricing_section",
  "display_name": "Pricing Section",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "headline": {
      "type": "text",
      "pos": 0,
      "display_name": "Headline",
      "description": "Pricing section headline",
      "required": true
    },
    "subline": {
      "type": "textarea",
      "pos": 1,
      "display_name": "Subline",
      "description": "Optional section copy"
    },
    "tiers": {
      "type": "bloks",
      "pos": 2,
      "display_name": "Pricing Tiers",
      "description": "List of pricing tier items",
      "required": true,
      "restrict_components": true,
      "component_whitelist": [
        "pricing_tier"
      ]
    },
    "show_annual_toggle": {
      "type": "boolean",
      "pos": 3,
      "display_name": "Show Annual Toggle",
      "default_value": false,
      "description": "Display monthly/annual UI switch"
    },
    "note": {
      "type": "text",
      "pos": 4,
      "display_name": "Footnote",
      "description": "Optional legal/pricing note"
    }
  },
  "preview_field": "headline"
}

# Pricing Section

## Purpose
Pricing block with nested pricing tiers and optional comparison context.

## Storyblok Schema Fields
- `headline` (text, required): Pricing section headline
- `subline` (textarea): Optional section copy
- `tiers` (bloks, required): List of pricing tier items
- `show_annual_toggle` (boolean): Display monthly/annual UI switch
- `note` (text): Optional legal/pricing note

## 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 PricingSectionProps {
  // 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-section

Pricing block with nested pricing tiers and optional comparison context.

## Installation

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

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| headline | text | Yes | Pricing section headline |
| subline | textarea | No | Optional section copy |
| tiers | bloks | Yes | List of pricing tier items |
| show_annual_toggle | boolean | No | Display monthly/annual UI switch |
| note | text | No | Optional legal/pricing note |

## Notes
- Category: `sections`
- Tags: `pricing`, `plans`, `conversion`, `saas`