{"success":true,"data":{"block":{"id":"feature-checklist-three-column","name":"Feature Checklist Three Column","title":"Feature Checklist Three Column","category":"Features","categorySlug":"features","description":"Three-column layout with heading, dual checklists, and feature cards with images. First column has heading and description, middle columns have checklists, and feature cards below with badges and read more links.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290501/4oly16xatjgt9dws04g2wkxmu16u/feature-checklist-three-column-desktop.png","mobile":"https://cdn.ing/assets/i/r/290500/qzk0v3r7qir09zhfrpzji49fmvdn/feature-checklist-three-column-mobile.png"},"componentPath":"blocks/features/feature-checklist-three-column.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureChecklistThreeColumn } from \"@opensite/ui/blocks/features/feature-checklist-three-column\";\n\nexport default function Demo() {\n  return (\n    <FeatureChecklistThreeColumn\n      title=\"Build Any Kind of Website\"\n      checklistColumn1={[\n        \"Fully Responsive Design\",\n        \"Clean & Modern Interface\",\n        \"Lightning Fast Performance\",\n        \"SEO Optimized Structure\",\n      ]}\n      checklistColumn2={[\n        \"Accessible Components\",\n        \"Dark Mode Support\",\n        \"Cross-Browser Compatible\",\n        \"Mobile-First Approach\",\n      ]}\n      cards={[\n        {\n          title: \"Responsive Components\",\n          description:\n            \"Every component is built mobile-first and scales beautifully across all device sizes.\",\n          image: imagePlaceholders[34],\n          imageAlt: \"Responsive design showcase\",\n          badge: \"Featured\",\n          checklistItems: [\n            \"Adapts to any screen size automatically\",\n            \"Touch-optimized for mobile devices\",\n            \"Consistent experience across platforms\",\n          ],\n          link: \"#\",\n          linkLabel: \"Learn more\",\n        },\n        {\n          title: \"Performance Focused\",\n          description:\n            \"Optimized for speed with lazy loading, code splitting, and minimal bundle sizes.\",\n          image: imagePlaceholders[78],\n          imageAlt: \"Performance metrics\",\n          badge: \"Popular\",\n          checklistItems: [\n            \"Sub-second page load times\",\n            \"Lighthouse score of 95+\",\n            \"Optimized assets and images\",\n          ],\n          link: \"#\",\n          linkLabel: \"See benchmarks\",\n        },\n        {\n          title: \"Developer Experience\",\n          description:\n            \"Built with TypeScript, comprehensive docs, and examples that get you started fast.\",\n          image: imagePlaceholders[91],\n          imageAlt: \"Developer tools\",\n          badge: \"New\",\n          checklistItems: [\n            \"Full TypeScript support\",\n            \"Storybook documentation\",\n            \"Copy-paste code examples\",\n          ],\n          link: \"#\",\n          linkLabel: \"Explore docs\",\n        },\n      ]}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"checklistColumn1":{"type":"array","description":"First column checklist items","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistThreeColumnCheckItem"},"typeLabel":"string | FeatureChecklistThreeColumnCheckItem[]","required":false},"checklistColumn1Slot":{"type":"object","description":"Custom slot for first checklist column (overrides checklistColumn1)","typeLabel":"React.ReactNode","required":false},"checklistColumn2":{"type":"array","description":"Second column checklist items","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistThreeColumnCheckItem"},"typeLabel":"string | FeatureChecklistThreeColumnCheckItem[]","required":false},"checklistColumn2Slot":{"type":"object","description":"Custom slot for second checklist column (overrides checklistColumn2)","typeLabel":"React.ReactNode","required":false},"cards":{"type":"array","description":"Array of feature cards","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Card title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description content","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom image slot (overrides image)","typeLabel":"React.ReactNode","required":false},"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"checklistItems":{"type":"array","description":"Array of checklist items","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistThreeColumnCheckItem"},"typeLabel":"string | FeatureChecklistThreeColumnCheckItem[]","required":false},"link":{"type":"string","description":"Link URL","required":false},"linkLabel":{"type":"object","description":"Link label content","typeLabel":"React.ReactNode","required":false},"linkSlot":{"type":"object","description":"Custom link slot (overrides link and linkLabel)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureChecklistThreeColumnCard"},"typeLabel":"FeatureChecklistThreeColumnCard[]","required":false},"cardsSlot":{"type":"object","description":"Custom slot for rendering cards (overrides cards array)","typeLabel":"React.ReactNode","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},"headerGridClassName":{"type":"string","description":"Additional CSS classes for the header grid","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"checklistClassName":{"type":"string","description":"Additional CSS classes for the checklist columns","required":false},"cardsGridClassName":{"type":"string","description":"Additional CSS classes for the cards grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow 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},"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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","checklist","three-column","cards","images","badges","benefits"],"performance":{},"importantUsageNotes":"Supply exactly 3 items in the 'cards' array since the cards section is a 3-column grid. Each card requires a valid real 'image' — do not use this block if you don't have real images for all cards. Keep 'checklistItems' strings within each card to 3–5 succinct items to avoid overflow. Each checklist column ('checklistColumn1', 'checklistColumn2') should contain 4–8 short, succinct strings. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:28.678Z"}