{"success":true,"data":{"block":{"id":"stats-icon-cards","name":"Stats Icon Cards","title":"Stats Icon Cards","category":"Stats","categorySlug":"stats","description":"A modern stats grid featuring bordered cards with icons, large numerical values, and growth indicators. Each card displays a metric with a circular icon badge, prominent value, and color-coded growth trend. Ideal for dashboards, analytics sections, or showcasing key performance indicators with visual hierarchy.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288938/urt7yb9mjarmi4emo69k4gdz6bi3/stats-icon-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288939/hyynr6l3xvzxygjo0ovp3rk4j3on/stats-icon-cards-mobile.jpg"},"componentPath":"blocks/stats/stats-icon-cards.tsx","code":"import { StatsIconCards } from \"@opensite/ui/blocks/stats/stats-icon-cards\";\n\nexport default function Demo() {\n  return (\n    <StatsIconCards\n      heading=\"Our Growth in Numbers\"\n      description=\"Key metrics that showcase our impact across the platform\"\n      stats={[\n        {\n          label: \"Active Users\",\n          value: \"120K+\",\n          growth: \"18% growth\",\n          isPositive: true,\n          icon: \"lucide/users\",\n        },\n        {\n          label: \"Revenue\",\n          value: \"$3.2M\",\n          growth: \"32% increase\",\n          isPositive: true,\n          icon: \"lucide/dollar-sign\",\n        },\n        {\n          label: \"Response Time\",\n          value: \"45ms\",\n          growth: \"12% faster\",\n          isPositive: true,\n          icon: \"lucide/clock\",\n        },\n        {\n          label: \"Support Tickets\",\n          value: \"234\",\n          growth: \"8% decrease\",\n          isPositive: true,\n          icon: \"lucide/ticket\",\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"stats":{"type":"array","description":"Array of stat items to display","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label describing the stat","typeLabel":"React.ReactNode","required":true},"value":{"type":"object","description":"The stat value (e.g., \"120K+\", \"$3.2M\", \"9.5%\")","typeLabel":"React.ReactNode","required":true},"growth":{"type":"object","description":"Growth indicator text (e.g., \"18% growth\", \"+2 min\")","typeLabel":"React.ReactNode","required":true},"isPositive":{"type":"boolean","description":"Whether the growth is positive (green) or negative (red)","required":false},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/users\", \"lucide/clock\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"StatIconItem"},"typeLabel":"StatIconItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statGrowthClassName":{"type":"string","description":"Additional CSS classes for stat growth indicators","required":false},"statIconClassName":{"type":"string","description":"Additional CSS classes for stat icons","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","metrics","icons","cards","growth","trends","dashboard","analytics","kpi"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'stats' since the stats element is a 4-column grid layout. Only use real, verifiable stat values from the system — do not invent metrics. Each stat requires a 'growth' field and an 'isPositive' flag — only supply growth indicators that are backed by real data; do not fabricate percentage changes. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:24.376Z"}