{
  "name": "MetricCardFourteen",
  "description": "Metrics section with animated title, tag badge, and metric cards with large values and descriptions.",
  "constraints": {
    "textRules": {
      "title": {
        "required": true,
        "example": "We're committed to sustainability and reducing our environmental impact.",
        "minChars": 10,
        "maxChars": 200
      },
      "tag": {
        "required": true,
        "example": "Impact",
        "minChars": 2,
        "maxChars": 30
      }
    },
    "metricRules": {
      "id": {
        "required": true,
        "example": "1",
        "note": "Unique identifier for each metric"
      },
      "value": {
        "required": true,
        "example": "16x",
        "minChars": 1,
        "maxChars": 10,
        "note": "Large metric value displayed prominently"
      },
      "description": {
        "required": true,
        "example": "By using 80% less steel, we've lowered our carbon footprint by 16x.",
        "minChars": 10,
        "maxChars": 200,
        "note": "Description text below the divider"
      }
    },
    "itemRules": {
      "minItems": 1,
      "maxItems": 4,
      "recommendedItems": 2
    }
  },
  "propsSchema": {
    "title": "string",
    "tag": "string",
    "metrics": "Array<{ id: string, value: string, description: string }>",
    "useInvertedBackground": "'noInvert' | 'invertDefault'",
    "ariaLabel?": "string (default: 'Metrics section')",
    "className?": "string"
  },
  "usageExample": "<MetricCardFourteen title=\"We're committed to sustainability and reducing our environmental impact.\" tag=\"Impact\" metrics={[{ id: '1', value: '16x', description: 'By using 80% less steel, we've lowered our carbon footprint.' }, { id: '2', value: '95%', description: 'Customer satisfaction rate across all products.' }]} useInvertedBackground=\"noInvert\" />",
  "do": [
    "Use for statistics displays",
    "Use for achievement showcases",
    "Requires metrics[]"
  ],
  "dont": [
    "Do not use more than 4 items",
    "Do not use more than 4 items"
  ],
  "editRules": {
    "textOnly": true,
    "layoutLocked": true,
    "styleLocked": true
  }
}