{"componentChunkName":"component---src-pages-components-accordion-code-mdx","path":"/components/accordion/code/","result":{"pageContext":{"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/accordion/code.mdx","titleType":"prepend","MdxNode":{"id":"e58ab1be-a908-5f66-85eb-1bf8581b84b4","children":[],"parent":"3781ec50-0aea-5974-a39a-e0c857301df9","internal":{"content":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n<ComponentDemo\n  links={{\n    React:\n      \"http://react.carbondesignsystem.com/?path=/story/accordion--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=accordion\",\n  }}\n  knobs={{ AccordionItem: [\"open\"] }}\n>{`\n<Accordion>\n  <AccordionItem title=\"title 1\">content 1</AccordionItem>\n</Accordion>\n`}</ComponentDemo>\n","type":"Mdx","contentDigest":"a6eb63c7eea12b93612488162d63a5e6","counter":1449,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n<ComponentDemo\n  links={{\n    React:\n      \"http://react.carbondesignsystem.com/?path=/story/accordion--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=accordion\",\n  }}\n  knobs={{ AccordionItem: [\"open\"] }}\n>{`\n<Accordion>\n  <AccordionItem title=\"title 1\">content 1</AccordionItem>\n</Accordion>\n`}</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/accordion/code.mdx"}}}}