{"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\";\n\nconst AVATAR_URL =\n \"https://toastability-production.s3.amazonaws.com/0kx9umbfmv881wt9dfqnohv8efgi\";\n\nexport default function Demo() {\n return (\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":true,"count":3},"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,"minItems":2,"maxItems":6,"mediaHints":{"path":"avatars[].src","roles":["avatar","profile"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Customer or user avatar image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true},"avatars[].src":{"type":"object","description":"","required":true}},"exampleProps":{"stats":[{"icon":"lucide/users","value":"2,000+","label":"Happy Customers","showAvatars":true},{"icon":"lucide/star","value":"4.9/5","label":"Average Rating"},{"icon":"lucide/shield-check","value":"99.9%","label":"Uptime Guarantee"}],"avatars":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"}]},"dependencies":["@opensite/ui"],"tags":["stats","cards","icons","avatars","social-proof","trust","compact","group"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The component renders exactly 3 stats in a bordered card (the grid is fixed at md:grid-cols-3). Set 'showAvatars: true' on at most one stat to display the avatar stack alongside it. The 'avatars' array is only rendered when a stat has showAvatars=true. All avatar src values must be absolute URLs to real images — never use placeholder variables.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"count":3,"note":"Exactly 3 stats for the 3-column card layout."},"stats[].value":{"required":true,"note":"Source-backed metric value."},"stats[].label":{"required":true,"note":"Short label for the metric."},"avatars":{"minItems":2,"maxItems":6,"note":"Only rendered when a stat has showAvatars=true. Must be absolute URLs."},"avatars[].src":{"required":true,"note":"Absolute URL to a real image asset."}},"mediaSlots":{"avatars[].src":{"path":"avatars[].src","roles":["avatar","profile"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Customer or user avatar image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}}},"timestamp":"2026-06-27T20:00:09.089Z"}