{"success":true,"data":{"block":{"id":"stats-card-group","name":"Stats Card Group","title":"Stats Card Group","category":"Stats","categorySlug":"stats","description":"A compact stats display featuring three metrics in a bordered card with icons and optional avatar stacks. Each stat shows an icon, large value, and label. The first stat can include a stacked avatar group to represent users or customers. Ideal for social proof sections, trust indicators, or compact dashboard summaries.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288932/5buz4db6pgoluc9omsplob8yvavj/stats-card-group-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288933/x5f9vc44qyvfdhraqsq2hw65kb46/stats-card-group-mobile.jpg"},"componentPath":"blocks/stats/stats-card-group.tsx","code":"import { StatsCardGroup } from \"@opensite/ui/blocks/stats/stats-card-group\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <StatsCardGroup\n      stats={[\n        {\n          icon: \"lucide/users\",\n          value: \"2,000+\",\n          label: \"Happy Customers\",\n          showAvatars: true,\n        },\n        {\n          icon: \"lucide/star\",\n          value: \"4.9/5\",\n          label: \"Average Rating\",\n        },\n        {\n          icon: \"lucide/shield-check\",\n          value: \"99.9%\",\n          label: \"Uptime Guarantee\",\n        },\n      ]}\n      avatars={[\n        {\n          src: imagePlaceholders[109],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[102],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[67],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[77],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[88],\n          alt: \"Customer avatar\",\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"stats":{"type":"array","description":"Array of stats to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/users\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"value":{"type":"object","description":"The stat value (e.g., \"2,000+\", \"4.9/5\", \"99.9%\")","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"showAvatars":{"type":"boolean","description":"Whether to show avatar stack","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat","required":false}},"typeLabel":"CardGroupStat"},"typeLabel":"CardGroupStat[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"avatars":{"type":"array","description":"Avatar images to display in the stack","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Avatar image source URL","required":true},"alt":{"type":"string","description":"Alt text for the avatar","required":true},"className":{"type":"string","description":"Additional CSS classes for the avatar","required":false}},"typeLabel":"AvatarItem"},"typeLabel":"AvatarItem[]","required":false},"avatarsSlot":{"type":"object","description":"Custom slot for rendering avatars (overrides avatars 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},"cardClassName":{"type":"string","description":"Additional CSS classes for the card wrapper","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats grid","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},"statIconClassName":{"type":"string","description":"Additional CSS classes for stat icons","required":false},"avatarsClassName":{"type":"string","description":"Additional CSS classes for the avatar stack","required":false},"optixFlowConfig":{"type":"object","description":"Optional configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","cards","icons","avatars","social-proof","trust","compact","group"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'stats' since the stats element is a 3-column card layout. Only use real, verifiable stat values from the system — do not invent metrics. If a stat uses 'showAvatars', supply real avatar image URLs from the media library via the 'avatars' array (5 avatars is the canonical count). DO NOT USE this block if you do not have real stat data to display. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:16.366Z"}