{"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":true,"minItems":2,"maxItems":8},"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},"stats[].label":{"type":"object","description":"","required":true},"stats[].value":{"type":"object","description":"","required":true},"stats[].growth":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Our Growth in Numbers","description":"Key metrics that showcase our impact across the platform","stats":[{"label":"Active Users","value":"120K+","growth":"18% growth","isPositive":true,"icon":"lucide/users"},{"label":"Revenue","value":"$3.2M","growth":"32% increase","isPositive":true,"icon":"lucide/dollar-sign"},{"label":"Response Time","value":"45ms","growth":"12% faster","isPositive":true,"icon":"lucide/clock"},{"label":"Support Tickets","value":"234","growth":"8% decrease","isPositive":true,"icon":"lucide/ticket"}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","icons","cards","growth","trends","dashboard","analytics","kpi"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each card requires a value, label, and growth field. The 'growth' text describes the trend (e.g. '18% growth', '} ${2 min'). Set isPositive correctly — false renders in destructive color. Icon names use 'prefix/name' format (e.g. 'lucide/users'). The grid renders 4 columns on large screens — provide 4 stats for best visual balance.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":8,"note":"4 items recommended for the 4-column grid layout."},"stats[].label":{"required":true,"note":"Short metric label."},"stats[].value":{"required":true,"note":"Source-backed metric value."},"stats[].growth":{"required":true,"note":"Trend text like '18% growth' or '8% decrease'."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:02:38.674Z"}