{"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":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"items":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"heading":"Browse by Category","description":"Find answers by topic area.","categories":[{"title":"Getting Started","items":[{"id":"gs-1","question":"How do I sign up?","answer":"Visit our website, click Get Started, and complete the registration form."}]},{"title":"Features","items":[{"id":"feat-1","question":"Can I customize my dashboard?","answer":"Yes, drag and drop widgets to configure your personal dashboard view."}]},{"title":"Integrations","items":[{"id":"int-1","question":"What tools do you integrate with?","answer":"We connect with Slack, Salesforce, Google Workspace, and 50+ others."}]}]},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","cards","categories","grid","pattern","organized","visual"],"performance":{},"importantUsageNotes":"Uses `categories` array — each category has a `title` and `items`. Each FAQ item requires a unique `id` along with `question` and `answer`. Renders in up to 3 columns on large screens, 2 on medium. Best with 3–6 categories for balanced grid appearance.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"categories":{"minItems":3,"maxItems":6}}}}},"timestamp":"2026-06-27T20:13:31.050Z"}