CINXE.COM
Github
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link href="/big-design/favicon.svg" rel="icon" type="image/svg+xml" class="jsx-4019840177"/><title class="jsx-4019840177">BigDesign</title><meta content="/big-design/og-image.png" property="og:image" class="jsx-4019840177"/><link href="https://fonts.googleapis.com" rel="preconnect" class="jsx-4019840177"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" class="jsx-4019840177"/><link rel="preload" href="/big-design/_next/static/media/logo-with-text.e21d3669.svg" as="image" fetchpriority="high"/><meta name="next-head-count" content="9"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/big-design/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/big-design/_next/static/chunks/webpack-1b2dfdccf2200e8a.js" defer=""></script><script src="/big-design/_next/static/chunks/framework-e7c7420b044eb910.js" defer=""></script><script src="/big-design/_next/static/chunks/main-a417af770db1b893.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/_app-8357c4e81bc7a2dd.js" defer=""></script><script src="/big-design/_next/static/chunks/1703-7deae201e23823eb.js" defer=""></script><script src="/big-design/_next/static/chunks/9076-72097db7d50821c0.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/index-5949b719357f2ee1.js" defer=""></script><script src="/big-design/_next/static/c2CtNX9kz9-sAtL5xGy_Q/_buildManifest.js" defer=""></script><script src="/big-design/_next/static/c2CtNX9kz9-sAtL5xGy_Q/_ssgManifest.js" defer=""></script><style id="__jsx-4019840177">body{min-height:100vh;background-color:#F6F7FC}</style><style data-styled="" data-styled-version="5.3.11">html{line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%;}/*!sc*/ body{margin:0;}/*!sc*/ main{display:block;}/*!sc*/ h1{font-size:2em;margin:0.67em 0;}/*!sc*/ hr{box-sizing:content-box;height:0;overflow:visible;}/*!sc*/ pre{font-family:monospace,monospace;font-size:1em;}/*!sc*/ a{background-color:transparent;}/*!sc*/ abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ b,strong{font-weight:bolder;}/*!sc*/ code,kbd,samp{font-family:monospace,monospace;font-size:1em;}/*!sc*/ small{font-size:80%;}/*!sc*/ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}/*!sc*/ sub{bottom:-0.25em;}/*!sc*/ sup{top:-0.5em;}/*!sc*/ img{border-style:none;}/*!sc*/ button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}/*!sc*/ button,input{overflow:visible;}/*!sc*/ button,select{text-transform:none;}/*!sc*/ button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}/*!sc*/ button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}/*!sc*/ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}/*!sc*/ fieldset{padding:0.35em 0.625em 0.75em;}/*!sc*/ legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}/*!sc*/ progress{vertical-align:baseline;}/*!sc*/ textarea{overflow:auto;}/*!sc*/ [type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}/*!sc*/ [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}/*!sc*/ [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}/*!sc*/ [type="search"]::-webkit-search-decoration{-webkit-appearance:none;}/*!sc*/ ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}/*!sc*/ details{display:block;}/*!sc*/ summary{display:list-item;}/*!sc*/ template{display:none;}/*!sc*/ [hidden]{display:none;}/*!sc*/ abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}/*!sc*/ body{font-family:"Source Sans Pro","Helvetica Neue",Arial,sans-serif;}/*!sc*/ data-styled.g1[id="sc-global-MjHVH1"]{content:"sc-global-MjHVH1,"}/*!sc*/ .WZeNJ{vertical-align:middle;color:#313440;height:1.5rem;width:1.5rem;}/*!sc*/ .emfseH{vertical-align:middle;height:1.5rem;width:1.5rem;}/*!sc*/ .hmYaOT{vertical-align:middle;color:#5E637A;height:1.5rem;width:1.5rem;}/*!sc*/ data-styled.g2[id="base__StyledIcon-sc-a9u0e1-0"]{content:"WZeNJ,emfseH,hmYaOT,"}/*!sc*/ .koRBsY{margin-left:auto;margin-right:auto;box-sizing:border-box;}/*!sc*/ @media (min-width:720px){.koRBsY{padding-left:1rem;padding-right:1rem;}}/*!sc*/ .heLZwM{box-sizing:border-box;}/*!sc*/ @media (min-width:720px){.heLZwM{padding-top:2rem;padding-bottom:2rem;}}/*!sc*/ .buMTzK{box-sizing:border-box;background-color:#F6F7FC;border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);}/*!sc*/ @media (min-width:0px){.buMTzK{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media (min-width:720px){.buMTzK{display:block;}}/*!sc*/ @media (min-width:0px){.buMTzK{padding-top:1rem;padding-bottom:1rem;}}/*!sc*/ @media (min-width:720px){.buMTzK{padding-top:0;padding-bottom:0;}}/*!sc*/ @media (min-width:0px){.buMTzK{padding-left:1rem;padding-right:1rem;}}/*!sc*/ @media (min-width:720px){.buMTzK{padding-left:0;padding-right:0;}}/*!sc*/ .eIPFYx{box-sizing:border-box;}/*!sc*/ .flvPv{box-sizing:border-box;border-radius:0.25rem;box-shadow:0px 2px 12px rgba(49,52,64,0.2);border-top:1px solid #D9DCE9;border-bottom:1px solid #D9DCE9;}/*!sc*/ .ittXGm{box-sizing:border-box;}/*!sc*/ @media (min-width:0px){.ittXGm{margin-top:0.25rem;}}/*!sc*/ @media (min-width:720px){.ittXGm{margin-top:1.5rem;}}/*!sc*/ @media (min-width:0px){.ittXGm{margin-left:1rem;margin-right:1rem;}}/*!sc*/ @media (min-width:720px){.ittXGm{margin-left:0;margin-right:0;}}/*!sc*/ .lnPWxc{padding:0.5rem;box-sizing:border-box;}/*!sc*/ .LfETB{margin-top:1rem;margin-bottom:1rem;box-sizing:border-box;}/*!sc*/ @media (min-width:0px){.LfETB{margin-left:0.75rem;margin-right:0.75rem;}}/*!sc*/ @media (min-width:720px){.LfETB{margin-left:2rem;margin-right:2rem;}}/*!sc*/ @media (min-width:720px){.LfETB{padding-top:1.25rem;}}/*!sc*/ .kKyUSp{margin-bottom:1rem;box-sizing:border-box;background-color:#FFFFFF;border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);}/*!sc*/ @media (min-width:0px){.kKyUSp{padding:1rem;}}/*!sc*/ @media (min-width:720px){.kKyUSp{padding:1.5rem;}}/*!sc*/ .gZUsCT{margin-top:1rem;box-sizing:border-box;}/*!sc*/ .cYjJdb{margin-bottom:2rem;box-sizing:border-box;border:1px solid #D9DCE9;}/*!sc*/ .gOmLsB{box-sizing:border-box;background-color:#ECEEF5;border-bottom:1px solid #D9DCE9;}/*!sc*/ .kerrQ{box-sizing:border-box;border-left:1px solid #D9DCE9;}/*!sc*/ data-styled.g3[id="sc-12d4dbf-0"]{content:"koRBsY,heLZwM,buMTzK,eIPFYx,flvPv,ittXGm,lnPWxc,LfETB,kKyUSp,gZUsCT,cYjJdb,gOmLsB,kerrQ,"}/*!sc*/ .hKwTli{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.hKwTli{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ @media (min-width:0px){.hKwTli{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media (min-width:720px){.hKwTli{display:block;}}/*!sc*/ .cMwWYy{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.cMwWYy{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.cMwWYy{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ .kWYuMh{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:.5rem;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .fAYsrw{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .cCntAE{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .bKXHEd{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.bKXHEd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.bKXHEd{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ data-styled.g8[id="sc-3a1154b6-0"]{content:"hKwTli,cMwWYy,kWYuMh,fAYsrw,cCntAE,bKXHEd,"}/*!sc*/ .hNmeKU{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color,border-color,box-shadow,color;transition-property:background-color,border-color,box-shadow,color;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #D9DCE9;border-radius:0.25rem;color:#FFFFFF;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1rem;font-weight:400;height:2.25rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:2rem;outline:none;padding:0 1rem;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;width:100%;background-color:transparent;border-color:transparent;color:#3C64F4;}/*!sc*/ .hNmeKU:focus{outline:none;}/*!sc*/ .hNmeKU[disabled]{border-color:#D9DCE9;pointer-events:none;}/*!sc*/ .hNmeKU + .bd-button{margin-top:0.5rem;}/*!sc*/ @media (min-width:720px){.hNmeKU + .bd-button{margin-top:0;margin-left:0.5rem;}}/*!sc*/ @media (min-width:720px){.hNmeKU{width:auto;padding:0;min-width:2.25rem;}}/*!sc*/ .hNmeKU:active{background-color:#DBE3FE;}/*!sc*/ .hNmeKU:focus{box-shadow:0 0 0 0.25rem #DBE3FE;}/*!sc*/ .hNmeKU:hover:not(:active){background-color:#F0F3FF;}/*!sc*/ .hNmeKU[disabled]{border-color:transparent;color:#D9DCE9;}/*!sc*/ data-styled.g9[id="sc-1352b694-0"]{content:"hNmeKU,"}/*!sc*/ .cySnWD{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:inline-grid;grid-auto-flow:column;grid-gap:0.5rem;}/*!sc*/ data-styled.g10[id="sc-1352b694-1"]{content:"cySnWD,"}/*!sc*/ .qTiwc{grid-area:nav;}/*!sc*/ .bKQwSy{grid-area:main;}/*!sc*/ data-styled.g13[id="sc-b6da41a7-0"]{content:"qTiwc,bKQwSy,"}/*!sc*/ .hXDjEj{gap:0;display:grid;}/*!sc*/ @media (min-width:0px){.hXDjEj{grid-template: "nav" 5rem "main" min-content / 100%;}}/*!sc*/ @media (min-width:720px){.hXDjEj{grid-template: "nav main" 1fr / minmax(13.125rem,18.75rem) 1fr;}}/*!sc*/ data-styled.g14[id="sc-7da2c49d-0"]{content:"hXDjEj,"}/*!sc*/ .lhllpz{-webkit-transition:all 70ms ease-out;transition:all 70ms ease-out;-webkit-transition-property:color;transition-property:color;color:#3C64F4;cursor:pointer;font-size:1rem;font-weight:400;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .lhllpz:active{color:#0024A6;}/*!sc*/ .lhllpz:hover:not(:active){color:#0024A6;}/*!sc*/ data-styled.g15[id="sc-d0458d4a-0"]{content:"lhllpz,"}/*!sc*/ .ifCyRn{color:#313440;margin:0 0 1rem;font-size:1.5rem;font-weight:400;line-height:2rem;margin-bottom:0;}/*!sc*/ data-styled.g18[id="sc-218b28a9-2"]{content:"ifCyRn,"}/*!sc*/ .iyrvkB{color:#313440;margin:0 0 1rem;font-size:1.25rem;font-weight:400;line-height:1.75rem;margin:0 0 0.75rem;margin-bottom:0;}/*!sc*/ data-styled.g19[id="sc-218b28a9-3"]{content:"iyrvkB,"}/*!sc*/ .eZqWNg{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:600;line-height:1.5rem;margin:0 0 0.5rem;}/*!sc*/ data-styled.g20[id="sc-218b28a9-4"]{content:"eZqWNg,"}/*!sc*/ .fcHZuG{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;}/*!sc*/ .fcHZuG:last-child{margin-bottom:0;}/*!sc*/ .dPpyTP{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;margin-bottom:0;}/*!sc*/ .dPpyTP:last-child{margin-bottom:0;}/*!sc*/ data-styled.g21[id="sc-218b28a9-5"]{content:"fcHZuG,dPpyTP,"}/*!sc*/ .gVIGoi{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;}/*!sc*/ .gVIGoi:last-child{margin-bottom:0;}/*!sc*/ .eimaSR{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;margin-left:0.75rem;margin-right:0.75rem;}/*!sc*/ .eimaSR:last-child{margin-bottom:0;}/*!sc*/ data-styled.g22[id="sc-218b28a9-6"]{content:"gVIGoi,eimaSR,"}/*!sc*/ .lTGlb{color:#313440;font-size:1rem;font-weight:400;line-height:1.5rem;padding-left:1.5rem;list-style-type:none;margin:0;padding:0;}/*!sc*/ @media (min-width:720px){.lTGlb{-webkit-column-count:1;column-count:1;-webkit-column-gap:normal;column-gap:normal;}}/*!sc*/ .bhINhA{color:#313440;font-size:1rem;font-weight:400;line-height:1.5rem;padding-left:1.5rem;}/*!sc*/ @media (min-width:720px){.bhINhA{-webkit-column-count:2;column-count:2;-webkit-column-gap:3rem;column-gap:3rem;}}/*!sc*/ .eLiXKV{color:#313440;font-size:1rem;font-weight:400;line-height:1.5rem;padding-left:1.5rem;}/*!sc*/ @media (min-width:720px){.eLiXKV{-webkit-column-count:1;column-count:1;-webkit-column-gap:normal;column-gap:normal;}}/*!sc*/ data-styled.g29[id="sc-228d67c6-1"]{content:"lTGlb,bhINhA,eLiXKV,"}/*!sc*/ .lcyNul{display:block;line-height:1.75rem;}/*!sc*/ @media (min-width:720px){.lcyNul{display:inline-block;line-height:1.5rem;}}/*!sc*/ data-styled.g30[id="sc-50275482-0"]{content:"lcyNul,"}/*!sc*/ .bgZsLA{cursor:pointer;}/*!sc*/ .bgZsLA img{margin:0 auto;max-width:100%;}/*!sc*/ .bgZsLA p{display:none;text-align:right;margin-right:1rem;}/*!sc*/ @media (min-width:720px){.bgZsLA p{display:block;}}/*!sc*/ data-styled.g31[id="sc-37d69e8e-0"]{content:"bgZsLA,"}/*!sc*/ .fUJlIf{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ .bZgGVT{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ .juFVYe{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ data-styled.g32[id="sc-2b88929e-0"]{content:"fUJlIf,bZgGVT,juFVYe,"}/*!sc*/ @media (min-width:720px){.laobSg{display:none;}}/*!sc*/ data-styled.g33[id="sc-286b6187-0"]{content:"laobSg,"}/*!sc*/ .jvqsMD{border-radius:0.25rem;box-shadow:0px 2px 12px rgba(49,52,64,0.2);background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-radius:0;border-top:1px solid #D9DCE9;display:none;height:16rem;left:0;overflow:auto;position:absolute;top:100%;width:100%;z-index:1020;}/*!sc*/ @media (min-width:720px){.jvqsMD{border:0;box-shadow:none;display:block;height:auto;position:static;background-color:transparent;}}/*!sc*/ data-styled.g34[id="sc-286b6187-1"]{content:"jvqsMD,"}/*!sc*/ .iWeQfW{position:-webkit-sticky;position:sticky;top:0;height:100vh;width:100%;}/*!sc*/ data-styled.g35[id="sc-4dd0e9a1-0"]{content:"iWeQfW,"}/*!sc*/ .jWCtqN{overflow:hidden;height:100%;}/*!sc*/ data-styled.g36[id="sc-4dd0e9a1-1"]{content:"jWCtqN,"}/*!sc*/ .dYqqWW{height:100%;width:100%;}/*!sc*/ data-styled.g37[id="sc-4dd0e9a1-2"]{content:"dYqqWW,"}/*!sc*/ .uCQWd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none;padding:0.0625rem;border-radius:0.25rem;-webkit-transition:background-color 160ms ease-out;transition:background-color 160ms ease-out;width:0.5rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:rgba(49,52,64,0.1);}/*!sc*/ data-styled.g38[id="sc-4dd0e9a1-3"]{content:"uCQWd,"}/*!sc*/ .ciqzLB{border-radius:0;}/*!sc*/ @media (min-width:720px){.ciqzLB{border-radius:0.25rem;}}/*!sc*/ data-styled.g41[id="sc-93a30afd-0"]{content:"ciqzLB,"}/*!sc*/ .eXgsEX{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ .eXgsEX ~ .bd-button{width:auto;margin-top:0;}/*!sc*/ data-styled.g42[id="sc-93a30afd-1"]{content:"eXgsEX,"}/*!sc*/ .AibSD{color:#313440;white-space:nowrap;background-color:#FFF0BF;padding:0.25rem;}/*!sc*/ data-styled.g43[id="sc-1d19ed82-0"]{content:"AibSD,"}/*!sc*/ .jtamvM{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ data-styled.g44[id="sc-bcd98922-0"]{content:"jtamvM,"}/*!sc*/ </style><style data-href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap">@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_Akw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zAkw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3aPA.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rAkw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div style="min-height:100vh;max-width:1400px;position:relative" class="sc-12d4dbf-0 koRBsY sc-7da2c49d-0 hXDjEj"><nav class="sc-12d4dbf-0 heLZwM sc-b6da41a7-0 qTiwc sc-4dd0e9a1-0 iWeQfW"><div dir="ltr" class="sc-4dd0e9a1-1 jWCtqN" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style> [data-radix-scroll-area-viewport] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } [data-radix-scroll-area-viewport]::-webkit-scrollbar { display: none; } :where([data-radix-scroll-area-viewport]) { display: flex; flex-direction: column; align-items: stretch; } :where([data-radix-scroll-area-content]) { flex-grow: 1; } </style><div data-radix-scroll-area-viewport="" class="sc-4dd0e9a1-2 dYqqWW" style="overflow-x:hidden;overflow-y:hidden"><div data-radix-scroll-area-content=""><div display="[object Object]" style="position:relative" class="sc-12d4dbf-0 buMTzK sc-3a1154b6-0 hKwTli"><a style="text-decoration:none" href="/big-design"><div class="sc-37d69e8e-0 bgZsLA"><img alt="BigDesign Logo" fetchpriority="high" width="160" height="41" decoding="async" data-nimg="1" style="color:transparent" src="/big-design/_next/static/media/logo-with-text.e21d3669.svg"/><p class="sc-218b28a9-6 gVIGoi">v<!-- -->1.5.0</p></div></a><div style="display:flex;align-items:center" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cMwWYy"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-286b6187-0 laobSg"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary70" class="base__StyledIcon-sc-a9u0e1-0 WZeNJ"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 flvPv sc-2b88929e-0 fUJlIf sc-286b6187-1 jvqsMD"><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Introduction</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Getting Started</a></li><li><a href="https://codesandbox.io/p/devbox/github/bigcommerce/big-design/tree/%40bigcommerce/examples%401.0.6/packages/examples" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">CodeSandbox Example</a></li><div class="sc-12d4dbf-0 lnPWxc"></div><li><a href="https://github.com/bigcommerce/big-design" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 kWYuMh"><svg fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 20 20" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title>Github</title><path clip-rule="evenodd" d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z" fill-rule="evenodd"></path></svg> Github</div></a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Foundations</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/colors" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Colors</a></li><li><a href="/big-design/icons" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Icons</a></li><li><a href="/big-design/spacing" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Spacing</a></li><li><a href="/big-design/typography" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Typography</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Layout</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/accordion-panel" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Accordion Panel</a></li><li><a href="/big-design/collapse" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Collapse</a></li><li><a href="/big-design/modal" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Modal</a></li><li><a href="/big-design/pagination" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Pagination</a></li><li><a href="/big-design/panel" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Panel</a></li><li><a href="/big-design/statefulTable" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatefulTable</a></li><li><a href="/big-design/statefulTree" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatefulTree</a></li><li><a href="/big-design/table" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Table</a></li><li><a href="/big-design/tabs" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Tabs</a></li><li><a href="/big-design/worksheet" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Worksheet</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Actions & Inputs</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/button" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Button</a></li><li><a href="/big-design/button-group" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ButtonGroup</a></li><li><a href="/big-design/checkbox" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Checkbox</a></li><li><a href="/big-design/counter" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Counter</a></li><li><a href="/big-design/datepicker" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Datepicker</a></li><li><a href="/big-design/dropdown" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Dropdown</a></li><li><a href="/big-design/file-uploader" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">FileUploader</a></li><li><a href="/big-design/form" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Form</a></li><li><a href="/big-design/input" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Input</a></li><li><a href="/big-design/link" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Link</a></li><li><a href="/big-design/multi-select" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">MultiSelect</a></li><li><a href="/big-design/pill-tabs" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">PillTabs</a></li><li><a href="/big-design/radio" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Radio</a></li><li><a href="/big-design/search" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Search</a></li><li><a href="/big-design/select" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Select</a></li><li><a href="/big-design/switch" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Switch</a></li><li><a href="/big-design/toggle" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Toggle</a></li><li><a href="/big-design/textarea" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Textarea</a></li><li><a href="/big-design/timepicker" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Timepicker</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Status & Feedback</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/alert" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Alert</a></li><li><a href="/big-design/badge" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Badge</a></li><li><a href="/big-design/inline-message" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">InlineMessage</a></li><li><a href="/big-design/message" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Message</a></li><li><a href="/big-design/progress-bar" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ProgressBar</a></li><li><a href="/big-design/progress-circle" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ProgressCircle</a></li><li><a href="/big-design/stepper" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Stepper</a></li><li><a href="/big-design/tooltip" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Tooltip</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Patterns</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/action-bar" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Action Bar</a></li><li><a href="/big-design/header" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Header</a></li><li><a href="/big-design/page" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Page</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Utilities</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/box" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Box</a></li><li><a href="/big-design/breakpoints" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Breakpoints</a></li><li><a href="/big-design/display" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Display</a></li><li><a href="/big-design/flex" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Flex</a></li><li><a href="/big-design/grid" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Grid</a></li><li><a href="/big-design/margin" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Margin</a></li><li><a href="/big-design/padding" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Padding</a></li><li><a href="/big-design/popover" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Popover</a></li></ul></div></div></div></div></div></div></div></div></nav><main style="max-width:100%" class="sc-12d4dbf-0 LfETB sc-b6da41a7-0 bKQwSy"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fAYsrw"><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">BigDesign developer playground</h2></div><div class="sc-12d4dbf-0 gZUsCT"><p class="sc-218b28a9-5 fcHZuG">BigCommerce鈥檚 library of React components lets developers build stylish apps that have a native BigCommerce feel at their core. Our components implement BigDesign principles to allow you to create an empathetic and frictionless user experience. The documentation will demonstrate the visual style and behavior of each component. Each component has props that can be passed for further configuration.</p><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 bZgGVT"><h3 class="sc-218b28a9-3 iyrvkB">Helpful resources</h3></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 bZgGVT"><ul class="sc-228d67c6-1 bhINhA"><li><a href="https://github.com/bigcommerce/big-design" target="_blank" class="sc-d0458d4a-0 lhllpz">GitHub Repo</a></li><li><a href="https://medium.com/bigcommerce-developer-blog/bigdesign-build-native-looking-uis-with-the-bigcommerce-design-system-fb06a01a24f2" target="_blank" class="sc-d0458d4a-0 lhllpz">Dev Blog Demo</a></li><li><a href="https://support.bigcommerce.com/s/group/0F91B000000bnqoSAA/bigdesign-beta" target="_blank" class="sc-d0458d4a-0 lhllpz">Community Group</a></li><li><a href="https://www.figma.com/file/jTVuUkiZ1j3rux8WHG4IKK/BigDesign-UI-Kit" target="_blank" class="sc-d0458d4a-0 lhllpz">Figma UI Kit</a></li><li><a href="https://github.com/bigcommerce/sample-app-nodejs" target="_blank" class="sc-d0458d4a-0 lhllpz">Sample App</a></li><li><a href="https://codesandbox.io/p/devbox/github/bigcommerce/big-design/tree/%40bigcommerce/examples%401.0.6/packages/examples" target="_blank" class="sc-d0458d4a-0 lhllpz">CodeSandbox Example</a></li><li><a href="https://developer.bigcommerce.com" target="_blank" class="sc-d0458d4a-0 lhllpz">Dev Center</a></li><li><a href="https://developer.bigcommerce.com/api-docs/getting-started/building-apps-bigcommerce/building-apps" target="_blank" class="sc-d0458d4a-0 lhllpz">Building an App</a></li></ul></div></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Getting started</h2></div><div class="sc-12d4dbf-0 gZUsCT"><p class="sc-218b28a9-5 fcHZuG">Add BigDesign and styled-components to your project:</p><div class="sc-12d4dbf-0 cYjJdb"><div style="background-color:#282c34;color:#ffffff;overflow:auto"><pre class="prism-code language-bash" style="margin:0;outline:none;padding:10px;font-family:monospace;background-color:#282c34;color:#ffffff;white-space:pre-wrap" spellcheck="false"><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain">npm install @bigcommerce/big-design styled-components@5</span> </span></pre></div></div><p class="sc-218b28a9-5 fcHZuG">Add the font as a<code class="sc-1d19ed82-0 AibSD"><link></code> in your <code class="sc-1d19ed82-0 AibSD">index.html</code>/<code class="sc-1d19ed82-0 AibSD"><head></code> element.</p><div class="sc-12d4dbf-0 cYjJdb"><div style="z-index:999" class="sc-12d4dbf-0 gOmLsB sc-3a1154b6-0 bKXHEd sc-bcd98922-0 jtamvM"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 juFVYe"><p class="sc-218b28a9-6 eimaSR">Code example</p></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" stroke="currentColor" stroke-width="0" viewBox="0 0 128 128" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M22.67 47h99.67v73.67H22.67z" fill="#fff"></path><path d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z" data-name="original" fill="#007acc"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" preserveAspectRatio="xMinYMin meet" stroke="currentColor" stroke-width="0" viewBox="0 0 256 256" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M0 0h256v256H0z" fill="#f7df1e"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574" fill="#000"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R2kcte6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R2kcte6:">Copy</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m1 14H8c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1s-.45 1-1 1m3-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1m0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R2mcte6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R2mcte6:">Toggle Theme</title><path d="M24 0H0v24h24z" fill="none"></path><path d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95a.996.996 0 0 0-1.41 0zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1z"></path></svg></span></button></div></div><div style="background-color:#282c34;color:#ffffff;overflow:auto"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:monospace;background-color:#282c34;color:#ffffff;white-space:pre-wrap" spellcheck="false"><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag" style="color:#fc929e">head</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag" style="color:#fc929e">link</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">rel</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">preconnect</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">href</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">https://fonts.googleapis.com</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#8dc891">/></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag" style="color:#fc929e">link</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">rel</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">preconnect</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">href</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">https://fonts.gstatic.com</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">crossorigin</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#8dc891">/></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag" style="color:#fc929e">link</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">href</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">rel</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">stylesheet</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#8dc891">/></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag" style="color:#fc929e">head</span><span class="token tag punctuation" style="color:#8dc891">></span> </span></pre></div></div><p class="sc-218b28a9-5 fcHZuG">Import the <code class="sc-1d19ed82-0 AibSD">GlobalStyles</code> component and use it once in your app. This will set a few styles globally and add<!-- --> <a href="https://github.com/necolas/normalize.css/" target="_blank" class="sc-d0458d4a-0 lhllpz">normalize.css</a>. We recommend placing it close to your root component. Then import any component, such as<!-- --> <code class="sc-1d19ed82-0 AibSD">Button</code>, to use it anywhere in your app.</p><div class="sc-12d4dbf-0 cYjJdb"><div style="z-index:999" class="sc-12d4dbf-0 gOmLsB sc-3a1154b6-0 bKXHEd sc-bcd98922-0 jtamvM"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 juFVYe"><p class="sc-218b28a9-6 eimaSR">Code example</p></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" stroke="currentColor" stroke-width="0" viewBox="0 0 128 128" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M22.67 47h99.67v73.67H22.67z" fill="#fff"></path><path d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z" data-name="original" fill="#007acc"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" preserveAspectRatio="xMinYMin meet" stroke="currentColor" stroke-width="0" viewBox="0 0 256 256" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M0 0h256v256H0z" fill="#f7df1e"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574" fill="#000"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R2kete6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R2kete6:">Copy</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m1 14H8c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1s-.45 1-1 1m3-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1m0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R2mete6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R2mete6:">Toggle Theme</title><path d="M24 0H0v24h24z" fill="none"></path><path d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95a.996.996 0 0 0-1.41 0zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1z"></path></svg></span></button></div></div><div style="background-color:#282c34;color:#ffffff;overflow:auto"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:monospace;background-color:#282c34;color:#ffffff;white-space:pre-wrap" spellcheck="false"><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#8dc891">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style="color:#8dc891">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">GlobalStyles</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#8dc891">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'@bigcommerce/big-design'</span><span class="token punctuation" style="color:#8dc891">;</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"></span><span class="token comment" style="color:#999999">// ...</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"></span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">App</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">GlobalStyles</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#8dc891">/></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">Button</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text">Click me</span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag class-name" style="color:#FAC863">Button</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag class-name" style="color:#FAC863">App</span><span class="token tag punctuation" style="color:#8dc891">></span> </span></pre></div></div></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Using this documentation</h2></div><div class="sc-12d4dbf-0 gZUsCT"><p class="sc-218b28a9-5 dPpyTP">This documentation uses the React components in the BigDesign library so you can edit them and preview them in real time.</p><ul class="sc-228d67c6-1 eLiXKV"><li>Select an element or utility in the left menu to view their props, types and descriptions below, including examples.</li><li>Type directly in the code editor to make changes. Click the time icon to restore the component to default.</li><li>Click the clipboard icon to copy the code snippet to your clipboard. Click the dual color icon to change the background color of the code editor.</li></ul></div></div></div></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"c2CtNX9kz9-sAtL5xGy_Q","assetPrefix":"/big-design","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>