CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8" /> <title data-react-helmet="true">Grommet</title> <meta data-react-helmet="true" name="description" content="Grommet documentation"/><meta data-react-helmet="true" name="keywords" content="React, UI Kit, Grommet, Grommet Design, UI/UX Framework"/> <meta name="fragment" content="!" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="theme-color" content="#865CD6" /> <meta name="google-site-verification" content="shJGDc1jnWglPRw_VtQnMTqvcai0Br5JBFX1gVrQg-U" /> <meta name="og:type" content="website" /> <meta name="og:url" content="https://v2.grommet.io" /> <meta name="og:title" content="Grommet" /> <meta name="og:description" content="Build responsive and accessible mobile-first projects for the web with an easy to use component library." /> <meta name="og:image" content="https://v2.grommet.io/img/mobile-app-icon.png" /> <link rel="shortcut icon" type="image/png" href="/img/shortcut-icon.png" /> <link rel="apple-touch-icon" sizes="196x196" type="image/png" href="/img/mobile-app-icon.png" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" /> <link rel="manifest" href="/manifest.json" /> <style data-styled="true" data-styled-version="6.1.16">.ciLqAS{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:column;}/*!sc*/ .hnurwU{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;padding:48px;}/*!sc*/ @media only screen and (max-width: 768px){.hnurwU{padding:24px;}}/*!sc*/ .jByPUu{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:column;width:1152px;}/*!sc*/ .bfCWLU{display:flex;box-sizing:border-box;max-width:100%;align-self:center;align-items:center;min-width:0;min-height:0;flex-direction:row;width:1152px;justify-content:space-between;}/*!sc*/ .hWWfue{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:row;}/*!sc*/ .fZhRKA{display:flex;box-sizing:border-box;max-width:100%;align-self:center;margin:48px;background-color:#EDEDED;color:#444444;min-width:0;min-height:0;flex-direction:row;height:384px;width:768px;padding:24px;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.20);}/*!sc*/ @media only screen and (max-width: 768px){.fZhRKA{margin:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.fZhRKA{padding:12px;}}/*!sc*/ .dofnQG{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;}/*!sc*/ .jNVmSm{display:flex;box-sizing:border-box;max-width:100%;margin-top:96px;margin-bottom:96px;min-width:0;min-height:0;flex-direction:row;justify-content:center;}/*!sc*/ @media only screen and (max-width: 768px){.jNVmSm{margin-top:48px;margin-bottom:48px;}}/*!sc*/ @media only screen and (max-width: 768px){.jNVmSm{flex-direction:column;flex-basis:auto;justify-content:flex-start;align-items:stretch;}}/*!sc*/ .nWxZr{display:flex;box-sizing:border-box;max-width:100%;align-items:center;background-color:#EDEDED;color:#444444;min-width:0;min-height:0;flex-direction:column;padding-top:96px;}/*!sc*/ @media only screen and (max-width: 768px){.nWxZr{padding-top:48px;}}/*!sc*/ .iFxJWS{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:column;width:auto;}/*!sc*/ .kQycYR{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:row;justify-content:center;flex-wrap:wrap;}/*!sc*/ .eRmILU{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:row;justify-content:center;}/*!sc*/ @media only screen and (max-width: 768px){.eRmILU{flex-direction:column;flex-basis:auto;justify-content:flex-start;align-items:stretch;}}/*!sc*/ .FSlak{display:flex;box-sizing:border-box;margin:48px;align-items:center;min-width:0;min-height:0;flex-direction:column;flex-basis:384px;}/*!sc*/ @media only screen and (max-width: 768px){.FSlak{margin:24px;}}/*!sc*/ .cxLzRp{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:row;height:192px;justify-content:space-between;flex-wrap:wrap;}/*!sc*/ .kIzUEW{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:column;box-shadow:0px 4px 8px rgba(0, 0, 0, 0.20);}/*!sc*/ .iKPIpq{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:row;width:384px;justify-content:space-between;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;}/*!sc*/ @media only screen and (max-width: 768px){.iKPIpq{padding-left:12px;padding-right:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.iKPIpq{padding-top:6px;padding-bottom:6px;}}/*!sc*/ .bmmZGh{display:flex;box-sizing:border-box;max-width:100%;background-color:#F2F2F2;color:#444444;min-width:0;min-height:0;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;}/*!sc*/ @media only screen and (max-width: 768px){.bmmZGh{padding-left:12px;padding-right:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.bmmZGh{padding-top:6px;padding-bottom:6px;}}/*!sc*/ .blutuO{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:row;}/*!sc*/ .dLpMCq{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;}/*!sc*/ @media only screen and (max-width: 768px){.dLpMCq{padding-left:12px;padding-right:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.dLpMCq{padding-top:6px;padding-bottom:6px;}}/*!sc*/ .kORcBo{display:flex;box-sizing:border-box;max-width:100%;margin-top:48px;min-width:0;min-height:0;flex-direction:column;width:384px;}/*!sc*/ @media only screen and (max-width: 768px){.kORcBo{margin-top:24px;}}/*!sc*/ .cdXWYm{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;height:192px;justify-content:center;}/*!sc*/ .NSNPj{display:flex;box-sizing:border-box;max-width:100%;background-color:#6FFFB0;color:#444444;min-width:0;min-height:0;flex-direction:column;padding:48px;border-radius:100%;opacity:0;animation:hAsUlT 1s 0s forwards;}/*!sc*/ @media only screen and (max-width: 768px){.NSNPj{padding:24px;}}/*!sc*/ .elspsd{display:flex;box-sizing:border-box;max-width:100%;background-color:#FFCA58;color:#444444;min-width:0;min-height:0;flex-direction:column;padding:48px;border-radius:100%;opacity:0;animation:hAsUlT 1s 0.5s forwards;}/*!sc*/ @media only screen and (max-width: 768px){.elspsd{padding:24px;}}/*!sc*/ .iGfKsa{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:row;justify-content:center;}/*!sc*/ .bmIhiH{display:flex;box-sizing:border-box;max-width:100%;background-color:rgba(61, 19, 141, 0.8);color:#f8f8f8;min-width:0;min-height:0;flex-direction:column;padding:48px;border-radius:100%;opacity:0;animation:hAsUlT 4s 0s forwards;}/*!sc*/ @media only screen and (max-width: 768px){.bmIhiH{padding:24px;}}/*!sc*/ .imThJd{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:row;height:192px;width:384px;justify-content:center;overflow:hidden;}/*!sc*/ .kuKfSR{display:flex;box-sizing:border-box;max-width:100%;align-self:stretch;min-width:0;min-height:0;flex-direction:column;flex:1 1;justify-content:center;padding:6px;opacity:0;animation:hAsUlT 1s 0s forwards;}/*!sc*/ @media only screen and (max-width: 768px){.kuKfSR{padding:3px;}}/*!sc*/ .fKNhxu{display:flex;box-sizing:border-box;background-color:#6FFFB0;color:#444444;min-width:0;min-height:0;flex-direction:column;flex-basis:100%;padding-left:24px;padding-right:24px;padding-top:48px;padding-bottom:48px;border-radius:12px;}/*!sc*/ @media only screen and (max-width: 768px){.fKNhxu{padding-left:12px;padding-right:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.fKNhxu{padding-top:24px;padding-bottom:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.fKNhxu{border-radius:6px;}}/*!sc*/ .cEOjox{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;padding-top:96px;}/*!sc*/ @media only screen and (max-width: 768px){.cEOjox{padding-top:48px;}}/*!sc*/ .iWDGm{display:flex;box-sizing:border-box;max-width:100%;margin:48px;min-width:0;min-height:0;flex-direction:row;justify-content:center;}/*!sc*/ @media only screen and (max-width: 768px){.iWDGm{margin:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.iWDGm{flex-direction:column;flex-basis:auto;justify-content:flex-start;align-items:stretch;}}/*!sc*/ .kQKzCm{display:flex;box-sizing:border-box;max-width:100%;align-self:center;margin-top:24px;border-top:solid 1px rgba(0, 0, 0, 0.33);border-left:solid 1px rgba(0, 0, 0, 0.33);border-right:solid 1px rgba(0, 0, 0, 0.33);min-width:0;min-height:0;flex-direction:column;height:384px;width:768px;padding-top:24px;border-top-left-radius:24px;border-top-right-radius:24px;}/*!sc*/ @media only screen and (max-width: 768px){.kQKzCm{margin-top:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.kQKzCm{border-top:solid 1px rgba(0, 0, 0, 0.33);}}/*!sc*/ @media only screen and (max-width: 768px){.kQKzCm{border-left:solid 1px rgba(0, 0, 0, 0.33);border-right:solid 1px rgba(0, 0, 0, 0.33);}}/*!sc*/ @media only screen and (max-width: 768px){.kQKzCm{padding-top:12px;}}/*!sc*/ .ixuObg{display:flex;box-sizing:border-box;max-width:100%;align-items:center;background-color:rgba(125, 76, 219, 0.1);min-width:0;min-height:0;flex-direction:column;padding:0px;}/*!sc*/ @media only screen and (max-width: 768px){.ixuObg{padding:0px;}}/*!sc*/ .ixNlAZ{display:flex;box-sizing:border-box;max-width:100%;align-self:center;margin-bottom:96px;background-color:#3D138D;color:#f8f8f8;min-width:0;min-height:0;flex-direction:column;width:768px;border-bottom-left-radius:24px;border-bottom-right-radius:24px;overflow:hidden;}/*!sc*/ @media only screen and (max-width: 768px){.ixNlAZ{margin-bottom:48px;}}/*!sc*/ .fpiDlN{display:flex;box-sizing:border-box;max-width:100%;margin:24px;min-width:0;min-height:0;flex-direction:row;justify-content:center;}/*!sc*/ @media only screen and (max-width: 768px){.fpiDlN{margin:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.fpiDlN{flex-direction:column;flex-basis:auto;justify-content:flex-start;align-items:stretch;}}/*!sc*/ .fgBTeW{display:flex;box-sizing:border-box;max-width:100%;align-self:center;margin-top:96px;background-color:#3D138D;color:#f8f8f8;min-width:0;min-height:0;flex-direction:column;height:192px;width:768px;border-top-left-radius:24px;border-top-right-radius:24px;}/*!sc*/ @media only screen and (max-width: 768px){.fgBTeW{margin-top:48px;}}/*!sc*/ .jtfOCE{display:flex;box-sizing:border-box;max-width:100%;align-self:flex-start;margin:24px;min-width:0;min-height:0;flex-direction:row;}/*!sc*/ @media only screen and (max-width: 768px){.jtfOCE{margin:12px;}}/*!sc*/ .fZzGoK{display:flex;box-sizing:border-box;max-width:100%;align-items:center;background-color:#FFFFFF;color:#444444;min-width:0;min-height:0;flex-direction:column;padding-top:96px;}/*!sc*/ @media only screen and (max-width: 768px){.fZzGoK{padding-top:48px;}}/*!sc*/ .bSVBFV{display:flex;box-sizing:border-box;max-width:100%;margin-top:48px;margin-bottom:96px;border-bottom:solid 1px rgba(0, 0, 0, 0.33);min-width:0;min-height:0;flex-direction:row;justify-content:center;padding-bottom:48px;flex-wrap:wrap;}/*!sc*/ @media only screen and (max-width: 768px){.bSVBFV{margin-top:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.bSVBFV{margin-bottom:48px;}}/*!sc*/ @media only screen and (max-width: 768px){.bSVBFV{border-bottom:solid 1px rgba(0, 0, 0, 0.33);}}/*!sc*/ @media only screen and (max-width: 768px){.bSVBFV{padding-bottom:24px;}}/*!sc*/ .gZoMmK{display:flex;box-sizing:border-box;align-items:center;min-width:0;min-height:0;flex-direction:column;flex-basis:384px;}/*!sc*/ .fmtZOQ{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;height:96px;width:96px;justify-content:center;border-radius:100%;overflow:hidden;}/*!sc*/ .hIYCWf{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:column;width:384px;padding:24px;}/*!sc*/ @media only screen and (max-width: 768px){.hIYCWf{padding:12px;}}/*!sc*/ .sCDoo{display:flex;box-sizing:border-box;max-width:100%;margin-top:48px;margin-bottom:96px;align-items:center;min-width:0;min-height:0;flex-direction:row;justify-content:center;flex-wrap:wrap;}/*!sc*/ @media only screen and (max-width: 768px){.sCDoo{margin-top:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.sCDoo{margin-bottom:48px;}}/*!sc*/ .eKUmaS{display:flex;box-sizing:border-box;margin:24px;align-items:center;min-width:0;min-height:0;flex-direction:row;flex-basis:192px;justify-content:center;}/*!sc*/ @media only screen and (max-width: 768px){.eKUmaS{margin:12px;}}/*!sc*/ .bJgkal{display:flex;box-sizing:border-box;max-width:100%;align-items:center;background-color:#3D138D;color:#f8f8f8;min-width:0;min-height:0;flex-direction:column;padding-top:96px;}/*!sc*/ @media only screen and (max-width: 768px){.bJgkal{padding-top:48px;}}/*!sc*/ .kxPtyc{display:flex;box-sizing:border-box;max-width:100%;margin-left:48px;margin-right:48px;margin-top:48px;min-width:0;min-height:0;flex-direction:row;justify-content:center;}/*!sc*/ @media only screen and (max-width: 768px){.kxPtyc{margin-left:24px;margin-right:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.kxPtyc{margin-top:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.kxPtyc{flex-direction:column;flex-basis:auto;justify-content:flex-start;align-items:stretch;}}/*!sc*/ .cDwcko{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;padding-left:48px;padding-right:48px;}/*!sc*/ @media only screen and (max-width: 768px){.cDwcko{padding-left:24px;padding-right:24px;}}/*!sc*/ .fvFhXE{display:flex;box-sizing:border-box;max-width:100%;min-width:0;min-height:0;flex-direction:column;flex:1 1;}/*!sc*/ .dtWJsN{display:flex;box-sizing:border-box;max-width:100%;align-items:center;min-width:0;min-height:0;flex-direction:column;padding-top:96px;padding-left:96px;padding-right:96px;}/*!sc*/ @media only screen and (max-width: 768px){.dtWJsN{padding-top:48px;}}/*!sc*/ @media only screen and (max-width: 768px){.dtWJsN{padding-left:48px;}}/*!sc*/ @media only screen and (max-width: 768px){.dtWJsN{padding-right:48px;}}/*!sc*/ .hPevmE{display:flex;box-sizing:border-box;max-width:100%;align-self:center;min-width:0;min-height:0;flex-direction:row;}/*!sc*/ .fmUJBl{display:flex;box-sizing:border-box;max-width:100%;background-color:#7D4CDB;color:#f8f8f8;min-width:0;min-height:0;flex-direction:column;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;border-radius:96px;}/*!sc*/ @media only screen and (max-width: 768px){.fmUJBl{padding-left:12px;padding-right:12px;}}/*!sc*/ @media only screen and (max-width: 768px){.fmUJBl{padding-top:6px;padding-bottom:6px;}}/*!sc*/ @media only screen and (max-width: 768px){.fmUJBl{border-radius:48px;}}/*!sc*/ .SKzcm{display:flex;box-sizing:border-box;max-width:100%;background-color:#FFCA58;color:#444444;min-width:0;min-height:0;flex-direction:column;padding-left:48px;padding-right:48px;padding-top:12px;padding-bottom:12px;border-radius:96px;}/*!sc*/ @media only screen and (max-width: 768px){.SKzcm{padding-left:24px;padding-right:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.SKzcm{padding-top:6px;padding-bottom:6px;}}/*!sc*/ @media only screen and (max-width: 768px){.SKzcm{border-radius:48px;}}/*!sc*/ .cAxsai{display:flex;box-sizing:border-box;max-width:100%;align-items:flex-end;min-width:0;min-height:0;flex-direction:row;justify-content:space-between;}/*!sc*/ @media only screen and (max-width: 768px){.cAxsai{flex-direction:column;flex-basis:auto;justify-content:flex-start;align-items:stretch;}}/*!sc*/ .fkTvCA{display:flex;box-sizing:border-box;max-width:100%;margin-top:96px;margin-bottom:96px;min-width:0;min-height:0;flex-direction:column;}/*!sc*/ @media only screen and (max-width: 768px){.fkTvCA{margin-top:48px;margin-bottom:48px;}}/*!sc*/ data-styled.g1[id="StyledBox-sc-13pk1d4-0"]{content:"ciLqAS,hnurwU,jByPUu,bfCWLU,hWWfue,fZhRKA,dofnQG,jNVmSm,nWxZr,iFxJWS,kQycYR,eRmILU,FSlak,cxLzRp,kIzUEW,iKPIpq,bmmZGh,blutuO,dLpMCq,kORcBo,cdXWYm,NSNPj,elspsd,iGfKsa,bmIhiH,imThJd,kuKfSR,fKNhxu,cEOjox,iWDGm,kQKzCm,ixuObg,ixNlAZ,fpiDlN,fgBTeW,jtfOCE,fZzGoK,bSVBFV,gZoMmK,fmtZOQ,hIYCWf,sCDoo,eKUmaS,bJgkal,kxPtyc,cDwcko,fvFhXE,dtWJsN,hPevmE,fmUJBl,SKzcm,cAxsai,fkTvCA,"}/*!sc*/ .GTiEI{flex:0 0 auto;align-self:stretch;width:12px;}/*!sc*/ .bzKDdG{flex:0 0 auto;align-self:stretch;width:24px;}/*!sc*/ @media only screen and (max-width: 768px){.bzKDdG{width:12px;}}/*!sc*/ .fJiyCS{flex:0 0 auto;align-self:stretch;width:12px;}/*!sc*/ @media only screen and (max-width: 768px){.fJiyCS{width:6px;}}/*!sc*/ .dsHAXK{flex:0 0 auto;align-self:stretch;width:48px;}/*!sc*/ @media only screen and (max-width: 768px){.dsHAXK{width:auto;height:24px;}}/*!sc*/ .jhZMFa{flex:0 0 auto;align-self:stretch;height:24px;}/*!sc*/ @media only screen and (max-width: 768px){.jhZMFa{height:12px;}}/*!sc*/ data-styled.g2[id="StyledBox__StyledBoxGap-sc-13pk1d4-1"]{content:"GTiEI,bzKDdG,fJiyCS,dsHAXK,jhZMFa,"}/*!sc*/ .gOBReZ{display:inline-block;flex:0 0 auto;width:48px;height:48px;}/*!sc*/ .cQdDyc{display:inline-block;flex:0 0 auto;width:24px;height:24px;fill:#666666;stroke:#666666;}/*!sc*/ .cQdDyc g{fill:inherit;stroke:inherit;}/*!sc*/ .cQdDyc *:not([stroke])[fill='none']{stroke-width:0;}/*!sc*/ .cQdDyc *[stroke*='#'],.cQdDyc *[STROKE*='#']{stroke:inherit;fill:none;}/*!sc*/ .cQdDyc *[fill-rule],.cQdDyc *[FILL-RULE],.cQdDyc *[fill*='#'],.cQdDyc *[FILL*='#']{fill:inherit;stroke:none;}/*!sc*/ .giXgmI{display:inline-block;flex:0 0 auto;width:48px;height:48px;fill:#7D4CDB;stroke:#7D4CDB;}/*!sc*/ .giXgmI g{fill:inherit;stroke:inherit;}/*!sc*/ .giXgmI *:not([stroke])[fill='none']{stroke-width:0;}/*!sc*/ .giXgmI *[stroke*='#'],.giXgmI *[STROKE*='#']{stroke:inherit;fill:none;}/*!sc*/ .giXgmI *[fill-rule],.giXgmI *[FILL-RULE],.giXgmI *[fill*='#'],.giXgmI *[FILL*='#']{fill:inherit;stroke:none;}/*!sc*/ .gCvxNw{display:inline-block;flex:0 0 auto;width:24px;height:24px;fill:#7D4CDB;stroke:#7D4CDB;}/*!sc*/ .gCvxNw g{fill:inherit;stroke:inherit;}/*!sc*/ .gCvxNw *:not([stroke])[fill='none']{stroke-width:0;}/*!sc*/ .gCvxNw *[stroke*='#'],.gCvxNw *[STROKE*='#']{stroke:inherit;fill:none;}/*!sc*/ .gCvxNw *[fill-rule],.gCvxNw *[FILL-RULE],.gCvxNw *[fill*='#'],.gCvxNw *[FILL*='#']{fill:inherit;stroke:none;}/*!sc*/ .bQfqTo{display:inline-block;flex:0 0 auto;width:24px;height:24px;fill:#6FFFB0;stroke:#6FFFB0;}/*!sc*/ .bQfqTo g{fill:inherit;stroke:inherit;}/*!sc*/ .bQfqTo *:not([stroke])[fill='none']{stroke-width:0;}/*!sc*/ .bQfqTo *[stroke*='#'],.bQfqTo *[STROKE*='#']{stroke:inherit;fill:none;}/*!sc*/ .bQfqTo *[fill-rule],.bQfqTo *[FILL-RULE],.bQfqTo *[fill*='#'],.bQfqTo *[FILL*='#']{fill:inherit;stroke:none;}/*!sc*/ data-styled.g5[id="StyledIcon-sc-ofa7kd-0"]{content:"gOBReZ,cQdDyc,giXgmI,gCvxNw,bQfqTo,"}/*!sc*/ .fcANMu{position:relative;}/*!sc*/ data-styled.g7[id="StyledStack-sc-ajspsk-0"]{content:"fcANMu,"}/*!sc*/ .kPXkjX{position:relative;display:block;}/*!sc*/ .bORdwX{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}/*!sc*/ data-styled.g8[id="StyledStack__StyledStackLayer-sc-ajspsk-1"]{content:"kPXkjX,bORdwX,"}/*!sc*/ .jEzQNH{font-size:26px;line-height:32px;}/*!sc*/ .dQnLHE{font-size:22px;line-height:28px;}/*!sc*/ .bIRFQp{font-size:18px;line-height:24px;}/*!sc*/ .eaKjYz{font-size:34px;line-height:40px;font-weight:bold;}/*!sc*/ data-styled.g9[id="StyledText-sc-1sadyjn-0"]{content:"jEzQNH,dQnLHE,bIRFQp,eaKjYz,"}/*!sc*/ .hGLFUy{display:inline-block;box-sizing:border-box;cursor:pointer;font:inherit;text-decoration:none;margin:0;background:transparent;overflow:visible;text-transform:none;border:2px solid #7D4CDB;border-radius:18px;color:#444444;padding:4px 22px;font-size:18px;line-height:24px;transition-property:color,background-color,border-color,box-shadow;transition-duration:0.1s;transition-timing-function:ease-in-out;font-weight:bold;}/*!sc*/ .hGLFUy:hover{background-color:rgba(221, 221, 221, 0.4);color:#000000;box-shadow:0px 0px 0px 2px #7D4CDB;}/*!sc*/ .hGLFUy:focus{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .hGLFUy:focus >circle,.hGLFUy:focus >ellipse,.hGLFUy:focus >line,.hGLFUy:focus >path,.hGLFUy:focus >polygon,.hGLFUy:focus >polyline,.hGLFUy:focus >rect{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .hGLFUy:focus ::-moz-focus-inner{border:0;}/*!sc*/ .hGLFUy:focus:not(:focus-visible){outline:none;box-shadow:none;}/*!sc*/ .hGLFUy:focus:not(:focus-visible) >circle,.hGLFUy:focus:not(:focus-visible) >ellipse,.hGLFUy:focus:not(:focus-visible) >line,.hGLFUy:focus:not(:focus-visible) >path,.hGLFUy:focus:not(:focus-visible) >polygon,.hGLFUy:focus:not(:focus-visible) >polyline,.hGLFUy:focus:not(:focus-visible) >rect{outline:none;box-shadow:none;}/*!sc*/ .hGLFUy:focus:not(:focus-visible) ::-moz-focus-inner{border:0;}/*!sc*/ .fRUVso{display:inline-block;box-sizing:border-box;cursor:pointer;font:inherit;text-decoration:none;margin:0;background:transparent;overflow:visible;text-transform:none;border:2px solid #7D4CDB;border-radius:18px;color:#444444;padding:4px 22px;font-size:18px;line-height:24px;background-color:#7D4CDB;color:#f8f8f8;border-radius:18px;transition-property:color,background-color,border-color,box-shadow;transition-duration:0.1s;transition-timing-function:ease-in-out;font-weight:bold;}/*!sc*/ .fRUVso:hover{background-color:rgba(221, 221, 221, 0.4);color:#000000;box-shadow:0px 0px 0px 2px #7D4CDB;}/*!sc*/ .fRUVso:focus{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .fRUVso:focus >circle,.fRUVso:focus >ellipse,.fRUVso:focus >line,.fRUVso:focus >path,.fRUVso:focus >polygon,.fRUVso:focus >polyline,.fRUVso:focus >rect{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .fRUVso:focus ::-moz-focus-inner{border:0;}/*!sc*/ .fRUVso:focus:not(:focus-visible){outline:none;box-shadow:none;}/*!sc*/ .fRUVso:focus:not(:focus-visible) >circle,.fRUVso:focus:not(:focus-visible) >ellipse,.fRUVso:focus:not(:focus-visible) >line,.fRUVso:focus:not(:focus-visible) >path,.fRUVso:focus:not(:focus-visible) >polygon,.fRUVso:focus:not(:focus-visible) >polyline,.fRUVso:focus:not(:focus-visible) >rect{outline:none;box-shadow:none;}/*!sc*/ .fRUVso:focus:not(:focus-visible) ::-moz-focus-inner{border:0;}/*!sc*/ .fSjCWY{display:inline-block;box-sizing:border-box;cursor:pointer;font:inherit;text-decoration:none;margin:0;background:transparent;overflow:visible;text-transform:none;color:inherit;outline:none;border:none;padding:0;text-align:inherit;line-height:0;padding:12px;}/*!sc*/ .fSjCWY:hover{background-color:rgba(221, 221, 221, 0.4);color:#000000;}/*!sc*/ .fSjCWY:focus{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .fSjCWY:focus >circle,.fSjCWY:focus >ellipse,.fSjCWY:focus >line,.fSjCWY:focus >path,.fSjCWY:focus >polygon,.fSjCWY:focus >polyline,.fSjCWY:focus >rect{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .fSjCWY:focus ::-moz-focus-inner{border:0;}/*!sc*/ .fSjCWY:focus:not(:focus-visible){outline:none;box-shadow:none;}/*!sc*/ .fSjCWY:focus:not(:focus-visible) >circle,.fSjCWY:focus:not(:focus-visible) >ellipse,.fSjCWY:focus:not(:focus-visible) >line,.fSjCWY:focus:not(:focus-visible) >path,.fSjCWY:focus:not(:focus-visible) >polygon,.fSjCWY:focus:not(:focus-visible) >polyline,.fSjCWY:focus:not(:focus-visible) >rect{outline:none;box-shadow:none;}/*!sc*/ .fSjCWY:focus:not(:focus-visible) ::-moz-focus-inner{border:0;}/*!sc*/ .PuEUI{display:inline-block;box-sizing:border-box;cursor:pointer;font:inherit;text-decoration:none;margin:0;background:transparent;overflow:visible;text-transform:none;border:2px solid #7D4CDB;border-radius:18px;color:#444444;padding:4px 22px;font-size:18px;line-height:24px;transition-property:color,background-color,border-color,box-shadow;transition-duration:0.1s;transition-timing-function:ease-in-out;}/*!sc*/ .PuEUI:hover{box-shadow:0px 0px 0px 2px #7D4CDB;}/*!sc*/ .PuEUI:focus{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .PuEUI:focus >circle,.PuEUI:focus >ellipse,.PuEUI:focus >line,.PuEUI:focus >path,.PuEUI:focus >polygon,.PuEUI:focus >polyline,.PuEUI:focus >rect{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .PuEUI:focus ::-moz-focus-inner{border:0;}/*!sc*/ .PuEUI:focus:not(:focus-visible){outline:none;box-shadow:none;}/*!sc*/ .PuEUI:focus:not(:focus-visible) >circle,.PuEUI:focus:not(:focus-visible) >ellipse,.PuEUI:focus:not(:focus-visible) >line,.PuEUI:focus:not(:focus-visible) >path,.PuEUI:focus:not(:focus-visible) >polygon,.PuEUI:focus:not(:focus-visible) >polyline,.PuEUI:focus:not(:focus-visible) >rect{outline:none;box-shadow:none;}/*!sc*/ .PuEUI:focus:not(:focus-visible) ::-moz-focus-inner{border:0;}/*!sc*/ .gIWFNw{display:inline-block;box-sizing:border-box;cursor:pointer;font:inherit;text-decoration:none;margin:0;background:transparent;overflow:visible;text-transform:none;align-self:center;color:inherit;outline:none;border:none;padding:0;text-align:inherit;}/*!sc*/ .gIWFNw:focus{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .gIWFNw:focus >circle,.gIWFNw:focus >ellipse,.gIWFNw:focus >line,.gIWFNw:focus >path,.gIWFNw:focus >polygon,.gIWFNw:focus >polyline,.gIWFNw:focus >rect{outline:none;box-shadow:0 0 2px 2px #6FFFB0;}/*!sc*/ .gIWFNw:focus ::-moz-focus-inner{border:0;}/*!sc*/ .gIWFNw:focus:not(:focus-visible){outline:none;box-shadow:none;}/*!sc*/ .gIWFNw:focus:not(:focus-visible) >circle,.gIWFNw:focus:not(:focus-visible) >ellipse,.gIWFNw:focus:not(:focus-visible) >line,.gIWFNw:focus:not(:focus-visible) >path,.gIWFNw:focus:not(:focus-visible) >polygon,.gIWFNw:focus:not(:focus-visible) >polyline,.gIWFNw:focus:not(:focus-visible) >rect{outline:none;box-shadow:none;}/*!sc*/ .gIWFNw:focus:not(:focus-visible) ::-moz-focus-inner{border:0;}/*!sc*/ data-styled.g11[id="StyledButton-sc-323bzc-0"]{content:"hGLFUy,fRUVso,fSjCWY,PuEUI,gIWFNw,"}/*!sc*/ .fveWIZ{margin:0px;font-size:82px;line-height:88px;max-width:1968px;font-weight:600;overflow-wrap:break-word;text-align:center;}/*!sc*/ @media only screen and (max-width: 768px){.fveWIZ{margin:0px;}}/*!sc*/ @media only screen and (max-width: 768px){.fveWIZ{font-size:50px;line-height:56px;max-width:1200px;}}/*!sc*/ .dXfail{margin:0px;font-size:50px;line-height:56px;max-width:1200px;font-weight:600;overflow-wrap:break-word;text-align:center;}/*!sc*/ @media only screen and (max-width: 768px){.dXfail{margin:0px;}}/*!sc*/ @media only screen and (max-width: 768px){.dXfail{font-size:34px;line-height:40px;max-width:816px;}}/*!sc*/ .eOnJAt{margin:0px;font-size:42px;line-height:48px;max-width:1008px;font-weight:600;overflow-wrap:break-word;text-align:center;}/*!sc*/ @media only screen and (max-width: 768px){.eOnJAt{margin:0px;}}/*!sc*/ @media only screen and (max-width: 768px){.eOnJAt{font-size:18px;line-height:24px;max-width:432px;}}/*!sc*/ .bNlZZQ{margin:48px;font-size:50px;line-height:56px;max-width:1200px;font-weight:600;overflow-wrap:break-word;}/*!sc*/ @media only screen and (max-width: 768px){.bNlZZQ{margin:24px;}}/*!sc*/ @media only screen and (max-width: 768px){.bNlZZQ{font-size:34px;line-height:40px;max-width:816px;}}/*!sc*/ .hoPvpH{margin:0px;font-size:26px;line-height:32px;max-width:624px;font-weight:600;overflow-wrap:break-word;text-align:center;}/*!sc*/ @media only screen and (max-width: 768px){.hoPvpH{margin:0px;}}/*!sc*/ @media only screen and (max-width: 768px){.hoPvpH{font-size:18px;line-height:24px;max-width:432px;}}/*!sc*/ data-styled.g18[id="StyledHeading-sc-1rdh4aw-0"]{content:"fveWIZ,dXfail,eOnJAt,bNlZZQ,hoPvpH,"}/*!sc*/ .eoHTDA{box-sizing:border-box;display:inline-flex;font-size:inherit;line-height:inherit;color:#7D4CDB;font-weight:600;text-decoration:none;cursor:pointer;}/*!sc*/ .eoHTDA:hover{text-decoration:underline;}/*!sc*/ .jdLqkL{box-sizing:border-box;display:inline-flex;font-size:34px;line-height:40px;color:#7D4CDB;font-weight:600;text-decoration:none;cursor:pointer;}/*!sc*/ .jdLqkL:hover{text-decoration:underline;}/*!sc*/ .kgQYVF{box-sizing:border-box;display:inline-flex;font-size:26px;line-height:32px;color:#7D4CDB;font-weight:600;text-decoration:none;cursor:pointer;}/*!sc*/ .kgQYVF:hover{text-decoration:underline;}/*!sc*/ .dtokLh{box-sizing:border-box;display:inline-flex;font-size:26px;line-height:32px;color:#6FFFB0;font-weight:600;text-decoration:none;cursor:pointer;}/*!sc*/ .dtokLh:hover{text-decoration:underline;}/*!sc*/ .bAbdKv{box-sizing:border-box;display:inline-flex;font-size:inherit;line-height:inherit;color:#7D4CDB;font-weight:600;text-decoration:none;cursor:pointer;padding:12px;}/*!sc*/ .bAbdKv:hover{text-decoration:underline;}/*!sc*/ data-styled.g19[id="StyledAnchor-sc-1rp7lwl-0"]{content:"eoHTDA,jdLqkL,kgQYVF,dtokLh,bAbdKv,"}/*!sc*/ .jSTuPN{flex:1 1;overflow:hidden;object-fit:cover;}/*!sc*/ data-styled.g20[id="StyledImage-sc-ey4zx9-0"]{content:"jSTuPN,jGDUNj,"}/*!sc*/ .jaKyvO{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:18px;line-height:24px;background-color:#ffffff;color:#444444;box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}/*!sc*/ .gOzrP{font-size:18px;line-height:24px;box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}/*!sc*/ data-styled.g124[id="StyledGrommet-sc-19lkkz7-0"]{content:"jaKyvO,gOzrP,"}/*!sc*/ .itPSel{font-size:34px;line-height:40px;max-width:816px;text-align:center;}/*!sc*/ .qthAA{font-size:26px;line-height:32px;max-width:624px;text-align:center;}/*!sc*/ .dnOlIA{font-size:22px;line-height:28px;max-width:528px;text-align:center;}/*!sc*/ .kbZjfW{align-self:center;font-size:26px;line-height:32px;max-width:624px;text-align:center;}/*!sc*/ .iUfUIc{font-size:18px;line-height:24px;max-width:432px;}/*!sc*/ data-styled.g126[id="StyledParagraph-sc-tbetod-0"]{content:"itPSel,qthAA,dnOlIA,kbZjfW,iUfUIc,"}/*!sc*/ @keyframes hAsUlT{from{opacity:0;}to{opacity:1;}}/*!sc*/ data-styled.g144[id="sc-keyframes-hAsUlT"]{content:"hAsUlT,"}/*!sc*/ </style><style>body { margin: 0; }</style> </head> <body> <div id="content"><div class="StyledGrommet-sc-19lkkz7-0 jaKyvO"><div class="StyledBox-sc-13pk1d4-0 ciLqAS"><div class="StyledBox-sc-13pk1d4-0 hnurwU"><div class="StyledBox-sc-13pk1d4-0 jByPUu"><div class="StyledBox-sc-13pk1d4-0 bfCWLU"><a href="/" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><svg aria-label="Grommet" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 gOBReZ"><path fill="none" stroke="#865CD6" stroke-width="4" d="M12 2C6.485 2 2 6.485 2 12s4.485 10 10 10 10-4.485 10-10S17.515 2 12 2z"></path></svg><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><span class="StyledText-sc-1sadyjn-0 jEzQNH">grommet</span></span></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 bzKDdG"></div><div class="StyledBox-sc-13pk1d4-0 hWWfue"><div class="StyledBox-sc-13pk1d4-0 hWWfue"><a href="/docs" class="StyledButton-sc-323bzc-0 hGLFUy">docs</a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 fJiyCS"></div><a href="/components" class="StyledButton-sc-323bzc-0 fRUVso">components</a></div><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 fJiyCS"></div><button aria-label="Search" type="button" class="StyledButton-sc-323bzc-0 fSjCWY"><svg aria-label="Search" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 cQdDyc"><path fill="none" stroke="#000" stroke-width="2" d="m15 15 7 7-7-7zm-5.5 2a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15z"></path></svg></button></div></div><div class="StyledBox-sc-13pk1d4-0 fZhRKA"></div><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h1 class="StyledHeading-sc-1rdh4aw-0 fveWIZ">streamline the way you develop apps</h1><p class="StyledParagraph-sc-tbetod-0 itPSel">build responsive and accessible mobile-first projects for the web with an easy to use component library</p></div><div class="StyledBox-sc-13pk1d4-0 jNVmSm"><a target="_blank" aria-label="Follow us on Twitter" href="https://twitter.com/grommet_io" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><svg aria-label="Twitter" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 giXgmI"><path fill="#1DA1F2" fill-rule="evenodd" d="M24 4.309a9.83 9.83 0 0 1-2.828.775 4.94 4.94 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.196 4.925 4.925 0 0 0-8.39 4.49A13.974 13.974 0 0 1 1.671 2.9a4.902 4.902 0 0 0-.667 2.476c0 1.708.869 3.216 2.191 4.099A4.936 4.936 0 0 1 .964 8.86v.06a4.926 4.926 0 0 0 3.95 4.829 4.964 4.964 0 0 1-2.224.085 4.93 4.93 0 0 0 4.6 3.42 9.886 9.886 0 0 1-6.115 2.107c-.398 0-.79-.023-1.175-.068a13.945 13.945 0 0 0 7.548 2.212c9.057 0 14.009-7.503 14.009-14.01 0-.213-.005-.425-.014-.636A10.012 10.012 0 0 0 24 4.309"></path></svg><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><span class="StyledText-sc-1sadyjn-0 dQnLHE">Follow us on Twitter</span></span></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 dsHAXK"></div><a target="_blank" aria-label="Share feedback on Github" href="https://github.com/grommet/grommet" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><svg aria-label="Github" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 giXgmI"><path fill="#333" fill-rule="evenodd" d="M11.999 1C5.926 1 1 5.925 1 12c0 4.86 3.152 8.983 7.523 10.437.55.102.75-.238.75-.53 0-.26-.009-.952-.014-1.87-3.06.664-3.706-1.475-3.706-1.475-.5-1.27-1.221-1.61-1.221-1.61-.999-.681.075-.668.075-.668 1.105.078 1.685 1.134 1.685 1.134.981 1.68 2.575 1.195 3.202.914.1-.71.384-1.195.698-1.47-2.442-.278-5.01-1.222-5.01-5.437 0-1.2.428-2.183 1.132-2.952-.114-.278-.491-1.397.108-2.91 0 0 .923-.297 3.025 1.127A10.536 10.536 0 0 1 12 6.32a10.49 10.49 0 0 1 2.754.37c2.1-1.424 3.022-1.128 3.022-1.128.6 1.514.223 2.633.11 2.911.705.769 1.13 1.751 1.13 2.952 0 4.226-2.572 5.156-5.022 5.428.395.34.747 1.01.747 2.037 0 1.47-.014 2.657-.014 3.017 0 .295.199.637.756.53C19.851 20.979 23 16.859 23 12c0-6.075-4.926-11-11.001-11"></path></svg><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><span class="StyledText-sc-1sadyjn-0 dQnLHE">Share feedback on GitHub</span></span></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 dsHAXK"></div><a target="_blank" aria-label="Chat with us on Slack" href="https://slack-invite.grommet.io" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><svg aria-label="Slack" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 giXgmI"><g fill="none" fill-rule="evenodd"><path fill="#E01E5A" d="M5.048 15.124a2.512 2.512 0 0 1-2.515 2.514A2.512 2.512 0 0 1 .02 15.124a2.512 2.512 0 0 1 2.514-2.514h2.515v2.514zm1.257 0a2.512 2.512 0 0 1 2.514-2.514 2.512 2.512 0 0 1 2.514 2.514v6.286a2.512 2.512 0 0 1-2.514 2.514 2.512 2.512 0 0 1-2.514-2.514v-6.286z"></path><path fill="#36C5F0" d="M8.819 5.029a2.512 2.512 0 0 1-2.514-2.515A2.512 2.512 0 0 1 8.819 0a2.512 2.512 0 0 1 2.514 2.514V5.03H8.82zm0 1.276a2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.514H2.514A2.512 2.512 0 0 1 0 8.82a2.512 2.512 0 0 1 2.514-2.514H8.82z"></path><path fill="#2EB67D" d="M18.895 8.819a2.512 2.512 0 0 1 2.515-2.514 2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.514h-2.515V8.82zm-1.257 0a2.512 2.512 0 0 1-2.514 2.514 2.512 2.512 0 0 1-2.515-2.514V2.514A2.512 2.512 0 0 1 15.124 0a2.512 2.512 0 0 1 2.514 2.514V8.82z"></path><path fill="#ECB22E" d="M15.124 18.895a2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.515 2.512 2.512 0 0 1-2.514-2.515v-2.514h2.514zm0-1.257a2.512 2.512 0 0 1-2.514-2.514 2.512 2.512 0 0 1 2.514-2.514h6.305a2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.514h-6.305z"></path></g></svg><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><span class="StyledText-sc-1sadyjn-0 dQnLHE">Chat with us on Slack</span></span></a></div></div></div><div class="StyledBox-sc-13pk1d4-0 nWxZr"><div class="StyledBox-sc-13pk1d4-0 iFxJWS"><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h2 class="StyledHeading-sc-1rdh4aw-0 dXfail">part design system, part framework, and all awesome</h2><p class="StyledParagraph-sc-tbetod-0 itPSel">grommet is a <a aria-label="reactjs" href="https://reactjs.org" class="StyledAnchor-sc-1rp7lwl-0 jdLqkL">react</a>-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package</p></div><div class="StyledBox-sc-13pk1d4-0 kQycYR"><div class="StyledBox-sc-13pk1d4-0 eRmILU"><div class="StyledBox-sc-13pk1d4-0 FSlak"><div class="StyledBox-sc-13pk1d4-0 cxLzRp"><div class="StyledBox-sc-13pk1d4-0 kIzUEW"><div class="StyledBox-sc-13pk1d4-0 iKPIpq"><span class="StyledText-sc-1sadyjn-0 dQnLHE">Menu</span></div><div class="StyledBox-sc-13pk1d4-0 bmmZGh"><div class="StyledBox-sc-13pk1d4-0 blutuO"><span class="StyledText-sc-1sadyjn-0 bIRFQp">Edit</span></div></div><div class="StyledBox-sc-13pk1d4-0 dLpMCq"><div class="StyledBox-sc-13pk1d4-0 blutuO"><span class="StyledText-sc-1sadyjn-0 bIRFQp">Connect</span></div></div><div class="StyledBox-sc-13pk1d4-0 dLpMCq"><div class="StyledBox-sc-13pk1d4-0 blutuO"><span class="StyledText-sc-1sadyjn-0 bIRFQp">Delete</span></div></div></div></div><div class="StyledBox-sc-13pk1d4-0 kORcBo"><h3 class="StyledHeading-sc-1rdh4aw-0 eOnJAt">mix, match, and make stuff</h3><p class="StyledParagraph-sc-tbetod-0 qthAA"><span>tailor composite components with grommet. embrace atomic design methods and build a library that fits your needs.</span></p></div></div><div class="StyledBox-sc-13pk1d4-0 FSlak"><div class="StyledBox-sc-13pk1d4-0 cdXWYm"><div class="StyledStack-sc-ajspsk-0 fcANMu"><div class="StyledStack__StyledStackLayer-sc-ajspsk-1 kPXkjX"><div class="StyledBox-sc-13pk1d4-0 blutuO"><div class="StyledBox-sc-13pk1d4-0 NSNPj"></div><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 bzKDdG"></div><div class="StyledBox-sc-13pk1d4-0 elspsd"></div></div></div><div class="StyledStack__StyledStackLayer-sc-ajspsk-1 bORdwX"><div class="StyledBox-sc-13pk1d4-0 iGfKsa"><div class="StyledBox-sc-13pk1d4-0 bmIhiH"><span class="StyledText-sc-1sadyjn-0 eaKjYz">Aa</span></div></div></div></div></div><div class="StyledBox-sc-13pk1d4-0 kORcBo"><h3 class="StyledHeading-sc-1rdh4aw-0 eOnJAt">accessible is being inclusive</h3><p class="StyledParagraph-sc-tbetod-0 qthAA"><span>keyboard navigation, screen reader tags, and more. grommet provides support for W3c鈥檚聽<a href="https://www.w3.org/TR/WCAG21/" class="StyledAnchor-sc-1rp7lwl-0 kgQYVF">WCAG 2.1 spec</a>.</span></p></div></div></div><div class="StyledBox-sc-13pk1d4-0 eRmILU"><div class="StyledBox-sc-13pk1d4-0 FSlak"><div class="StyledBox-sc-13pk1d4-0 cdXWYm"><div class="StyledGrommet-sc-19lkkz7-0 gOzrP"><button type="button" class="StyledButton-sc-323bzc-0 PuEUI">Log in</button></div><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 jhZMFa"></div><div class="StyledGrommet-sc-19lkkz7-0 gOzrP"><button type="button" class="StyledButton-sc-323bzc-0 PuEUI">GET STARTED</button></div><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 jhZMFa"></div><div class="StyledGrommet-sc-19lkkz7-0 gOzrP"><button type="button" class="StyledButton-sc-323bzc-0 PuEUI">click me</button></div></div><div class="StyledBox-sc-13pk1d4-0 kORcBo"><h3 class="StyledHeading-sc-1rdh4aw-0 eOnJAt">powerful theming tools</h3><p class="StyledParagraph-sc-tbetod-0 qthAA"><span>tailor the component library to align with your Color, Type, Layout needs. you can even control component interaction.</span></p></div></div><div class="StyledBox-sc-13pk1d4-0 FSlak"><div class="StyledBox-sc-13pk1d4-0 imThJd"><div class="StyledBox-sc-13pk1d4-0 kuKfSR"><div class="StyledBox-sc-13pk1d4-0 fKNhxu"></div></div></div><div class="StyledBox-sc-13pk1d4-0 kORcBo"><h3 class="StyledHeading-sc-1rdh4aw-0 eOnJAt">layouts can be more flexible</h3><p class="StyledParagraph-sc-tbetod-0 qthAA"><span>support all the devices! use聽<a href="/box" class="StyledAnchor-sc-1rp7lwl-0 kgQYVF">Flexbox</a> and聽<a href="/grid" class="StyledAnchor-sc-1rp7lwl-0 kgQYVF">CSS Grid</a> to provide layouts for all those new phones and widescreen displays.</span></p></div></div></div></div></div></div><div class="StyledBox-sc-13pk1d4-0 cEOjox"><div class="StyledBox-sc-13pk1d4-0 jByPUu"><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h2 class="StyledHeading-sc-1rdh4aw-0 dXfail">start coding</h2><p class="StyledParagraph-sc-tbetod-0 itPSel"> already working on a project, starting fresh, or just want to poke around and see how all this junk works?</p></div><div class="StyledBox-sc-13pk1d4-0 iWDGm"><a target="_blank" href="https://github.com/grommet/grommet-starter-new-app" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><span class="StyledText-sc-1sadyjn-0 dQnLHE">Start New App</span><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><svg aria-label="Next" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 gCvxNw"><path fill="none" stroke="#000" stroke-width="2" d="m7 2 10 10L7 22"></path></svg></span></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 dsHAXK"></div><a target="_blank" href="https://github.com/grommet/grommet-starter-existing-app" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><span class="StyledText-sc-1sadyjn-0 dQnLHE">I have an Existing Codebase</span><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><svg aria-label="Next" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 gCvxNw"><path fill="none" stroke="#000" stroke-width="2" d="m7 2 10 10L7 22"></path></svg></span></a></div><div class="StyledBox-sc-13pk1d4-0 kQKzCm"></div></div></div><div class="StyledBox-sc-13pk1d4-0 ixuObg"><div class="StyledBox-sc-13pk1d4-0 jByPUu"><div class="StyledBox-sc-13pk1d4-0 ixNlAZ"><div></div></div><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h2 class="StyledHeading-sc-1rdh4aw-0 dXfail">and start designing</h2><p class="StyledParagraph-sc-tbetod-0 itPSel">sticker sheets, design patterns, app templates, and icons galore.</p></div><div class="StyledBox-sc-13pk1d4-0 fpiDlN"><a target="_blank" href="//designer.grommet.io" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><span class="StyledText-sc-1sadyjn-0 dQnLHE">Grommet Designer</span><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><svg aria-label="Next" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 gCvxNw"><path fill="none" stroke="#000" stroke-width="2" d="m7 2 10 10L7 22"></path></svg></span></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 dsHAXK"></div><a target="_blank" href="//icons.grommet.io" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><span class="StyledText-sc-1sadyjn-0 dQnLHE">Grommet Icons</span><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><svg aria-label="Next" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 gCvxNw"><path fill="none" stroke="#000" stroke-width="2" d="m7 2 10 10L7 22"></path></svg></span></a></div><div class="StyledBox-sc-13pk1d4-0 fgBTeW"><div class="StyledBox-sc-13pk1d4-0 jtfOCE"><svg viewBox="0 0 12 12" width="12" height="12"><circle cx="6" cy="6" r="6" fill="#ff0000"></circle></svg><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 fJiyCS"></div><svg viewBox="0 0 12 12" width="12" height="12"><circle cx="6" cy="6" r="6" fill="#ffff00"></circle></svg><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 fJiyCS"></div><svg viewBox="0 0 12 12" width="12" height="12"><circle cx="6" cy="6" r="6" fill="#00ff00"></circle></svg></div><h1 class="StyledHeading-sc-1rdh4aw-0 bNlZZQ">Hello World!</h1></div></div></div><div class="StyledBox-sc-13pk1d4-0 fZzGoK"><div class="StyledBox-sc-13pk1d4-0 jByPUu"><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h2 class="StyledHeading-sc-1rdh4aw-0 dXfail">don鈥檛 take our word for it</h2><p class="StyledParagraph-sc-tbetod-0 itPSel">here's what our community of designers and developers have to say about grommet</p></div><div class="StyledBox-sc-13pk1d4-0 bSVBFV"><div class="StyledBox-sc-13pk1d4-0 gZoMmK"><div class="StyledBox-sc-13pk1d4-0 fmtZOQ"><img aria-label="@nikmd23" width="96" alt="Man with glasses next to an orange person-like character" src="/img/avatars/puppet_200x200.jpeg" class="StyledImage-sc-ey4zx9-0 jSTuPN"/></div><div class="StyledBox-sc-13pk1d4-0 hIYCWf"><h3 class="StyledHeading-sc-1rdh4aw-0 hoPvpH">@nikmd23</h3><p class="StyledParagraph-sc-tbetod-0 dnOlIA"><span>Does Material Design feel too "Googly" for you? Check out @grommetux, the OSS UX framework http://bit.ly/1YWH7ea</span></p></div></div><div class="StyledBox-sc-13pk1d4-0 gZoMmK"><div class="StyledBox-sc-13pk1d4-0 fmtZOQ"><img aria-label="@tomsthoughtfeed" width="96" alt="Man with hands in peace signs and cup in mouth at finish line of race" src="/img/avatars/1nCCU4b3_200x200.jpg" class="StyledImage-sc-ey4zx9-0 jSTuPN"/></div><div class="StyledBox-sc-13pk1d4-0 hIYCWf"><h3 class="StyledHeading-sc-1rdh4aw-0 hoPvpH">@tomsthoughtfeed</h3><p class="StyledParagraph-sc-tbetod-0 dnOlIA"><span>After two hours of playing with @grommetux, I can confidently say it is the best design tool I have ever used</span></p></div></div><div class="StyledBox-sc-13pk1d4-0 gZoMmK"><div class="StyledBox-sc-13pk1d4-0 fmtZOQ"><img aria-label="@linghucong" width="96" alt="Sketch of black rabbit head with big blue eyes" src="/img/avatars/06IweXPF_200x200.jpg" class="StyledImage-sc-ey4zx9-0 jSTuPN"/></div><div class="StyledBox-sc-13pk1d4-0 hIYCWf"><h3 class="StyledHeading-sc-1rdh4aw-0 hoPvpH">@linghucong</h3><p class="StyledParagraph-sc-tbetod-0 dnOlIA"><span>Grommet https://grommet.github.io/ great react - redux boilerplate with great user experience</span></p></div></div><div class="StyledBox-sc-13pk1d4-0 gZoMmK"><div class="StyledBox-sc-13pk1d4-0 fmtZOQ"><img aria-label="@ravishtiwari" width="96" alt="Ravish Tiwari" src="/img/avatars/VQlHfV6m_200x200.jpg" class="StyledImage-sc-ey4zx9-0 jSTuPN"/></div><div class="StyledBox-sc-13pk1d4-0 hIYCWf"><h3 class="StyledHeading-sc-1rdh4aw-0 hoPvpH">@ravishtiwari</h3><p class="StyledParagraph-sc-tbetod-0 dnOlIA"><span>looking for Accessible @reactjs UI components, check out https://grommet.github.io @grommetux</span></p></div></div></div><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h2 class="StyledHeading-sc-1rdh4aw-0 dXfail">grommet is used by folks at these fine companies</h2><p class="StyledParagraph-sc-tbetod-0 itPSel">if people from these fine establishments are using it, how can it be bad?</p></div><div class="StyledBox-sc-13pk1d4-0 sCDoo"><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="HPE logo" src="img/logos/HPE-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Netflix logo" src="img/logos/Netflix-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="GE logo" src="img/logos/GE-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Uber logo" src="img/logos/Uber-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Boeing logo" src="img/logos/Boeing-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="GitHub logo" src="img/logos/GitHub-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="HP logo" src="img/logos/HP-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Samsung logo" src="img/logos/Samsung-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Twilio logo" src="img/logos/Twilio-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="DXC logo" src="img/logos/DXC-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="MicroFocus logo" src="img/logos/MicroFocus-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Sony logo" src="img/logos/Sony-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="IBM logo" src="img/logos/IBM-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox-sc-13pk1d4-0 eKUmaS"><img alt="Aruba logo" src="img/logos/Aruba-logo.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div></div></div></div><div class="StyledBox-sc-13pk1d4-0 ciLqAS"><div class="StyledBox-sc-13pk1d4-0 bJgkal"><div class="StyledBox-sc-13pk1d4-0 jByPUu"><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h1 class="StyledHeading-sc-1rdh4aw-0 fveWIZ">but wait there's more</h1><p class="StyledParagraph-sc-tbetod-0 itPSel">we've been hard at work on making grommet even easier to learn and use</p></div><div class="StyledBox-sc-13pk1d4-0 kxPtyc"><div class="StyledBox-sc-13pk1d4-0 cDwcko"><a target="_blank" href="https://designer.grommet.io/" class="StyledAnchor-sc-1rp7lwl-0 dtokLh"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><span class="StyledText-sc-1sadyjn-0 dQnLHE">Grommet Designer</span><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><svg aria-label="Next" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 bQfqTo"><path fill="none" stroke="#000" stroke-width="2" d="m7 2 10 10L7 22"></path></svg></span></a><p class="StyledParagraph-sc-tbetod-0 kbZjfW">build experiences with grommet components; then publish and share your ideas with a simple wysiwg interface</p><div class="StyledBox-sc-13pk1d4-0 fvFhXE"></div><img aria-label="Grommet Designer" width="365" alt="Example of Grommet Designer project containing a dashboard card and avatar" src="/img/tools/designer.png" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 dsHAXK"></div><div class="StyledBox-sc-13pk1d4-0 cDwcko"><a target="_blank" href="https://theme-designer.grommet.io/" class="StyledAnchor-sc-1rp7lwl-0 dtokLh"><span class="StyledBox-sc-13pk1d4-0 hWWfue"><span class="StyledText-sc-1sadyjn-0 dQnLHE">Grommet Themer</span><span class="StyledBox__StyledBoxGap-sc-13pk1d4-1 GTiEI"></span><svg aria-label="Next" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 bQfqTo"><path fill="none" stroke="#000" stroke-width="2" d="m7 2 10 10L7 22"></path></svg></span></a><p class="StyledParagraph-sc-tbetod-0 kbZjfW">want grommet to look like your brand? plug your details in and share it or import it into to grommet designer</p><div class="StyledBox-sc-13pk1d4-0 fvFhXE"></div><img aria-label="Grommet Themer" width="365" alt="Example of Grommet Themer project with demo of grommet theme" src="/img/tools/themer.png" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div></div></div></div></div><div class="StyledBox-sc-13pk1d4-0 dtWJsN"><div class="StyledBox-sc-13pk1d4-0 jByPUu"><div class="StyledBox-sc-13pk1d4-0 dofnQG"><h2 class="StyledHeading-sc-1rdh4aw-0 dXfail">try grommet</h2><p class="StyledParagraph-sc-tbetod-0 itPSel">we want to make grommet the best ui framework on react. so, come for the code and stay for the peeps.</p></div><div class="StyledBox-sc-13pk1d4-0 hPevmE"><a href="/components" class="StyledButton-sc-323bzc-0 gIWFNw"><div class="StyledBox-sc-13pk1d4-0 fmUJBl"><span class="StyledText-sc-1sadyjn-0 dQnLHE">components</span></div></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 bzKDdG"></div><a href="/docs" class="StyledButton-sc-323bzc-0 gIWFNw"><div class="StyledBox-sc-13pk1d4-0 SKzcm"><span class="StyledText-sc-1sadyjn-0 dQnLHE">docs</span></div></a></div><div class="StyledBox-sc-13pk1d4-0 cAxsai"><div class="StyledBox-sc-13pk1d4-0 fkTvCA"><div class="StyledBox-sc-13pk1d4-0 blutuO"><a target="_blank" aria-label="Follow us on Twitter" href="https://twitter.com/grommet_io" class="StyledAnchor-sc-1rp7lwl-0 bAbdKv"><svg aria-label="Twitter" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 giXgmI"><path fill="#1DA1F2" fill-rule="evenodd" d="M24 4.309a9.83 9.83 0 0 1-2.828.775 4.94 4.94 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.196 4.925 4.925 0 0 0-8.39 4.49A13.974 13.974 0 0 1 1.671 2.9a4.902 4.902 0 0 0-.667 2.476c0 1.708.869 3.216 2.191 4.099A4.936 4.936 0 0 1 .964 8.86v.06a4.926 4.926 0 0 0 3.95 4.829 4.964 4.964 0 0 1-2.224.085 4.93 4.93 0 0 0 4.6 3.42 9.886 9.886 0 0 1-6.115 2.107c-.398 0-.79-.023-1.175-.068a13.945 13.945 0 0 0 7.548 2.212c9.057 0 14.009-7.503 14.009-14.01 0-.213-.005-.425-.014-.636A10.012 10.012 0 0 0 24 4.309"></path></svg></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 fJiyCS"></div><a target="_blank" aria-label="Share feedback on Github" href="https://github.com/grommet/grommet" class="StyledAnchor-sc-1rp7lwl-0 bAbdKv"><svg aria-label="Github" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 giXgmI"><path fill="#333" fill-rule="evenodd" d="M11.999 1C5.926 1 1 5.925 1 12c0 4.86 3.152 8.983 7.523 10.437.55.102.75-.238.75-.53 0-.26-.009-.952-.014-1.87-3.06.664-3.706-1.475-3.706-1.475-.5-1.27-1.221-1.61-1.221-1.61-.999-.681.075-.668.075-.668 1.105.078 1.685 1.134 1.685 1.134.981 1.68 2.575 1.195 3.202.914.1-.71.384-1.195.698-1.47-2.442-.278-5.01-1.222-5.01-5.437 0-1.2.428-2.183 1.132-2.952-.114-.278-.491-1.397.108-2.91 0 0 .923-.297 3.025 1.127A10.536 10.536 0 0 1 12 6.32a10.49 10.49 0 0 1 2.754.37c2.1-1.424 3.022-1.128 3.022-1.128.6 1.514.223 2.633.11 2.911.705.769 1.13 1.751 1.13 2.952 0 4.226-2.572 5.156-5.022 5.428.395.34.747 1.01.747 2.037 0 1.47-.014 2.657-.014 3.017 0 .295.199.637.756.53C19.851 20.979 23 16.859 23 12c0-6.075-4.926-11-11.001-11"></path></svg></a><div class="StyledBox__StyledBoxGap-sc-13pk1d4-1 fJiyCS"></div><a target="_blank" aria-label="Chat with us on Slack" href="https://slack-invite.grommet.io" class="StyledAnchor-sc-1rp7lwl-0 bAbdKv"><svg aria-label="Slack" viewBox="0 0 24 24" class="StyledIcon-sc-ofa7kd-0 giXgmI"><g fill="none" fill-rule="evenodd"><path fill="#E01E5A" d="M5.048 15.124a2.512 2.512 0 0 1-2.515 2.514A2.512 2.512 0 0 1 .02 15.124a2.512 2.512 0 0 1 2.514-2.514h2.515v2.514zm1.257 0a2.512 2.512 0 0 1 2.514-2.514 2.512 2.512 0 0 1 2.514 2.514v6.286a2.512 2.512 0 0 1-2.514 2.514 2.512 2.512 0 0 1-2.514-2.514v-6.286z"></path><path fill="#36C5F0" d="M8.819 5.029a2.512 2.512 0 0 1-2.514-2.515A2.512 2.512 0 0 1 8.819 0a2.512 2.512 0 0 1 2.514 2.514V5.03H8.82zm0 1.276a2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.514H2.514A2.512 2.512 0 0 1 0 8.82a2.512 2.512 0 0 1 2.514-2.514H8.82z"></path><path fill="#2EB67D" d="M18.895 8.819a2.512 2.512 0 0 1 2.515-2.514 2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.514h-2.515V8.82zm-1.257 0a2.512 2.512 0 0 1-2.514 2.514 2.512 2.512 0 0 1-2.515-2.514V2.514A2.512 2.512 0 0 1 15.124 0a2.512 2.512 0 0 1 2.514 2.514V8.82z"></path><path fill="#ECB22E" d="M15.124 18.895a2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.515 2.512 2.512 0 0 1-2.514-2.515v-2.514h2.514zm0-1.257a2.512 2.512 0 0 1-2.514-2.514 2.512 2.512 0 0 1 2.514-2.514h6.305a2.512 2.512 0 0 1 2.514 2.514 2.512 2.512 0 0 1-2.514 2.514h-6.305z"></path></g></svg></a></div><p class="StyledParagraph-sc-tbetod-0 iUfUIc">Grommet is a聽<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA">PWA</a>. Save it for offline reading.</p><p class="StyledParagraph-sc-tbetod-0 iUfUIc">maintained by the core team with the help of our contributors. you can always kick it old school with聽<a target="_blank" href="https://v1.grommet.io" class="StyledAnchor-sc-1rp7lwl-0 eoHTDA">Grommet v1</a>.</p></div><img aria-label="gremlin" alt="Grommet gremlin with one arm above head and other hand holding a wrench" src="/img/stak-hurrah.svg" class="StyledImage-sc-ey4zx9-0 jGDUNj"/></div></div></div></div></div></div> <noscript> <p id="noscript"> This Grommet documentation site requires javascript to show off what can be done with Grommet. You must enable javascript to proceed. </p> </noscript> <script src="/main-4cc6644d5431cbcbe0b5.js" async></script><script src="/grommet-f9405e83079cad966128.js" async></script><script src="/vendors~main-b2905fbbc6f3e247b11a.js" async></script> </body> </html>