{"success":true,"data":{"block":{"id":"stats-primary-secondary","name":"Stats Primary Secondary","title":"Stats Primary Secondary","category":"Stats","categorySlug":"stats","description":"A two-column stats layout featuring one prominent primary metric with a badge indicator, alongside a row of secondary supporting stats. The primary stat is emphasized with large typography and a verification badge, while secondary stats are displayed in a clean grid with a vertical divider. Ideal for highlighting a key achievement with supporting metrics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288946/bsfdnq1evrm3yh18diynkhbzy5p0/stats-primary-secondary-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288947/dfoy9qym72kwb09pt2bihg4u0qev/stats-primary-secondary-mobile.jpg"},"componentPath":"blocks/stats/stats-primary-secondary.tsx","code":"import { StatsPrimarySecondary } from \"@opensite/ui/blocks/stats/stats-primary-secondary\";\n\nexport default function Demo() {\n  return (\n    <StatsPrimarySecondary\n      primaryValue=\"92%\"\n      primaryBadge=\"+7% this month\"\n      primaryDescription=\"of users report improved productivity after adopting our platform\"\n      secondaryStats={[\n        { value: \"99.95%\", label: \"Uptime reliability\" },\n        { value: \"2,000+\", label: \"Enterprise partners\" },\n        { value: \"85%\", label: \"Cost reduction\" },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"primaryValue":{"type":"object","description":"Primary stat value (large, prominent)","typeLabel":"React.ReactNode","required":true},"primaryBadge":{"type":"object","description":"Primary stat badge content","typeLabel":"React.ReactNode","required":false},"primaryBadgeSlot":{"type":"object","description":"Custom slot for primary badge (overrides primaryBadge)","typeLabel":"React.ReactNode","required":false},"primaryDescription":{"type":"object","description":"Primary stat description","typeLabel":"React.ReactNode","required":true},"primarySlot":{"type":"object","description":"Custom slot for primary section (overrides primaryValue/primaryBadge/primaryDescription)","typeLabel":"React.ReactNode","required":false},"secondaryStats":{"type":"array","description":"Array of secondary stats to display","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"The stat value (e.g., \"99.95%\", \"2,000+\", \"85%\")","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"The label describing the stat","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the stat","required":false}},"typeLabel":"SecondaryStat"},"typeLabel":"SecondaryStat[]","required":false,"minItems":2,"maxItems":4},"secondaryStatsSlot":{"type":"object","description":"Custom slot for rendering secondary stats (overrides secondaryStats 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},"primaryClassName":{"type":"string","description":"Additional CSS classes for the primary section","required":false},"primaryValueClassName":{"type":"string","description":"Additional CSS classes for the primary value","required":false},"primaryBadgeClassName":{"type":"string","description":"Additional CSS classes for the primary badge","required":false},"primaryDescriptionClassName":{"type":"string","description":"Additional CSS classes for the primary description","required":false},"secondaryClassName":{"type":"string","description":"Additional CSS classes for the secondary section","required":false},"secondaryValueClassName":{"type":"string","description":"Additional CSS classes for secondary stat values","required":false},"secondaryLabelClassName":{"type":"string","description":"Additional CSS classes for secondary stat labels","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"secondaryStats[].value":{"type":"object","description":"","required":true},"secondaryStats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"primaryValue":"92%","primaryBadge":"+7% this month","primaryDescription":"of users report improved productivity after adopting our platform","secondaryStats":[{"value":"99.95%","label":"Uptime reliability"},{"value":"2,000+","label":"Enterprise partners"},{"value":"85%","label":"Cost reduction"}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","primary","secondary","highlight","achievement","badge","two-column"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The primaryValue is displayed at very large scale — keep it concise (e.g. '92%', '$3.2M'). The primaryBadge appears inline with the value as a verification badge — use a short trend indicator. The primaryDescription provides context for the primary value. Secondary stats appear in a grid below — provide 2 to 4 for balanced layout.","usageRequirements":{"requiredProps":["primaryValue"],"propConstraints":{"primaryValue":{"required":true,"note":"Prominent headline metric. Source-backed. Concise (e.g. '92%', '$3.2M')."},"primaryDescription":{"required":true,"note":"Context sentence for the primary metric."},"secondaryStats":{"minItems":2,"maxItems":4},"secondaryStats[].value":{"required":true,"note":"Source-backed metric value."},"secondaryStats[].label":{"required":true,"note":"Short label for the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:11:59.775Z"}