{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-4","type":"registry:block","title":"Accordion embedded within a Card","description":"Accordion embedded within a Card","dependencies":[],"registryDependencies":["accordion","button","card"],"files":[{"path":"c-accordion-4.tsx","type":"registry:block","content":"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst items = [\n  {\n    value: \"plans\",\n    trigger: \"What subscription plans do you offer?\",\n    content: (\n      <>\n        <p>\n          <a href=\"#\" className=\"text-primary hover:underline\">\n            Annual billing is available\n          </a>{\" \"}\n          with a 20% discount. All plans include a 14-day free trial with no\n          credit card required.\n        </p>\n        <Button size=\"sm\" className=\"mt-4\">\n          View plans\n          <IconPlaceholder\n            lucide=\"ArrowUpRightIcon\"\n            tabler=\"IconArrowUpRight\"\n            hugeicons=\"ArrowUpRight01Icon\"\n            phosphor=\"ArrowUpRightIcon\"\n            remixicon=\"RiArrowRightUpLine\"\n            className=\"size-4\"\n          />\n        </Button>\n      </>\n    ),\n  },\n  {\n    value: \"billing\",\n    trigger: \"How does billing work?\",\n    content: (\n      <>\n        <p>\n          Billing occurs automatically at the start of each billing cycle. We\n          accept all major credit cards, PayPal, and ACH transfers for\n          enterprise customers.\n        </p>\n      </>\n    ),\n  },\n  {\n    value: \"security\",\n    trigger: \"Is my data secure?\",\n    content: (\n      <>\n        <p>\n          We take security seriously. All data is encrypted at rest using\n          AES-256 and in transit via TLS 1.3. We perform regular third-party\n          security audits and maintain SOC 2 Type II compliance.\n        </p>\n        <p>\n          You can also enable multi-factor authentication (MFA) and single\n          sign-on (SSO) for additional security.\n        </p>\n      </>\n    ),\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto mb-auto w-full max-w-lg\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion multiple defaultValue={[\"plans\"]}>\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}","target":"components/examples/c-accordion-4.tsx"}],"meta":{"order":4,"label":"In Card"}}