{"componentChunkName":"component---src-pages-components-modal-code-mdx","path":"/components/modal/code/","result":{"pageContext":{"frontmatter":{"title":"Modal","description":"Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/modal/code.mdx","titleType":"prepend","MdxNode":{"id":"ab5f15e2-3d4f-5069-8038-be263a488a59","children":[],"parent":"1b4313d9-38ed-542e-9807-5aba08f07f80","internal":{"content":"---\ntitle: Modal\ndescription: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/modal--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',\n  }}\n  knobs={{\n    ModalWrapper: [\n      'passiveModal',\n      'danger',\n      'disabled',\n      'hasScrollingContent',\n      'size',\n    ],\n  }}>\n  {`\n<ModalWrapper\n  buttonTriggerText=\"Launch modal\"\n  modalHeading=\"Modal heading\"\n  modalLabel=\"Label\"\n>\n  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>\n</ModalWrapper>\n`}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"c28cbd982e127920a7bf21d43f8e0555","counter":1503,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Modal","description":"Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Modal\ndescription: Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/modal--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',\n  }}\n  knobs={{\n    ModalWrapper: [\n      'passiveModal',\n      'danger',\n      'disabled',\n      'hasScrollingContent',\n      'size',\n    ],\n  }}>\n  {`\n<ModalWrapper\n  buttonTriggerText=\"Launch modal\"\n  modalHeading=\"Modal heading\"\n  modalLabel=\"Label\"\n>\n  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>\n</ModalWrapper>\n`}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/modal/code.mdx"}}}}