{"success":true,"data":{"block":{"id":"faq-centered-accordion","name":"Centered Accordion FAQ","title":"FAQ Centered Accordion","category":"Faq","categorySlug":"faq","description":"A centered FAQ section with a prominent heading, descriptive subtext, and collapsible accordion items. The centered layout creates visual hierarchy and draws attention to the content. Perfect for landing pages or dedicated FAQ sections that need a polished, professional appearance.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293098/siuepu7y06jd1renp4l10qyvw9ji/cleanshot-2026-03-03-at-14-31-02.png","mobile":"https://cdn.ing/assets/i/r/293097/9zklo65hcjbodh4w0mf366nh2bv8/cleanshot-2026-03-03-at-14-31-14.png"},"componentPath":"blocks/faq/faq-centered-accordion.tsx","code":"import { FaqCenteredAccordion } from \"@opensite/ui/blocks/faq/faq-centered-accordion\";\n\nexport default function Demo() {\n  return (\n    <FaqCenteredAccordion\n      heading=\"Have Questions?\"\n      description=\"Find answers to the most commonly asked questions about our platform, features, and policies.\"\n      items={[\n        {\n          id: \"features\",\n          question: \"What features are included in the base plan?\",\n          answer:\n            \"The base plan includes unlimited projects, 10GB storage, basic reporting, email support, mobile apps, API access, and integrations with 25+ popular tools.\",\n        },\n        {\n          id: \"team-size\",\n          question: \"Is there a limit on team size?\",\n          answer:\n            \"Starter plans support up to 10 users, Professional plans up to 50 users, and Enterprise plans have no user limits with volume discounts available.\",\n        },\n        {\n          id: \"billing\",\n          question: \"How does billing work?\",\n          answer:\n            \"We offer both monthly and annual billing. Annual plans save 20% and are billed once per year. You can upgrade, downgrade, or cancel at any time.\",\n        },\n        {\n          id: \"mobile\",\n          question: \"Do you have mobile apps?\",\n          answer:\n            \"Yes, we have native iOS and Android apps with full feature parity. Download them from the App Store or Google Play and access your work anywhere.\",\n        },\n        {\n          id: \"customization\",\n          question: \"Can I customize the platform?\",\n          answer:\n            \"Absolutely. Customize dashboards, workflows, fields, templates, notifications, and branding. Enterprise plans also support white-labeling and custom domains.\",\n        },\n      ]}\n      pattern=\"grid1\"\n      patternOpacity={1}\n      background=\"muted\"\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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"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},"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","centered","help","support","professional","landing-page"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this centered single-column accordion. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:19.301Z"}