{"componentChunkName":"component---src-pages-components-ui-shell-header-code-mdx","path":"/components/UI-shell-header/code/","result":{"pageContext":{"frontmatter":{"title":"UI shell header","description":"This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/UI-shell-header/code.mdx","titleType":"prepend","MdxNode":{"id":"b0ac18d7-2ec1-5a9b-a3ca-c483ea11e62b","children":[],"parent":"efb1149e-6a57-56fe-876d-60064d4cc0b9","internal":{"content":"---\ntitle: UI shell header\ndescription: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Header base\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/v10-starter-sandbox-kf3h4?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-base\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with nav\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-base-v07hj?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-nav\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with actions\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-with-actions-vh014?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-actions\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with actions and nav\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-with-actions-and-nav-m0lo2?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-actions-and-nav\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with sidenav\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-with-sidenav-1u7su?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-sidenav\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Documentation\n\n<ComponentDocs component=\"ui-shell\" />\n","type":"Mdx","contentDigest":"05612760a7b8d308e8cfa6d945665ea3","counter":1472,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell header","description":"This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: UI shell header\ndescription: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Header base\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/v10-starter-sandbox-kf3h4?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-base\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with nav\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-base-v07hj?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-nav\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with actions\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-with-actions-vh014?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-actions\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with actions and nav\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-with-actions-and-nav-m0lo2?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-actions-and-nav\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Header with sidenav\n\n<Row>\n  <Column>\n    <iframe\n      loading=\"lazy\"\n      src=\"https://codesandbox.io/embed/header-with-sidenav-1u7su?fontsize=14&hidenavigation=1&view=preview\"\n      title=\"header-with-sidenav\"\n      allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\"\n      style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    />\n  </Column>\n</Row>\n\n## Documentation\n\n<ComponentDocs component=\"ui-shell\" />\n","fileAbsolutePath":"/zeit/3f757860/src/pages/components/UI-shell-header/code.mdx"}}}}