text: (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{353:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",function(){return i}),a.d(t,"default",function(){return g});a(10),a(4),a(5),a(3),a(6),a(2),a(1);var n=a(90),o=a(376);function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var i={},l=function(e){return function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(n.b)("div",t)}},s=l("PageDescription"),r=l("Tabs"),p=l("Tab"),b=l("Row"),m=l("Column"),d={_frontmatter:i},f=o.a;function g(e){var t=e.components,a=function(e,t){if(null==e)return{};var a,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)a=c[n],t.indexOf(a)>=0||(o[a]=e[a]);return o}(e,["components"]);return Object(n.b)(f,c({},d,a,{components:t,mdxType:"MDXLayout"}),Object(n.b)(s,{mdxType:"PageDescription"},Object(n.b)("p",null,"The ",Object(n.b)("inlineCode",{parentName:"p"},"<Tabs>")," and ",Object(n.b)("inlineCode",{parentName:"p"},"<Tab>")," components are used together to display and swap between content. Like all of the MDX components, you’ll need to give the content you pass in a line of whitespace. When in doubt, follow the examples. Everything should be left aligned, indenting ",Object(n.b)("inlineCode",{parentName:"p"},"<Tab>")," will result in errors.")),Object(n.b)("h2",{id:"example"},"Example"),Object(n.b)(r,{mdxType:"Tabs"},Object(n.b)(p,{label:"Text",mdxType:"Tab"},Object(n.b)("p",null,"The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our ",Object(n.b)("inlineCode",{parentName:"p"},"Row")," and ",Object(n.b)("inlineCode",{parentName:"p"},"Column")," helpers as demonstrated in the “Two images” tab.")),Object(n.b)(p,{label:"Single image",mdxType:"Tab"},Object(n.b)("p",null,"If your content is full width, you don’t need ",Object(n.b)("inlineCode",{parentName:"p"},"Row")," and ",Object(n.b)("inlineCode",{parentName:"p"},"Column")),Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1170px"}},"\n      ",Object(n.b)("span",c({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"30.402010050251256%",position:"relative",bottom:"0px",left:"0px",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",c({parentName:"span"},{className:"gatsby-resp-image-image",style:{width:"100%",height:"100%",margin:"0px",verticalAlign:"middle",position:"absolute",top:"0px",left:"0px",boxShadow:"inset 0px 0px 0px 400px white"},alt:"Plane window",title:"",src:"/static/c0fc9864a6ce4ef42cef74f3f451329e/722b0/colors.png",srcSet:["/static/c0fc9864a6ce4ef42cef74f3f451329e/115db/colors.png 293w","/static/c0fc9864a6ce4ef42cef74f3f451329e/f1a3a/colors.png 585w","/static/c0fc9864a6ce4ef42cef74f3f451329e/722b0/colors.png 1170w","/static/c0fc9864a6ce4ef42cef74f3f451329e/a3109/colors.png 1592w"],sizes:"(max-width: 1170px) 100vw, 1170px"})),"\n    ")),Object(n.b)(p,{label:"Two images",mdxType:"Tab"},Object(n.b)(b,{mdxType:"Row"},Object(n.b)(m,{colSm:6,colLg:6,mdxType:"Column"},Object(n.b)("p",null,"Column one"),Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1170px"}},"\n      ",Object(n.b)("span",c({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"30.402010050251256%",position:"relative",bottom:"0px",left:"0px",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",c({parentName:"span"},{className:"gatsby-resp-image-image",style:{width:"100%",height:"100%",margin:"0px",verticalAlign:"middle",position:"absolute",top:"0px",left:"0px",boxShadow:"inset 0px 0px 0px 400px white"},alt:"Plane window",title:"",src:"/static/c0fc9864a6ce4ef42cef74f3f451329e/722b0/colors.png",srcSet:["/static/c0fc9864a6ce4ef42cef74f3f451329e/115db/colors.png 293w","/static/c0fc9864a6ce4ef42cef74f3f451329e/f1a3a/colors.png 585w","/static/c0fc9864a6ce4ef42cef74f3f451329e/722b0/colors.png 1170w","/static/c0fc9864a6ce4ef42cef74f3f451329e/a3109/colors.png 1592w"],sizes:"(max-width: 1170px) 100vw, 1170px"})),"\n    ")),Object(n.b)(m,{colSm:6,colLg:6,mdxType:"Column"},Object(n.b)("p",null,"Column two"),Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1170px"}},"\n      ",Object(n.b)("span",c({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"30.402010050251256%",position:"relative",bottom:"0px",left:"0px",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",c({parentName:"span"},{className:"gatsby-resp-image-image",style:{width:"100%",height:"100%",margin:"0px",verticalAlign:"middle",position:"absolute",top:"0px",left:"0px",boxShadow:"inset 0px 0px 0px 400px white"},alt:"Plane window",title:"",src:"/static/c0fc9864a6ce4ef42cef74f3f451329e/722b0/colors.png",srcSet:["/static/c0fc9864a6ce4ef42cef74f3f451329e/115db/colors.png 293w","/static/c0fc9864a6ce4ef42cef74f3f451329e/f1a3a/colors.png 585w","/static/c0fc9864a6ce4ef42cef74f3f451329e/722b0/colors.png 1170w","/static/c0fc9864a6ce4ef42cef74f3f451329e/a3109/colors.png 1592w"],sizes:"(max-width: 1170px) 100vw, 1170px"})),"\n    "))))),Object(n.b)("h2",{id:"code"},"Code"),Object(n.b)("h4",{id:"text"},"Text"),Object(n.b)("pre",null,Object(n.b)("code",c({parentName:"pre"},{}),'// Start with the wrapper component (Tabs)\n<Tabs>\n\n<Tab label="Text">\n\nThe tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you\'ll need to use our `Row` and `Column` helpers as demonstrated in the "Two images" tab.\n\n</Tab>\n')),Object(n.b)("h4",{id:"single-image"},"Single image"),Object(n.b)("pre",null,Object(n.b)("code",c({parentName:"pre"},{}),'<Tab label="Single image">\n\nIf your content is full width, you don\'t need `Row` and `Column`\n\n![Plane window](images/colors.png)\n\n</Tab>\n')),Object(n.b)("h4",{id:"multiple-images"},"Multiple images"),Object(n.b)("pre",null,Object(n.b)("code",c({parentName:"pre"},{}),'<Tab label="Two images">\n\n<Row>\n<Column colSm={6} colLg={6}>\n\nColumn one\n\n![Plane window](images/colors.png)\n\n</Column>\n<Column colSm={6} colLg={6}>\n\nColumn two\n\n![Plane window](images/colors.png)\n\n</Column>\n</Row>\n\n</Tab>\n\n// Make sure you close the wrapper component\n</Tabs>\n')))}g.isMDXComponent=!0},375:function(e){e.exports={data:{site:{pathPrefix:""}}}},376:function(e,t,a){"use strict";a(22),a(16);var n=a(2),o=a(375),c=a(1),i=a.n(c),l=a(183),s=a(69),r=a.n(s),p=a(57),b=a(104),m=a(0),d=a.n(m),f=a(8),g=a.n(f),u=a(338),w=function(e){var t,a=e.children,o=e.title,c=e.tabs,i=void 0===c?[]:c,l=e.shouldHideHeader;return Object(n.b)("div",{className:g()((t={},t[u.pageHeader]=u.pageHeader,t[u.pageHeaderSticky]=i.length,t[u.pageHeaderShifted]=l,t))},Object(n.b)("div",{className:"bx--grid"},Object(n.b)("div",{className:"bx--row"},Object(n.b)("div",{className:"bx--col-lg-12"},Object(n.b)("h1",{id:"page-title",className:u.text},o)))),a)};w.propTypes={children:d.a.node,title:d.a.string};var x=w,h=a(184),O=a(20),j=a(339);var y=function(e){var t,a;function o(){return e.apply(this,arguments)||this}return a=e,(t=o).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a,o.prototype.render=function(){var e=this.props,t=e.tabs,a=e.slug,o=a.split("/").filter(Boolean).slice(-1)[0],c=t.map(function(e){var t,c=r()(e,{lower:!0}),i=c===o,l=a.replace(o,c);return Object(n.b)("li",{key:e,className:g()((t={},t[j.selectedItem]=i,t),j.listItem)},Object(n.b)(O.Link,{className:j.link,to:""+l},e))});return Object(n.b)("div",{className:j.tabsContainer},Object(n.b)("div",{className:"bx--grid"},Object(n.b)("div",{className:"bx--row"},Object(n.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(n.b)("nav",null,Object(n.b)("ul",{className:j.list},c))))))},o}(i.a.Component);y.propTypes={tabs:d.a.array,slug:d.a.string};var v=y,T=a(185);t.a=function(e){var t=e.pageContext,a=e.children,c=e.location,i=t.frontmatter,s=void 0===i?{}:i,m=s.tabs,d=s.title,f=Object(p.c)(),g=!!m&&"down"===f,u=o.data.site.pathPrefix,w=u?c.pathname.replace(u,""):c.pathname,O=m?w.split("/").slice(-1)[0]||r()(m[0],{lower:!0}):"";return Object(n.b)(b.a,{shouldHideHeader:g,homepage:!1},Object(n.b)(x,{shouldHideHeader:g,title:d,label:"label",tabs:m},m&&Object(n.b)(v,{slug:w,tabs:m,currentTab:O})),Object(n.b)(T.a,{padded:!0},a),Object(n.b)(h.a,{pageContext:t,location:c,slug:w,tabs:m,currentTab:O}),Object(n.b)(l.a,null))}}}]);
  //# sourceMappingURL=component---src-pages-components-tabs-mdx-fc793beb06c170a8bd00.js.map