forked from grommet/grommet.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
20 lines (20 loc) · 65.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>Grommet</title>
<meta name="description" content="website for grommet ux framework">
<meta name="keywords" content="grommet,ux,user experience,react">
<meta name="fragment" content="!">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<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 href="/assets/css/index-vanilla.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content" tabindex="-1" style="outline: none;"><div lang="en-US" class="grommet grommetux-app docs" data-reactroot=""><article class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-article home" style="transform:translateY(-0px)"><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-box--pad-between-small grommetux-background-color-index-brand grommetux-background-color-index--pending grommetux-section home-mobile"><svg class="grommetux-logo-icon" viewBox="0 0 182 182" width="182" height="182" version="1.1" role="img" aria-label="Grommet Logo"><path role="presentation" stroke-width="18" stroke="#fff" fill="none" d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"></path></svg><nav class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--column grommetux-menu--primary grommetux-menu--inline"><a href="/docs/start" class="grommetux-anchor grommetux-anchor--align-center">Start</a><a href="/docs/learn" class="grommetux-anchor grommetux-anchor--align-center">Learn</a><a href="/docs/showcase" class="grommetux-anchor grommetux-anchor--align-center">Showcase</a><a href="/docs/templates" class="grommetux-anchor grommetux-anchor--align-center">Templates</a><a href="/docs/components" class="grommetux-anchor grommetux-anchor--align-center">Components</a></nav></section><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--flex-off"><div class="grommetux-box__container grommetux-header__container"><header class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-vertical-medium grommetux-box--pad-between-medium grommetux-header home-desktop"><svg class="grommetux-logo-icon" viewBox="0 0 182 182" width="182" height="182" version="1.1" role="img" aria-label="Grommet Logo"><path role="presentation" stroke-width="18" stroke="#865CD6" fill="none" d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"></path></svg><nav class="grommetux-box grommetux-box--direction-row grommetux-box--pad-none grommetux-menu grommetux-menu--row grommetux-menu--inline"><a href="/docs/start" class="grommetux-anchor grommetux-anchor--align-center">Start</a><a href="/docs/learn" class="grommetux-anchor grommetux-anchor--align-center">Learn</a><a href="/docs/showcase" class="grommetux-anchor grommetux-anchor--align-center">Showcase</a><a href="/docs/templates" class="grommetux-anchor grommetux-anchor--align-center">Templates</a><a href="/docs/components" class="grommetux-anchor grommetux-anchor--align-center">Components</a></nav></header></div></div><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-stretch grommetux-box--responsive grommetux-box--basis-large grommetux-box--pad-vertical-medium grommetux-section"><button type="button" class="grommetux-button grommetux-button--plain home-mobile"><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-between-small"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-down grommetux-control-icon--responsive" aria-label="down"><polyline fill="none" stroke="#000" stroke-width="2" points="7.086 3.174 17.086 13.174 7.086 23.174" transform="scale(1 -1) rotate(-89 -1.32 0)"></polyline></svg>MENU</div></button><div class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--flex-grow grommetux-box--pad-vertical-large"><a tabindex="-1" aria-hidden="true" id="skip-link-main_content" class="grommetux-skip-link-anchor">Main Content</a><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-large home-desktop"><svg class="logo grommet-hero" version="1.1" width="848" height="172" viewBox="0 0 848 172"><g fill="none"><path class="logo" stroke="#865CD6" stroke-width="11" d="M185,79 C185,52.490332 206.490332,31 233,31 C259.509668,31 281,52.490332 281,79 C281,105.509668 259.509668,127 233,127 C206.490332,127 185,105.509668 185,79 Z"></path><path class="text" fill="#333333" d="M63.126,117.416 L37.842,117.416 C23.534,117.416 17.066,112.32 17.066,104.676 C17.066,97.62 22.946,92.328 33.726,91.152 C37.842,91.936 42.35,92.524 47.054,92.524 C71.162,92.524 87.038,79.784 87.038,60.38 C87.038,50.58 82.922,42.348 75.866,36.664 C77.042,26.864 84.49,21.768 96.642,21.768 L94.094,11.968 C80.766,11.968 70.77,19.612 68.81,32.352 C62.734,29.608 55.482,28.04 47.054,28.04 C22.946,28.04 7.07,40.78 7.07,60.38 C7.07,72.336 12.95,81.548 23.142,87.036 C13.342,89.78 6.482,96.64 6.482,106.244 C6.482,113.888 11.774,119.768 18.83,123.296 C8.246,126.628 1.778,134.076 1.778,144.072 C1.778,159.164 16.674,170.14 47.446,170.14 C74.886,170.14 94.682,158.38 94.682,139.956 C94.682,126.432 82.922,117.416 63.126,117.416 Z M47.054,37.448 C64.89,37.448 75.67,46.268 75.67,60.38 C75.67,74.492 64.89,83.116 47.054,83.116 C29.414,83.116 18.438,74.492 18.438,60.38 C18.438,46.268 29.414,37.448 47.054,37.448 Z M48.818,160.732 C24.71,160.732 11.97,153.676 11.97,142.308 C11.97,133.292 20.986,127.02 35.49,127.02 L60.774,127.02 C77.238,127.02 84.49,132.704 84.49,141.328 C84.49,152.108 71.162,160.732 48.818,160.732 Z M154.618,28.04 C139.134,28.04 128.158,35.684 123.062,49.012 L121.69,30 L112.282,30 L112.282,128 L123.454,128 L123.454,73.512 C123.454,52.148 137.37,38.428 151.482,38.428 C157.362,38.428 161.086,39.8 163.83,41.564 L166.574,30.98 C163.634,29.02 159.322,28.04 154.618,28.04 Z M427.214,27.844 C412.318,27.844 396.442,35.684 390.758,49.992 C385.466,35.292 371.746,28.04 356.066,28.04 C341.562,28.04 328.038,35.096 321.374,48.424 L320.786,30 L310.79,30 L310.79,128 L321.962,128 L321.962,73.316 C321.962,50.384 338.426,37.84 355.086,37.84 C370.766,37.84 381.938,46.856 381.938,65.868 L381.938,128 L393.11,128 L393.11,72.336 C393.11,51.56 408.202,37.644 426.234,37.644 C441.914,37.644 453.282,46.66 453.282,65.672 L453.282,127.804 L464.454,127.804 L464.454,64.496 C464.454,39.8 447.402,27.844 427.214,27.844 Z M612.982,27.844 C598.086,27.844 582.21,35.684 576.526,49.992 C571.234,35.292 557.514,28.04 541.834,28.04 C527.33,28.04 513.806,35.096 507.142,48.424 L506.554,30 L496.558,30 L496.558,128 L507.73,128 L507.73,73.316 C507.73,50.384 524.194,37.84 540.854,37.84 C556.534,37.84 567.706,46.856 567.706,65.868 L567.706,128 L578.878,128 L578.878,72.336 C578.878,51.56 593.97,37.644 612.002,37.644 C627.682,37.644 639.05,46.66 639.05,65.672 L639.05,127.804 L650.222,127.804 L650.222,64.496 C650.222,39.8 633.17,27.844 612.982,27.844 Z M764.45,76.06 C764.45,48.228 748.966,28.04 721.526,28.04 C692.714,28.04 676.054,47.248 676.054,79 C676.054,110.752 693.498,129.96 722.506,129.96 C742.498,129.96 755.63,121.728 762.882,107.812 L753.67,102.912 C748.966,113.888 737.598,120.16 722.506,120.16 C701.73,120.16 688.598,106.636 687.226,83.508 L764.058,83.508 C764.254,81.548 764.45,79 764.45,76.06 Z M721.526,37.84 C740.93,37.84 752.298,51.364 753.866,73.512 L687.226,73.512 C688.794,50.972 701.142,37.84 721.526,37.84 Z M842.222,112.32 C837.714,117.024 832.422,119.572 825.366,119.572 C814.782,119.572 808.706,113.496 808.706,101.736 L808.706,39.604 L845.554,39.604 L845.554,30 L808.706,30 L808.706,2.756 L797.534,5.696 L797.534,30 L777.934,30 L777.934,39.604 L797.534,39.604 L797.534,103.5 C797.534,121.924 808.314,129.96 823.406,129.96 C833.206,129.96 841.046,126.628 846.338,121.728 L842.222,112.32 Z"></path></g></svg></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-between-medium home-mobile"><svg class="grommetux-logo-icon grommetux-logo-icon--large" viewBox="0 0 182 182" width="182" height="182" version="1.1" role="img" aria-label="Grommet Logo"><path role="presentation" stroke-width="18" stroke="#865CD6" fill="none" d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"></path></svg><h1 class="grommetux-heading">grommet</h1></div><p class="grommetux-paragraph grommetux-paragraph--large grommetux-paragraph--align-center grommetux-paragraph--margin-none">focus on the essential experience</p></div><div class="grommetux-box__container grommetux-footer__container"><footer class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-none grommetux-footer"><a href="https://github.com/grommet/grommet" class="grommetux-anchor grommetux-anchor--animate-icon grommetux-anchor--icon"><span class="grommetux-anchor__icon"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-social-github grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="Grommet Github"><path fill="#333" fill-rule="evenodd" d="M11.9989871,1 C5.92550416,1 1,5.92482888 1,12.0003376 C1,16.8603395 4.15153934,20.9829338 8.52263728,22.4374904 C9.0729918,22.5387827 9.27355045,22.199116 9.27355045,21.9073943 C9.27355045,21.6467356 9.2640965,20.954572 9.25869425,20.0368642 C6.19899322,20.7013414 5.55342398,18.5620492 5.55342398,18.5620492 C5.0530403,17.2911692 4.33183953,16.9528531 4.33183953,16.9528531 C3.33309801,16.2708186 4.40747107,16.2843243 4.40747107,16.2843243 C5.51155652,16.3619816 6.09229872,17.4181221 6.09229872,17.4181221 C7.07348292,19.0988981 8.66714755,18.6133706 9.2938089,18.3317781 C9.39375058,17.6213819 9.67804414,17.1365297 9.99205009,16.86169 C7.54955646,16.5841493 4.98146045,15.6401056 4.98146045,11.4249977 C4.98146045,10.224347 5.41026428,9.24181221 6.11390773,8.47334172 C6.00046042,8.19512569 5.62297799,7.07618404 6.22195279,5.56220265 C6.22195279,5.56220265 7.14506277,5.26642929 9.24653918,6.68992296 C10.12373,6.44547101 11.0650726,6.32392032 12.0003376,6.31919335 C12.9349274,6.32392032 13.8755947,6.44547101 14.7541361,6.68992296 C16.8542619,5.26642929 17.7760214,5.56220265 17.7760214,5.56220265 C18.3763467,7.07618404 17.9988643,8.19512569 17.8860923,8.47334172 C18.5910863,9.24181221 19.0165137,10.224347 19.0165137,11.4249977 C19.0165137,15.6509101 16.444366,16.5807729 13.9944443,16.8529114 C14.3888087,17.192578 14.7406305,17.863808 14.7406305,18.890236 C14.7406305,20.3603241 14.7271248,21.5467939 14.7271248,21.9073943 C14.7271248,22.2018171 14.9256576,22.5441849 15.4834403,22.4368151 C19.8511618,20.9788821 23,16.8589889 23,12.0003376 C23,5.92482888 18.0744958,1 11.9989871,1" stroke="none"></path></svg></span></a><a href="http://slackin.grommet.io" class="grommetux-anchor grommetux-anchor--animate-icon grommetux-anchor--icon"><span class="grommetux-anchor__icon"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-social-slack grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="Grommet Slack"><path fill="#6ECADC" fill-rule="evenodd" d="M10.9829147,13.9325266 L10.0460003,11.1353533 L12.9732746,10.1548615 L13.910189,12.9520348 L10.9829147,13.9325266 Z M22.0848234,8.9814134 C19.8208835,1.4349469 16.5278799,-0.348763364 8.9814134,1.91517659 C1.4349469,4.17911654 -0.348763364,7.4721201 1.91517659,15.0185866 C4.17911654,22.5650531 7.4721201,24.3487634 15.0185866,22.0848234 C22.5650531,19.8208835 24.3487634,16.5278799 22.0848234,8.9814134 L22.0848234,8.9814134 Z M18.2429859,13.8523145 L16.8022969,14.3325442 L17.2825265,15.7732332 C17.4883393,16.3906714 17.1453181,17.0081096 16.5964841,17.2139223 C16.4592757,17.2825265 16.3220672,17.2825265 16.1848587,17.2825265 C15.704629,17.2825265 15.2930036,16.9395053 15.1557951,16.5278799 L14.6755654,15.0871908 L11.725583,16.0476502 L12.2058127,17.4883393 C12.4116254,18.1057774 12.0686042,18.7232156 11.5197703,18.9290283 C11.3825618,18.9976326 11.2453534,18.9976326 11.1081449,18.9976326 C10.6279152,18.9976326 10.2162897,18.6546114 10.0790813,18.2429859 L9.59885157,16.8022969 L8.15816251,17.2825265 C8.02095403,17.3511308 7.88374555,17.3511308 7.74653706,17.3511308 C7.26630738,17.3511308 6.85468193,17.0081096 6.71747345,16.5964841 C6.51166073,15.979046 6.85468193,15.3616078 7.40351586,15.1557951 L8.84420492,14.6755654 L7.88374555,11.7941873 L6.51166073,12.274417 C6.37445225,12.3430212 6.23724376,12.3430212 6.10003528,12.3430212 C5.6198056,12.3430212 5.20818015,12 5.07097167,11.5883746 C4.86515895,10.9709364 5.20818015,10.3534982 5.75701408,10.1476855 L7.19770314,9.66745581 L6.71747345,8.22676675 C6.51166073,7.60932858 6.78607769,6.92328617 7.40351586,6.71747345 C8.02095403,6.51166073 8.6383922,6.85468193 8.84420492,7.40351586 L9.3244346,8.84420492 L12.274417,7.88374555 L11.7941873,6.44305649 C11.5883746,5.82561832 11.9313958,5.20818015 12.4802297,5.00236743 C13.0976679,4.7965547 13.715106,5.13957591 13.9209187,5.68840984 L14.4011484,7.19770314 L15.8418375,6.71747345 C16.4592757,6.51166073 17.0767138,6.85468193 17.2825265,7.40351586 C17.4883393,8.02095403 17.1453181,8.6383922 16.5964841,8.84420492 L15.1557951,9.3244346 L16.1162545,12.1372085 L17.5569435,11.6569788 C18.1743817,11.4511661 18.7918198,11.7941873 18.9976326,12.3430212 C19.1348411,13.0290636 18.8604241,13.6465018 18.2429859,13.8523145 L18.2429859,13.8523145 Z" stroke="none"></path></svg></span></a></footer></div></section><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-background-color-index-light-1 grommetux-background-color-index--pending grommetux-section"><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-medium"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--margin-bottom-medium"><label class="grommetux-label grommetux-label--margin-none grommetux-label--medium grommetux-label--align-center">This is grommet v1<br/>You might want ...</label></div><a href="//v2.grommet.io" class="grommetux-button grommetux-button--plain"><div style="border-radius:12px" class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-medium grommetux-background-color-index-brand grommetux-background-color-index--pending"><label class="grommetux-label grommetux-label--margin-none grommetux-label--large">grommet v2</label></div></a></div></section><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-background-color-index-light-2 grommetux-background-color-index--pending grommetux-section"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-large"><svg class="logo" version="1.1" width="603" height="118" viewBox="0 0 603 118"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-416.000000, -1001.000000)"><g transform="translate(416.000000, 996.000000)"><rect x="240" y="0" width="128" height="128"></rect><rect id="Rectangle-4-Copy" x="0" y="0" width="128" height="128"></rect><path d="M63.9996294,52.4033701 C57.6874732,52.4033701 52.5688076,57.5220358 52.5688076,63.8341919 C52.5688076,70.1463481 57.6874732,75.2613072 63.9996294,75.2613072 C70.3117855,75.2613072 75.4304511,70.1463481 75.4304511,63.8341919 C75.4304511,57.5220358 70.3117855,52.4033701 63.9996294,52.4033701 M102.058261,79.4029416 C101.365147,79.6327441 100.620142,79.8366012 99.8973765,80.0515777 C98.2813459,74.932912 96.0722766,69.4843686 93.4036022,63.8653265 C95.9573753,58.3611856 98.0700759,52.979359 99.645335,47.8866388 C100.953727,48.264701 102.236173,48.6612957 103.459315,49.0801293 C115.305264,53.1572706 122.529218,59.1877334 122.529218,63.831968 C122.529218,68.7801351 114.727052,75.203486 102.058261,79.4029416 M96.8024556,89.8181845 C98.0811953,96.2897198 98.26652,102.138564 97.4177332,106.712376 C96.6541959,110.822876 95.1197081,113.561973 93.2256906,114.659095 C89.1930272,116.994185 80.5643134,113.958568 71.2610181,105.952545 C70.1935484,105.037041 69.1186657,104.054821 68.0437829,103.017003 C71.6464933,99.0732954 75.2417907,94.4661257 78.7592518,89.377112 C84.9453872,88.8285511 90.7831123,87.9352865 96.0871026,86.7121441 C96.346557,87.7647879 96.602305,88.8100187 96.8024556,89.8181845 M57.9658308,105.285376 C52.9991313,109.629385 48.0250188,112.705774 43.6365321,114.255087 C39.696531,115.648728 36.5571321,115.6895 34.6594081,114.596085 C30.6230382,112.264701 28.9439972,103.276458 31.2346094,91.2192386 C31.4940638,89.836717 31.8091157,88.4171305 32.1686454,86.9641856 C37.4096253,88.1243176 43.2325245,88.9397459 49.4297793,89.4438288 C52.9694794,94.4253543 56.6685585,99.0102851 60.4009961,103.02071 C59.5855678,103.806486 58.7738461,104.581143 57.9658308,105.285376 M25.1744947,79.3732896 C18.9327619,77.2383502 13.7770313,74.465894 10.2447443,71.4413964 C7.07198703,68.7208312 5.46707593,66.0225049 5.46707593,63.831968 C5.46707593,59.1729074 12.4167487,53.227694 24.0069497,49.1876175 C25.4117102,48.6946541 26.8906006,48.2387555 28.4213818,47.8013895 C30.0225864,53.0127174 32.1389935,58.4612609 34.6742341,63.9691082 C32.1093415,69.5547919 29.9669891,75.0811717 28.3509585,80.3480971 C27.2612498,80.0367517 26.1863671,79.7179934 25.1744947,79.3732896 M31.3643366,37.2415933 C28.9588232,24.9508654 30.5563213,15.677222 34.5741588,13.3495449 C38.8588637,10.8699017 48.3252447,14.4058952 58.3068281,23.2644114 C58.9406382,23.8277982 59.5781549,24.4504889 60.2156715,25.0620601 C56.5017664,29.0502457 52.8397521,33.6055245 49.337117,38.5536916 C43.3140673,39.1133719 37.550472,39.9992235 32.2538947,41.200127 C31.9203104,39.8583768 31.6163781,38.5351591 31.3643366,37.2415933 M86.5762437,50.877778 C85.3086234,48.6909476 84.0002317,46.5745406 82.677014,44.498905 C86.7541553,45.0141074 90.675624,45.6849825 94.3450513,46.5226497 C93.2442231,50.0549367 91.8542885,53.7503094 90.2382579,57.5346379 C89.0744194,55.329275 87.8698095,53.1127927 86.5762437,50.877778 M64.0630104,28.9575834 C66.583425,31.6892681 69.1001332,34.7545371 71.5834829,38.0607281 C69.0778942,37.9421203 66.5537731,37.8605775 64,37.8605775 C61.4684659,37.8605775 58.9665837,37.9384139 56.4795274,38.0570216 C58.9628772,34.7804825 61.5018243,31.71892 64.0630104,28.9575834 M37.8136329,57.5309314 C36.2235478,53.7614289 34.8447327,50.0512302 33.7364916,46.4744653 C37.3873863,45.6553305 41.2792031,44.9955749 45.3341055,44.4877855 C43.9923554,46.58566 42.6691377,48.716893 41.4015173,50.9148429 C40.1376035,53.1053797 38.9552325,55.3181556 37.8136329,57.5309314 M45.4527133,83.5690387 C41.2680836,83.1020207 37.3058435,82.4830365 33.6586552,81.6898472 C34.7891353,78.0426589 36.1938959,74.2509175 37.8173394,70.3961656 C38.9626455,72.6089415 40.148723,74.8180108 41.4237563,77.0159606 C42.7173221,79.2583884 44.0738982,81.4303928 45.4527133,83.5690387 M64.218683,99.0918279 C61.627845,96.2971328 59.051833,93.1947989 56.5277118,89.8737819 C58.9777031,89.9664442 61.4610529,90.0331611 64,90.0331611 C66.6093705,90.0331611 69.174263,89.9553247 71.7132102,89.84413 C69.2261539,93.2207443 66.7168587,96.3379042 64.218683,99.0918279 M90.2864423,70.1997216 C91.9951352,74.0878318 93.4591996,77.8647473 94.6007992,81.4452187 C90.8906006,82.2940054 86.8801761,82.9648805 82.6584815,83.47267 C83.9891122,81.3673824 85.3086234,79.217617 86.5984827,76.9788957 C87.9031679,74.7179355 89.1151908,72.4569753 90.2864423,70.1997216 M81.8615857,74.247211 C79.8600799,77.7164876 77.8066833,81.0152657 75.7236347,84.1398385 C71.9207737,84.414119 68.0030115,84.5660851 64,84.5660851 C60.0155209,84.5660851 56.1496496,84.4363579 52.417212,84.1954359 C50.2489141,81.0263851 48.1436266,77.7127811 46.1532403,74.2768629 L46.1532403,74.2768629 C44.170267,70.8520642 42.3577923,67.3976135 40.7046968,63.9616953 C42.3577923,60.5183641 44.1665605,57.0639134 46.1384143,53.6465276 C48.1139746,50.2180224 50.2007297,46.9229508 52.3504952,43.7724325 C56.1570626,43.4870326 60.0562923,43.3276534 64,43.3276534 C67.9622401,43.3276534 71.8614699,43.4907391 75.6680373,43.7798455 C77.7881508,46.9044184 79.8563734,50.1846639 81.8430532,53.6168757 C83.851972,57.0824458 85.6829791,60.5109511 87.3509006,63.8801524 C85.6866856,67.3086577 83.8630914,70.7779343 81.8615857,74.247211 M93.1404413,13.1864593 C97.4288527,15.6586895 99.0930677,25.6254469 96.4021544,38.6982447 C96.2316558,39.5247925 96.0092662,40.3884052 95.8017027,41.2446049 C90.4977124,40.0214624 84.7304106,39.1281978 78.7036544,38.5611045 C75.1861933,33.5536336 71.546418,28.9909418 67.8881103,25.0472341 C68.8740372,24.1020787 69.8562576,23.1865751 70.8347715,22.3377884 C80.2863265,14.1130823 89.1188973,10.8661952 93.1404413,13.1864593 M105.242138,43.9095727 C103.907801,43.4536742 102.517866,43.0200146 101.094573,42.608594 C101.328082,41.667145 101.569004,40.718283 101.758036,39.8027794 C104.875195,24.661759 102.836625,12.4636933 95.872126,8.44956229 C89.1967337,4.59851694 78.2737013,8.61264794 67.2468871,18.2124626 C66.1794174,19.1390857 65.1119476,20.1287191 64.0444779,21.1554174 C63.3402444,20.4845423 62.6397174,19.7988413 61.9391904,19.1761506 C50.3786413,8.91287381 38.7921469,4.58739747 31.8350611,8.61635444 C25.1633752,12.4785193 23.1878149,23.946406 25.997336,38.2942371 C26.2679099,39.6804652 26.5903747,41.1000517 26.9499044,42.5381706 C25.3116349,43.0051886 23.7215498,43.4944456 22.2055945,44.024474 C8.65465918,48.746545 0,56.1521163 0,63.831968 C0,71.7675677 9.29217583,79.7216999 23.4064979,84.5475527 C24.5147391,84.9256149 25.6859906,85.2740251 26.8720681,85.6150224 C26.4828864,87.1754556 26.1455956,88.7062369 25.8601957,90.1999532 C23.1841084,104.299449 25.27457,115.493056 31.9277234,119.332982 C38.7995599,123.295222 50.3341634,119.221787 61.5648347,109.403289 C62.4469798,108.632339 63.3365379,107.790965 64.226096,106.931059 C65.3862281,108.046713 66.5426536,109.10677 67.6953727,110.10011 C78.5739271,119.459002 89.3190479,123.239624 95.9647883,119.392285 C102.829212,115.418926 105.06052,103.391359 102.16575,88.7581278 C101.94336,87.6387671 101.665373,86.4786351 101.376267,85.3147966 C102.180576,85.0775811 103.007123,84.8477785 103.778074,84.5920306 C118.452076,79.7328194 128,71.8713495 128,63.831968 C128,56.1261708 119.067354,48.6687086 105.242138,43.9095727" id="React" fill="#61DAFB"></path><path d="M304,123 C336.5848,123 363,96.5848002 363,64 C363,31.4151998 336.5848,5 304,5 C271.4152,5 245,31.4151998 245,64 C245,96.5848002 271.4152,123 304,123 L304,123 Z M304,111.32967 C277.860545,111.32967 256.67033,90.1394551 256.67033,64 C256.67033,37.8605449 277.860545,16.6703297 304,16.6703297 C330.139455,16.6703297 351.32967,37.8605449 351.32967,64 C351.32967,90.1394551 330.139455,111.32967 304,111.32967 L304,111.32967 Z" id="element" fill="#865CD6"></path><g transform="translate(164.000000, 44.000000)" stroke="#CCCCCC" stroke-width="4"><path d="M20,40 L20,0 M0,20 L40,20"></path></g><g transform="translate(404.000000, 44.000000)" stroke="#CCCCCC" stroke-width="4"><path d="M20,40 L20,0 M0,20 L40,20"></path></g><g transform="translate(480.000000, 0.000000)"><rect x="0" y="0" width="128" height="128"></rect><g transform="translate(9.000000, 16.000000)" stroke-width="6" stroke="#FFB831"><polygon id="Path" points="18.2857143 0 91.0867824 0 109.372497 23.8397864 54.6862483 95.7009346 0 23.8397864"></polygon><path d="M0.897196262,24.2242991 L108.509474,24.2242991"></path><polyline points="41.1001335 0 27.3431242 23.8397864 54.6862483 95.6582109"></polyline><polyline transform="translate(68.357810, 47.829105) scale(-1, 1) translate(-68.357810, -47.829105) " points="68.4432577 0 54.6862483 23.8397864 82.0293725 95.6582109"></polyline></g></g></g></g></g></svg></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large"><h2 class="grommetux-heading grommetux-heading--strong grommetux-heading--align-center">A design system made for React.js</h2><p class="grommetux-paragraph grommetux-paragraph--align-center">Grommet provides all the <a href="/docs/learn" class="grommetux-anchor">guidance</a>, <a href="/docs/components" class="grommetux-anchor">components</a>, and <a href="/docs/resources" class="grommetux-anchor">design resources</a> you need to take your ideas from concept to a real application. We use <a href="https://facebook.github.io/react/" class="grommetux-anchor">React</a> and <a href="https://www.sketchapp.com/" class="grommetux-anchor">Sketch</a> to help you on your journey.</p><a href="/docs/start" class="grommetux-button"><span class="grommetux-button__label">Start</span></a></div></section></div></div><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-section"><h2 class="grommetux-heading grommetux-heading--strong">Start making now</h2><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">The easiest way to learn a new tool is to have it done for you and then make it yours!</p><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-medium grommetux-box--size-large grommetux-box--size"><iframe height="400" scrolling="no" title="Hello World" src="//codepen.io/grommet/embed/preview/gaEGPY/?height=400&theme-id=light&default-tab=result&embed-version=2" frameBorder="no" allowTransparency="true" allowfullscreen="" style="width:100%"></iframe></div><footer class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-medium grommetux-footer"><p class="grommetux-paragraph">Need more details? We’ve got a page for that.</p><a href="/docs/components" class="grommetux-button"><span class="grommetux-button__label">Components</span></a></footer></section></div></div><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-box--separator-top grommetux-section"><h2 class="grommetux-heading grommetux-heading--strong">What makes us great</h2><p class="grommetux-paragraph grommetux-paragraph--align-center">Grommet is designed to make your design and dev process easier by baking in the stuff that is expected.</p><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--responsive grommetux-box--pad-vertical-medium grommetux-box--wrap grommetux-tiles grommetux-tiles--flush"><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--basis-medium grommetux-box--pad-small grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/docs/components" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-between-small grommetux-box--pad-vertical-small"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--flex-off"><header class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--pad-between-medium grommetux-header"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-resources grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-brand" aria-label="resources"><path fill="none" stroke="#000" stroke-width="2" d="M12,3 L21,7.5 L12,12 L3,7.5 L12,3 Z M16.5,10.25 L21,12.5 L12,17 L3,12.5 L7.5,10.25 L7.5,10.25 M16.5,15.25 L21,17.5 L12,22 L3,17.5 L7.5,15.25 L7.5,15.25"></path></svg><h3 class="grommetux-heading grommetux-heading--margin-none">Comprehensive</h3></header></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-horizontal-medium"><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">A curated design and development platform that is more than just a ReactJS widget library. Grommet offers the tools to create amazing experiences.</p></div></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--basis-medium grommetux-box--pad-small grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="http://slackin.grommet.io" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-between-small grommetux-box--pad-vertical-small"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--flex-off"><header class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--pad-between-medium grommetux-header"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-run grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-brand" aria-label="run"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15,11 L18,13 M18,5 C18.5522847,5 19,4.55228475 19,4 C19,3.44771525 18.5522847,3 18,3 C17.4477153,3 17,3.44771525 17,4 C17,4.55228475 17.4477153,5 18,5 Z M9.5,9.5 L9.52493781,6 L14.0249378,6 L15,6 L8,17 L4,17 M15,8 L12,13 L12.5,14 L17,7.5 L15,6 M11,13 L16,16.5 L16,21.5"></path></svg><h3 class="grommetux-heading grommetux-heading--margin-none">Active</h3></header></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-horizontal-medium"><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">Our community is open and engaged. Design resources, development tools, and online training provide a seamless onboarding experience.</p></div></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--basis-medium grommetux-box--pad-small grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/docs/learn" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-between-small grommetux-box--pad-vertical-small"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--flex-off"><header class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--pad-between-medium grommetux-header"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-configure grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-brand" aria-label="configure"><path fill="none" stroke="#000" stroke-width="2" d="M16,15 C20.0089021,14.9354541 23,11.9673591 23,8 C23,4.98813056 22.0029673,5.9851632 21,7 C20.0089021,7.97922849 18,10 18,10 L14,6 C14,6 16.0207715,3.99109792 17,3 C18.0148368,1.99703264 18.0148368,1 16,1 C12.0326409,0.999999999 9.05307486,3.99109792 9,8 C9.04154304,8.97626113 9,11 9,11 C7.11486635,12.8970031 4.65923194,15.3526375 3,17 C0.0682492584,19.9436202 4.05637975,23.9317507 7,21 C8.65052042,19.3376102 11.1126942,16.8754364 13,15 C13,15 15.0237389,14.958457 16,15 Z"></path></svg><h3 class="grommetux-heading grommetux-heading--margin-none">Flexible</h3></header></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-horizontal-medium"><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">Responsive web without the hassle of grid management and modular components loaded on demand. Themes allow your brand to shine.</p></div></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--basis-medium grommetux-box--pad-small grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="https://vimeo.com/187068246" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-between-small grommetux-box--pad-vertical-small"><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-none grommetux-box--flex-off"><header class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--pad-between-medium grommetux-header"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-accessible grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-brand" aria-label="accessible"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4,8 L11,8 L11,14 L7,21 M20,8 L13,8 L13,14 L17,21 M12,5 C12.5522847,5 13,4.55228475 13,4 C13,3.44771525 12.5522847,3 12,3 C11.4477153,3 11,3.44771525 11,4 C11,4.55228475 11.4477153,5 12,5 Z M11,8 L13,8 L13,13 L11,13 L11,8 Z"></path></svg><h3 class="grommetux-heading grommetux-heading--margin-none">Accessible</h3></header></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--responsive grommetux-box--pad-horizontal-medium"><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">All users matter. Grommet provides a robust foundation of accessibility features to meet web standards.</p></div></div></a></div></div></div></div></section></div></div><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-stretch grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-section"><div style="overflow:hidden" class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-medium"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--jiggle grommetux-animate__child--inactive" style="transition-duration:2000ms"><svg version="1.1" width="1003" height="350" viewBox="0 0 1003 350"><defs><linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="22.206%"><stop stop-color="#666666" stop-opacity="0" offset="0%"></stop><stop stop-color="#666666" offset="100%"></stop></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="100%" y2="20.273%"><stop stop-color="#666666" stop-opacity="0" offset="0%"></stop><stop stop-color="#666666" offset="100%"></stop></linearGradient></defs><g fill="none" fill-rule="evenodd" transform="translate(-1 1)"><g transform="rotate(90 293.455 294.422)"><path fill="#D7D7D7" stroke="#666666" stroke-width="4" d="M102.776059,258.247396 C95.0404486,258.247396 88.7694974,251.983842 88.7694974,244.255251 L88.7694974,-73.7604593 C88.7694974,-81.4881075 95.0430416,-87.7526042 102.776059,-87.7526042 L243.289799,-87.7526042 C251.025409,-87.7526042 257.29636,-81.4890503 257.29636,-73.7604593 L257.29636,244.255251 C257.29636,251.982899 251.022816,258.247396 243.289799,258.247396 L102.776059,258.247396 Z" transform="matrix(0 1 1 0 87.786 -87.786)"></path><path fill="#878787" d="M23.4315425,155.078125 C28.4088054,155.078125 32.4436742,151.044024 32.4436742,146.067708 C32.4436742,141.091393 28.4088054,137.057292 23.4315425,137.057292 C18.4542796,137.057292 14.4194107,141.091393 14.4194107,146.067708 C14.4194107,151.044024 18.4542796,155.078125 23.4315425,155.078125 Z" transform="matrix(0 1 1 0 -122.636 122.636)"></path></g><g fill="#FAFAFA" stroke-width="4" transform="rotate(90 282.575 337.625)"><path stroke="url(#a)" d="M39.6533813,619.199447 L39.6533795,237.598144 L16.3951473,236.839725 C11.9023623,236.786303 7.82756814,235.096838 4.95667244,231.910003 C1.69679879,228.992565 0.0123853926,224.947714 1.77635684e-12,220.533723 L1.77635684e-12,168.582043 C0.0247707852,159.527177 7.29499625,152.288374 16.3951473,152.276042 C20.5597518,152.288374 24.6345459,153.965507 27.8336222,156.826554 C30.7653153,160.069779 32.4497287,164.126963 32.4090121,168.582043 L32.4090121,203.848512 M129.774697,203.635417 L129.774697,619.199447"></path><path stroke="#666666" d="M31.542461,18.0208333 C31.5548441,7.94316584 38.8237131,-1.22090996e-15 47.7642981,0 C52.0859936,5.52311773e-16 56.1600275,1.85385642 59.4800693,5.40625 C62.289653,8.55209679 63.9737521,13.0040586 63.9861352,18.0208333 L63.9861352,64.875 C63.961369,74.9526331 56.6925,82.9093307 47.7642981,82.8958333 C43.4426026,82.8957989 39.3561856,81.0690061 36.0485269,77.4895833 C33.2265601,74.3707657 31.542461,69.8917403 31.542461,64.875 L31.542461,18.0208333 L31.542461,18.0208333"></path><path stroke="#666666" d="M.20268248e-13 18.0208333C.0123830817 7.94316584 7.28125207-.22090996e-15 16.2218371 0 20.5435326.52311773e-16 24.6175665 1.85385642 27.9376083 5.40625 30.747192 8.55209679 32.4312911 13.0040586 32.4436742 18.0208333L32.4436742 64.875C32.418908 74.9526331 25.150039 82.9093307 16.2218371 82.8958333 11.9001416 82.8957989 7.81372458 81.0690061 4.50606586 77.4895833 1.68409912 74.3707657.19717708e-13 69.8917403.20268248e-13 64.875L.20268248e-13 18.0208333.20268248e-13 18.0208333M112.651646 0C116.973342.52311773e-16 121.047376 1.85385642 124.367418 5.40625 127.177001 8.55209679 128.8611 13.0040586 128.873484 18.0208333L128.873484 64.875C128.848717 74.9526331 121.579848 82.9093307 112.651646 82.8958333 108.329951 82.8957989 104.243534 81.0690061 100.935875 77.4895833 98.1139085 74.3707657 96.4298094 69.8917403 96.4298094 64.875L96.4298094 18.0208333C96.4421924 7.94316584 103.711061-.22090996e-15 112.651646 0M63.9861352 18.0208333C63.9985183 7.94316584 71.2673872-.22090996e-15 80.2079723 0 84.5296678.52311773e-16 88.6037017 1.85385642 91.9237435 5.40625 94.7333272 8.55209679 96.4174263 13.0040586 96.4298094 18.0208333L96.4298094 64.875C96.4050432 74.9526331 89.1361742 82.9093307 80.2079723 82.8958333 75.8862767 82.8957989 71.7998598 81.0690061 68.492201 77.4895833 65.6702343 74.3707657 63.9861352 69.8917403 63.9861352 64.875L63.9861352 18.0208333 63.9861352 18.0208333"></path></g><g fill="#FAFAFA" stroke-width="4" transform="matrix(0 1 1 0 385 185)"><path stroke="url(#b)" d="M39.6533813,619.199447 L39.6533795,237.598144 L16.3951473,236.839725 C11.9023623,236.786303 7.82756814,235.096838 4.95667244,231.910003 C1.69679879,228.992565 0.0123853926,224.947714 1.87583282e-12,220.533723 L1.87583282e-12,168.582043 C0.0247707852,159.527177 7.29499625,152.288374 16.3951473,152.276042 C20.5597518,152.288374 24.6345459,153.965507 27.8336222,156.826554 C30.7653153,160.069779 32.4497287,164.126963 32.4090121,168.582043 L32.4090121,203.848512 M129.774697,203.635417 L129.774697,619.199447"></path><path stroke="#666666" d="M31.542461,18.0208333 C31.5548441,7.94316584 38.8237131,-9.10715612e-13 47.7642981,-9.09494702e-13 C52.0859936,-9.0894239e-13 56.1600275,1.85385642 59.4800693,5.40625 C62.289653,8.55209679 63.9737521,13.0040586 63.9861352,18.0208333 L63.9861352,64.875 C63.961369,74.9526331 56.6925,82.9093307 47.7642981,82.8958333 C43.4426026,82.8957989 39.3561856,81.0690061 36.0485269,77.4895833 C33.2265601,74.3707657 31.542461,69.8917403 31.542461,64.875 L31.542461,18.0208333 L31.542461,18.0208333"></path><path stroke="#666666" d="M.06057393e-13 18.0208333C.0123830817 7.94316584 7.28125207-.10715612e-13 16.2218371-.09494702e-13 20.5435326-.0894239e-13 24.6175665 1.85385642 27.9376083 5.40625 30.747192 8.55209679 32.4312911 13.0040586 32.4436742 18.0208333L32.4436742 64.875C32.418908 74.9526331 25.150039 82.9093307 16.2218371 82.8958333 11.9001416 82.8957989 7.81372458 81.0690061 4.50606586 77.4895833 1.68409912 74.3707657.05506853e-13 69.8917403.06057393e-13 64.875L.06057393e-13 18.0208333.06057393e-13 18.0208333M112.651646-.09494702e-13C116.973342-.0894239e-13 121.047376 1.85385642 124.367418 5.40625 127.177001 8.55209679 128.8611 13.0040586 128.873484 18.0208333L128.873484 64.875C128.848717 74.9526331 121.579848 82.9093307 112.651646 82.8958333 108.329951 82.8957989 104.243534 81.0690061 100.935875 77.4895833 98.1139085 74.3707657 96.4298094 69.8917403 96.4298094 64.875L96.4298094 18.0208333C96.4421924 7.94316584 103.711061-.10715612e-13 112.651646-.09494702e-13M63.9861352 18.0208333C63.9985183 7.94316584 71.2673872-.10715612e-13 80.2079723-.09494702e-13 84.5296678-.0894239e-13 88.6037017 1.85385642 91.9237435 5.40625 94.7333272 8.55209679 96.4174263 13.0040586 96.4298094 18.0208333L96.4298094 64.875C96.4050432 74.9526331 89.1361742 82.9093307 80.2079723 82.8958333 75.8862767 82.8957989 71.7998598 81.0690061 68.492201 77.4895833 65.6702343 74.3707657 63.9861352 69.8917403 63.9861352 64.875L63.9861352 18.0208333 63.9861352 18.0208333"></path></g></g></svg></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-medium"><h2 class="grommetux-heading grommetux-heading--strong">Together is better</h2><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">Grommet is structured to foster active communication between designers and developers in hopes of creating better user experiences.</p><footer class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-medium grommetux-footer"><a href="/docs/about" class="grommetux-button"><span class="grommetux-button__label">About</span></a></footer></div></section></div></div><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-background-color-index-light-2 grommetux-background-color-index--pending grommetux-section"><h2 class="grommetux-heading grommetux-heading--strong grommetux-heading--align-center">Change themes on the fly</h2><p class="grommetux-paragraph grommetux-paragraph--align-center grommetux-paragraph--margin-none">Grommet is easily themeable for alignment with your brand. Select a theme below to see a preview...</p><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-large grommetux-box--wrap grommetux-tiles grommetux-tiles--flush"><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/hpe" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-between-small"><svg version="1.1" viewBox="0 0 126 48" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-brand-hpe-stack grommetux-control-icon--xlarge grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="brand hpe stack"><g fill="none" fill-rule="evenodd"><path fill="#333" d="M0,29 L0,17 L3,17 L3,22 L8,22 L8,17 L11,17 L11,29 L8,29 L8,24 L3,24 L3,29 L0,29 Z M16.5,29 C13.5,29 12,27 12,24.5 C12,21.5 14,20 16,20 C19,20 20,22.5 20,24 L20,25 L14.5,25 C14.5,26 15,27 16.5,27 C18,27 18.5,26 18.5,26 L19.5,27.5 C19.5,27.5 18.5,29 16.5,29 Z M17.5,23.5 C17.5,23 17.25,22 16,22 C14.75,22 14.5,23 14.5,23.5 L17.5,23.5 Z M25,28.5 L23,28.5 L20,20 L22.5,20 L24,25 L25.5,20 L27.5,20 L29,25 L30.5,20 L33,20 L30,28.5 L28,28.5 L26.5,24 L25,28.5 Z M34,25.5 L34,17 L37,17 C37,17 37,25 37,26 C37,27 38.5,27 39,26.5 L39,28.5 C39,28.5 38,29 37,29 C34.9791644,29 34,28 34,25.5 Z M45.5,23.5 C45.5,23 45.25,22 44,22 C42.75,22 42.5,23 42.5,23.5 L45.5,23.5 Z M44.5,29 C41.5,29 40,27 40,24.5 C40,21.5 42,20 44,20 C47,20 48,22.5 48,24 L48,25 L42.5,25 C42.5,26 43,27 44.5,27 C46,27 46.5,26 46.5,26 L47.5,27.5 C47.5,27.5 46.5,29 44.5,29 Z M61,20 L61,22 L59,22 L59,26 C59,27 60.5,27 61,26.5 L61,28.5 C61,28.5 60,29 59,29 C57,29 56,28 56,25.5 L56,22 L53,22 L53,26 C53,27 54.5,27 55,26.5 L55,28.5 C55,28.5 54,29 53,29 C51,29 50,28 50,25.5 L50,22 L49,22 L49,20 L50,20 L50,18 L53,18 L53,20 L56,20 L56,18 L59,18 L59,20 L61,20 Z M70,25 C70,25 68,25 68,25 L68.0000001,29 L65,29 L65,17 L70,17 C73.5,17 75,19 75,21 C75,23 73.5,25 70,25 Z M72,21 C72,20 71.5,19.5 69.5,19.5 L68,19.5 L68,22.5 L69.5,22.5 C71.5,22.5 72,22 72,21 Z M78.5,29 C76.4999999,29 75,28 75,26 C75,24 76.5,23 78.5,23 C79.5,23 80.5,23.5 80.5,23.5 C80.5,22.5 80,22 78.5,22 C77,22 76.5,22.5 76.5,22.5 L76,21 C76.5,20.5 77.5,20 78.5,20 C81,20 83,20.5 83,23.5 L82.9999999,29.0000001 L80.9999999,29.0000001 L80.5,28.5 C80.5,28.5 79.5,29 78.5,29 Z M80.5,25.5 C80.5,25.5 80,25 79,25 C78,25 77.5,25.5 77.5,26 C77.5,26.5 78,27 79,27 C80,27 80.5,26.5 80.5,25.5 Z M91,23 C91,23 90,22 89,22 C88,22 86.8571429,22.5 86.8571429,24.5 C86.8571429,26.5 88,27 89,27 C90,27 91,26 91,26 L92,27.5 C92,27.5 91,29 88.5714288,29 C85.5,29 84,27 84,24.5 C84,21.5 86,20 88.5714286,20 C91,20 92,21.5 92,21.5 L91,23 Z M96,25 L96,29 L93.5,29 L93.5,17 L96,17 L96,24 L99,20 L102,20 L98.5,24.5 L102,29 L99,29 L96,25 Z M107.5,25.5 C107.5,25.5 107,25 106,25 C105,25 104.5,25.5 104.5,26 C104.5,26.5 105,27 106,27 C107,27 107.5,26.5 107.5,25.5 Z M105.5,29 C103.5,29 102,28 102,26 C102,24 103.5,23 105.5,23 C106.5,23 107.5,23.5 107.5,23.5 C107.5,22.5 107,22 105.5,22 C104,22 103.5,22.5 103.5,22.5 L103,21 C103.5,20.5 104.5,20 105.5,20 C108,20 110,20.5 110,23.5 L110,29.0000001 L108,29.0000001 L107.5,28.5 C107.5,28.5 106.5,29 105.5,29 Z M114,21.5 C114.5,20.5 115,20 116,20 C116.5,20 117,20.5 117,20.5 L116.5,23 C116.5,23 116,22.5 115.5,22.5 C114.5,22.5 114,23.1685183 114,24 L114,29 L111.5,29 L111.5,20 L114,20 L114,21.5 Z M121,29 C119,29 117.5,27.5 117.5,24.5 C117.5,21.5 119,20 121,20 C122.5,20 123.5,21 123.5,21 L123.5,17.5 L126,17.5 L126,29 L123.5,29 L123.5,28 C123.5,28 122.5,29 121,29 Z M122.5,26.4999999 C123.5,25.9999999 123.5,24.9999999 123.5,24.4999999 C123.5,23.9999999 123.5,23 122.5,22.5 C121.5,22 120,22.5 120,24.5 C120,26.5 121.5,26.9999999 122.5,26.4999999 Z M7,33 L7,35 L2,35 L2,38 L6.5,38 L6.5,40 L2,40 L2,43 L7,43 L7,44.9999998 L0,45 L0,33 L7,33 Z M17,39.5 L17,45 L15,45 L15,39.5 C15,38 14.0298955,37.5 13,37.5 C12,37.5 11,38.5 11,40.5 L11,45 L9,45 L9,36 L11,36 L11,37 C11,37 12,36 13.5,36 C15.5,36 17,37 17,39.5 Z M21,36 L23,36 L23,38 L21,38 L21,42.5 C21,43.5 22.5,43.5 23,43 L23,44.5 C23,44.5 22.5,45 21.5,45 C21,45 19,45 19,42 L19,38 L18,38 L18,36 L19,36 L19,34 L21.0000001,34 L21,36 Z M24,40.5 C24,38 25,36 28,36 C30.5,36 32,38 32,40 L32,41 L26,41 C26,43 27.5,43.5 28.5,43.5 C30,43.5 30.5,42.5 30.5,42.5 L31.5,43.5 C31.5,43.5 30.5,45 28.5,45 C25.5,45 24,43 24,40.5 Z M30,39.5 C30,38 29,37.5 28,37.5 C26.5,37.5 26,38.5 26,39.5 L30,39.5 Z M38,36.0000001 C38.5,36.0000001 39,36.5 39,36.5 L39,38.4999999 C39,38.4999999 38.5,38 37.5,38 C36.5,38 36,38.5 36,40 L36,45.0000001 L34,45.0000001 L34,36.0000001 L36,36.0000001 L36,37.5000001 C36,37.5000001 36.5,36.0000001 38,36.0000001 Z M48.5,40.5 C48.5,43 47.5,45 45,45 C43,45 42,43.5 42,43.5 L42,48 L40,48 L40,36 L42,36 L42,37.5 C42,37.5 43,36 45,36 C47.5,36 48.5,38 48.5,40.5 Z M42,41 C42,42 42.5,43.5 44.5,43.5 C45.5,43.5 46.5,42.5 46.5,40.5 C46.5,38.5 45.5,37.5 44.5,37.5 C43,37.5 42,38.5 42,40 C42,40 42,41 42,41 Z M54,36.0000001 C54.5,36.0000001 55,36.5 55,36.5 L55,38.4999999 C55,38.4999999 54.5,38 53.5,38 C52.5,38 52,38.5 52,40 L52,45.0000001 L50,45.0000001 L50,36.0000001 L52,36.0000001 L52,37.5000001 C52,37.5000001 52.5,36.0000001 54,36.0000001 Z M57,36 L59,36 L59,45 L57,45 L57,36 Z M58,33 C59,33 59,33 59,34.0002128 C59,35.0004257 59,35 58,35 C57,35 57,35.0004257 57,34.0002128 C57,33 57,33 58,33 Z M67.5,37 C67.5,37 66,36 64.5,36 C62.5,36 61,37 61,38.5 C61,41.5 66,40.5 66,42.5 C66,43 65.5,43.5 64,43.5 C62.5,43.5 61.5,43 61.5,43 L61,44 C61,44 62.5,45 64.5,45 C66.5,45 68,44 68,42.5 C68,39.5 63,40 63,38.5 C63,38 63,37.5 65,37.5 C66,37.5 67,38 67,38 L67.5,37 Z M75,39.5 C75,38 74,37.5 73,37.5 C71.5,37.5 71,38.5 71,39.5 L75,39.5 Z M69,40.5 C69,38 70,36 73,36 C75.5,36 77,38 77,40 L77,41 L71,41 C71,43 72.5,43.5 73.5,43.5 C75,43.5 75.5,42.5 75.5,42.5 L76.5,43.5 C76.5,43.5 75.5,45 73.5,45 C70.5,45 69,43 69,40.5 Z" stroke="none"></path><path fill="#01A982" d="M0,12 L40,12 L40,0 L0,0 L0,12 Z M3,3 L37,3 L37,9 L3,9 L3,3 Z" stroke="none"></path></g></svg></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-between-small"><svg version="1.1" viewBox="0 0 48 48" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-brand-grommet-outline grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="brand grommet outline"><path fill="#865CD6" d="M24,44.5 C35.3218374,44.5 44.5,35.3218374 44.5,24 C44.5,12.6781626 35.3218374,3.5 24,3.5 C12.6781626,3.5 3.5,12.6781626 3.5,24 C3.5,35.3218374 12.6781626,44.5 24,44.5 L24,44.5 Z M24,39.5 C15.4395864,39.5 8.5,32.5604136 8.5,24 C8.5,15.4395864 15.4395864,8.5 24,8.5 C32.5604136,8.5 39.5,15.4395864 39.5,24 C39.5,32.5604136 32.5604136,39.5 24,39.5 L24,39.5 Z" stroke="none"></path></svg><h4 class="grommetux-heading grommetux-heading--strong grommetux-heading--align-center grommetux-heading--margin-none">grommet</h4></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/aruba" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-between-small"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-platform-aruba grommetux-control-icon--xlarge grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="platform aruba"><path fill="#FF8300" fill-rule="evenodd" d="M13.6146045,12.7160243 L13.6146045,12.7160243 C13.6146045,14.0141988 12.5760649,15.0689655 11.3103448,15.0689655 C10.0446247,15.0689655 9.00608519,14.0141988 9.00608519,12.7160243 L9.00608519,10.7200811 C9.00608519,10.7200811 10.1095335,10.9959432 10.1095335,12.1643002 L10.1095335,12.7160243 C10.1095335,13.4300203 10.6450304,13.9979716 11.3103448,13.9979716 C11.9756592,13.9979716 12.5111562,13.4300203 12.5111562,12.7160243 L12.5111562,11.5638945 L12.5111562,11.5801217 C12.5598377,10.6064909 13.3874239,10.2981744 13.5983773,10.1845842 L13.6146045,10.1845842 L13.6146045,11.5476673 L13.6146045,12.7160243 L13.6146045,12.7160243 Z M7.69168357,10.3793103 C8,10.3793103 8.29208925,10.4279919 8.55172414,10.5415822 L8.55172414,11.7748479 C8.32454361,11.5801217 8.01622718,11.4665314 7.69168357,11.4665314 C6.96146045,11.4665314 6.37728195,12.0344828 6.37728195,12.7484787 L6.37728195,15.0689655 L5.27383367,15.0689655 L5.27383367,10.8174442 C5.27383367,10.8174442 5.72819473,10.8336714 6.02028398,11.0446247 C6.44219067,10.6227181 7.04259635,10.3793103 7.69168357,10.3793103 L7.69168357,10.3793103 Z M2.40162272,14.0141988 C1.67139959,14.0141988 1.07099391,13.4300203 1.07099391,12.7160243 C1.07099391,12.0020284 1.67139959,11.4178499 2.40162272,11.4178499 C3.13184584,11.4178499 3.73225152,12.0020284 3.73225152,12.7160243 C3.73225152,13.4300203 3.13184584,14.0141988 2.40162272,14.0141988 L2.40162272,14.0141988 Z M2.40162272,10.3793103 C1.07099391,10.3793103 -1.47437618e-13,11.4340771 -1.47437618e-13,12.7160243 C-1.47437618e-13,14.0141988 1.07099391,15.0527383 2.40162272,15.0527383 C2.95334686,15.0527383 3.45638945,14.8742394 3.86206897,14.5659229 C4.10547667,14.9716024 4.80324544,15.0527383 4.80324544,15.0527383 L4.80324544,12.7160243 C4.80324544,11.4340771 3.73225152,10.3793103 2.40162272,10.3793103 L2.40162272,10.3793103 Z M21.5983773,14.0141988 C20.8681542,14.0141988 20.2677485,13.4300203 20.2677485,12.7160243 C20.2677485,12.0020284 20.8681542,11.4178499 21.5983773,11.4178499 C22.3286004,11.4178499 22.9290061,12.0020284 22.9290061,12.7160243 C22.9290061,13.4300203 22.3286004,14.0141988 21.5983773,14.0141988 L21.5983773,14.0141988 Z M21.5983773,10.3793103 C20.2677485,10.3793103 19.1967546,11.4340771 19.1967546,12.7160243 C19.1967546,14.0141988 20.2677485,15.0527383 21.5983773,15.0527383 C22.1501014,15.0527383 22.653144,14.8742394 23.0588235,14.5659229 C23.3022312,14.9716024 24,15.0527383 24,15.0527383 L24,12.7160243 C24,11.4340771 22.9290061,10.3793103 21.5983773,10.3793103 L21.5983773,10.3793103 Z M16.5030426,14.0141988 C15.7728195,14.0141988 15.1724138,13.4300203 15.1724138,12.7160243 C15.1724138,12.0020284 15.7728195,11.4178499 16.5030426,11.4178499 C17.2332657,11.4178499 17.8336714,12.0020284 17.8336714,12.7160243 C17.8498986,13.4300203 17.2494929,14.0141988 16.5030426,14.0141988 L16.5030426,14.0141988 Z M16.5030426,10.3793103 C16.0162272,10.3793103 15.5618661,10.525355 15.1724138,10.7687627 L15.1724138,10.3955375 C15.1237323,9.42190669 14.3286004,9.11359026 14.1176471,9 L14.1014199,9 L14.1014199,15.0689655 C14.1014199,15.0689655 14.8154158,14.9878296 15.0912779,14.5983773 C15.4969574,14.8742394 15.9837728,15.0527383 16.5030426,15.0527383 C17.8336714,15.0527383 18.9046653,13.9979716 18.9046653,12.7160243 C18.9208925,11.4340771 17.8336714,10.3793103 16.5030426,10.3793103 L16.5030426,10.3793103 Z" stroke="none"></path></svg></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/hpinc" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-between-small"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-platform-hpi grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="platform hpi"><path fill="#0096D6" fill-rule="evenodd" d="M15.7928421,15.3333704 C15.9768442,15.3333704 16.1755131,15.1915021 16.2349804,15.0183002 L18.4310048,8.64836276 C18.4908721,8.47529417 18.3902043,8.33315926 18.2063356,8.33315926 L17.2052578,8.33315926 C17.0219225,8.33315926 16.8228536,8.47529417 16.7629863,8.64836276 L14.5570951,15.0183002 C14.4973611,15.1915021 14.5981622,15.3333704 14.7821642,15.3333704 L15.7928421,15.3333704 Z M24.0002667,12 C24.0002667,18.627007 18.6267403,24 12,24 C11.8170646,24 11.6393293,23.9803998 11.4581273,23.9727997 L13.8777542,16.981922 C13.9382882,16.8085868 14.1365571,16.6668519 14.3205591,16.6668519 L16.0003111,16.6668519 C18.6083401,16.6668519 18.632207,15.8021756 18.9066101,15.0079001 C19.5488839,13.1445461 20.6560962,9.93424371 20.8714319,9.30583673 C21.1779686,8.40956011 21.2793031,7.00007778 19.0002111,7.00007778 L15.0000333,7.00007778 C14.816698,7.00007778 14.6177624,7.14194602 14.5570951,7.31528128 L8.92489917,23.5871954 C3.79030878,22.2271803 0,17.5617951 0,12 C0,6.69394104 3.44790498,2.20055778 8.22275803,0.615473505 L2.77589751,16.3513817 C2.71523017,16.5248503 2.81643129,16.6668519 3.00003333,16.6668519 L4.99965555,16.6668519 C5.1836576,16.6668519 5.38232647,16.5248503 5.44272714,16.3513817 L8.1092901,8.64836276 C8.16915744,8.47529417 8.36755964,8.33315926 8.55102834,8.33315926 L9.539706,8.33315926 C9.72330804,8.33315926 9.82410916,8.47529417 9.76424182,8.64836276 L7.10847898,16.3513817 C7.04914499,16.5248503 7.14994611,16.6668519 7.33328148,16.6668519 L9.33357037,16.6668519 C9.51690574,16.6668519 9.71570795,16.5248503 9.77544195,16.3513817 C9.77544195,16.3513817 11.6389293,10.9485217 12.2016022,9.3149035 C12.7649418,7.68155202 12.3125368,7.00007778 10.3462483,7.00007778 L9.01290014,7.00007778 C8.82956477,7.00007778 8.72889699,6.8580762 8.78916432,6.68514095 L11.0862565,0.0464005156 C11.3887932,0.0234669274 11.6913299,0 12,0 C18.6267403,0 24.0002667,5.37299303 24.0002667,12 L24.0002667,12 Z" stroke="none"></path></svg></div></a></div></div></div><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large grommetux-tile grommetux-none-hover-color-index-disabled grommetux-tile--hover-border-small"><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--slide-up grommetux-animate__child--inactive" style="transition-duration:1000ms"><a href="/dxc" class="grommetux-button grommetux-button--plain"><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-center grommetux-box--align-center grommetux-box--pad-between-small"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-platform-dxc grommetux-control-icon--large grommetux-control-icon--responsive grommetux-color-index-plain" aria-label="platform dxc"><path fill="#000000" fill-rule="evenodd" d="M20.7613636,17.5 C18.4078775,17.5 16.5,15.1494949 16.5,12.25 C16.5,9.35050506 18.4078775,7 20.7613636,7 C21.5091155,7 22.588661,7 24,7 C24,9.48823368 24,11.2382337 24,12.25 C24,13.2666389 24,15.0166389 24,17.5 C22.584706,17.5 21.5051605,17.5 20.7613636,17.5 Z M8.5,20.5 L12.25,14 L16,20.5 L8.5,20.5 Z M3.23863636,7 C5.59212251,7 7.5,9.35050506 7.5,12.25 C7.5,15.1494949 5.59212251,17.5 3.23863636,17.5 C2.49088449,17.5 1.41133904,17.5 8.8817842e-16,17.5 C0,15.0117663 0,13.2617663 0,12.25 C-8.8817842e-16,11.2333611 -8.8817842e-16,9.48336115 8.8817842e-16,7 C1.41529402,7 2.49483947,7 3.23863636,7 Z M8.5,4 L16,4 L12.25,10.5 L8.5,4 Z" stroke="none"></path></svg></div></a></div></div></div></div></section></div></div><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><section style="background:url(/img/mobile_first.png) no-repeat center center;background-size:cover;background-position:50% 50%" class="grommetux-box grommetux-box--direction-column grommetux-box--justify-start grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-large grommetux-background-color-index-dark grommetux-background-color-index--pending grommetux-section"><div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-none home__mobile"><h2 class="grommetux-heading grommetux-heading--strong grommetux-heading--align-center">What will you create</h2><p class="grommetux-paragraph grommetux-paragraph--align-center">Grommet is used by a variety of companies. Check out some examples that we think you’ll love.</p><a href="/docs/showcase" class="grommetux-button"><span class="grommetux-button__label">Showcase</span></a></div></section></div></div><div class="grommetux-animate"><div class="grommetux-animate__child grommetux-animate__child--fade grommetux-animate__child--inactive" style="transition-duration:1000ms"><footer style="margin-bottom:-0px" class="grommetux-box grommetux-box--direction-column grommetux-box--align-stretch grommetux-box--pad-none grommetux-background-color-index-grey-1 grommetux-background-color-index--pending grommetux-footer"><a tabindex="-1" aria-hidden="true" id="skip-link-footer" class="grommetux-skip-link-anchor">Footer</a><div class="grommetux-box grommetux-box--direction-row grommetux-box--justify-between grommetux-box--responsive grommetux-box--pad-medium"><div class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-between-medium"><svg class="grommetux-logo-icon" viewBox="0 0 182 182" width="182" height="182" version="1.1" role="img" aria-label="Grommet"><path role="presentation" stroke-width="18" stroke="#865CD6" fill="none" d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"></path></svg><a href="/docs/about" class="grommetux-anchor">About</a><a href="https://blog.grommet.io" class="grommetux-anchor">Blog</a><a href="https://vimeo.com/grommetux" class="grommetux-anchor">Training</a><a href="https://itunes.apple.com/us/podcast/great-grommet-podcast/id1089989263?mt=2" class="grommetux-anchor">Podcast</a></div><div class="grommetux-box grommetux-box--direction-row grommetux-box--pad-vertical-small"><a href="https://twitter.com/grommetux" class="grommetux-anchor grommetux-anchor--animate-icon grommetux-anchor--icon"><span class="grommetux-anchor__icon"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-social-twitter grommetux-control-icon--responsive" aria-label="Grommet Twitter"><path fill="#1DA1F2" fill-rule="evenodd" d="M24,4.3086 C23.117,4.7006 22.168,4.9646 21.172,5.0836 C22.188,4.4746 22.969,3.5096 23.337,2.3596 C22.386,2.9246 21.332,3.3336 20.21,3.5556 C19.312,2.5976 18.032,1.9996 16.616,1.9996 C13.897,1.9996 11.692,4.2046 11.692,6.9236 C11.692,7.3096 11.736,7.6856 11.82,8.0456 C7.728,7.8406 4.099,5.8806 1.671,2.9006 C1.247,3.6286 1.004,4.4736 1.004,5.3766 C1.004,7.0846 1.873,8.5926 3.195,9.4756 C2.388,9.4486 1.628,9.2276 0.964,8.8596 L0.964,8.9206 C0.964,11.3066 2.661,13.2966 4.914,13.7486 C4.501,13.8626 4.065,13.9216 3.617,13.9216 C3.299,13.9216 2.991,13.8906 2.69,13.8336 C3.317,15.7896 5.135,17.2136 7.29,17.2536 C5.604,18.5736 3.481,19.3606 1.175,19.3606 C0.777,19.3606 0.385,19.3376 0,19.2926 C2.179,20.6886 4.767,21.5046 7.548,21.5046 C16.605,21.5046 21.557,14.0016 21.557,7.4946 C21.557,7.2816 21.552,7.0696 21.543,6.8586 C22.505,6.1636 23.34,5.2966 24,4.3086" stroke="none"></path></svg></span></a><a href="https://www.facebook.com/grommetux/" class="grommetux-anchor grommetux-anchor--animate-icon grommetux-anchor--icon"><span class="grommetux-anchor__icon"><svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" role="img" class="grommetux-control-icon grommetux-control-icon-social-facebook grommetux-control-icon--responsive" aria-label="Grommet Facebook"><path fill="#3B5998" fill-rule="evenodd" d="M23.00025,0 L1.0005,0 C0.44775,0 0,0.44775 0,0.99975 L0,23.00025 C0,23.55225 0.44775,24 1.0005,24 L12.75,24 L12.75,15 L9.75,15 L9.75,11.25 L12.75,11.25 L12.75,8.25 C12.75,5.15025 14.71275,3.62475 17.478,3.62475 C18.8025,3.62475 19.941,3.72375 20.2725,3.76725 L20.2725,7.00725 L18.35475,7.008 C16.851,7.008 16.5,7.72275 16.5,8.77125 L16.5,11.25 L20.25,11.25 L19.5,15 L16.5,15 L16.56,24 L23.00025,24 C23.55225,24 24,23.55225 24,23.00025 L24,0.99975 C24,0.44775 23.55225,0 23.00025,0" stroke="none"></path></svg></span></a></div></div><div class="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-horizontal-medium grommetux-box--pad-vertical-large"><span>Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/legalcode" class="grommetux-anchor">CC BY 4.0</a></span><span>© 2016 Hewlett Packard Enterprise Development LP.</span></div></footer></div></div></article><span style="display:none"></span><div class="grommetux-app__announcer" aria-live="polite"></div></div></div>
<script src="/index.js"></script>
</body>
</html>