{"success":true,"data":{"block":{"id":"faq-card-categories","name":"Card-Based Categorized FAQ","title":"FAQ Card Categories","category":"Faq","categorySlug":"faq","description":"A categorized FAQ layout with each category displayed in its own card container, arranged in a responsive grid. Features a subtle plus-pattern background for visual texture. Each card has a header and accordion content. Great for visually separating different FAQ topics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289188/ncm5rtqzvjuuouzt6g0jb5mfbkk2/cleanshot-2026-01-29-at-15-14-42.png","mobile":"https://cdn.ing/assets/i/r/289186/6nmr2mhyq2kjkuttftkmyhny95uj/blocks-faq-card-categories-mobile.png"},"componentPath":"blocks/faq/faq-card-categories.tsx","code":"import { FaqCardCategories } from \"@opensite/ui/blocks/faq/faq-card-categories\";\n\nexport default function Demo() {\n  return (\n    <FaqCardCategories\n      heading=\"Explore Topics\"\n      description=\"Select a topic to view related questions and answers.\"\n      categories={[\n        {\n          title: \"Pricing & Plans\",\n          items: [\n            {\n              id: \"free-plan\",\n              question: \"Do you offer a free plan?\",\n              answer:\n                \"We offer a 14-day free trial with full access to Professional features. After the trial, choose from our Starter, Professional, or Enterprise plans.\",\n            },\n            {\n              id: \"enterprise-pricing\",\n              question: \"How is Enterprise pricing determined?\",\n              answer:\n                \"Enterprise pricing is customized based on your team size, feature requirements, and support needs. Contact our sales team for a personalized quote.\",\n            },\n          ],\n        },\n        {\n          title: \"Technical Details\",\n          items: [\n            {\n              id: \"browser-support\",\n              question: \"Which browsers are supported?\",\n              answer:\n                \"We support the latest versions of Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported. Mobile browsers on iOS and Android are fully supported.\",\n            },\n            {\n              id: \"offline-mode\",\n              question: \"Does offline mode work?\",\n              answer:\n                \"Yes, our mobile apps support offline mode. View and edit content without internet, and changes sync automatically when you reconnect.\",\n            },\n          ],\n        },\n        {\n          title: \"Data & Privacy\",\n          items: [\n            {\n              id: \"data-location\",\n              question: \"Where is my data stored?\",\n              answer:\n                \"Data is stored in secure AWS data centers. You can choose your preferred region (US, EU, or Asia-Pacific) to comply with data residency requirements.\",\n            },\n            {\n              id: \"data-deletion\",\n              question: \"What happens to my data if I cancel?\",\n              answer:\n                \"Your data is retained for 30 days after cancellation. During this period, you can reactivate your account or export your data. After 30 days, data is permanently deleted.\",\n            },\n          ],\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"categories":{"type":"array","description":"Array of FAQ categories","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"items":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"question":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"answer":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"FaqItem"},"typeLabel":"FaqItem[]","required":true}},"typeLabel":"FaqCategory"},"typeLabel":"FaqCategory[]","required":false},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories 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":"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},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header 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},"gridClassName":{"type":"string","description":"Additional CSS classes for the categories grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for category cards","required":false},"categoryTitleClassName":{"type":"string","description":"Additional CSS classes for category titles","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"accordionItemClassName":{"type":"string","description":"Additional CSS classes for accordion items","required":false},"accordionTriggerClassName":{"type":"string","description":"Additional CSS classes for accordion triggers","required":false},"accordionContentClassName":{"type":"string","description":"Additional CSS classes for accordion content","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","cards","categories","grid","pattern","organized","visual"],"performance":{},"importantUsageNotes":"Organize questions into multiples of 3 categories (ideally 3 or 6) since the layout is a 3-column desktop grid. Each category requires a 'title' and 2-4 'items'. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:10.676Z"}