Stat Item

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "stat_item",
  "display_name": "Stat Item",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "value": {
      "type": "text",
      "pos": 0,
      "display_name": "Value",
      "description": "Primary metric value, e.g. 125K",
      "required": true
    },
    "label": {
      "type": "text",
      "pos": 1,
      "display_name": "Label",
      "description": "What the metric represents",
      "required": true
    },
    "helper": {
      "type": "text",
      "pos": 2,
      "display_name": "Helper Text",
      "description": "Optional context or change indicator"
    }
  },
  "preview_field": "value"
}

# Stat Item

## Purpose
Single KPI/stat block for metrics such as growth, users, and performance.

## Storyblok Schema Fields
- `value` (text, required): Primary metric value, e.g. 125K
- `label` (text, required): What the metric represents
- `helper` (text): Optional context or change indicator

## 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 StatItemProps {
  // 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/stat-item

Single KPI/stat block for metrics such as growth, users, and performance.

## Installation

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

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| value | text | Yes | Primary metric value, e.g. 125K |
| label | text | Yes | What the metric represents |
| helper | text | No | Optional context or change indicator |

## Notes
- Category: `content`
- Tags: `stats`, `kpi`, `metric`, `numbers`