diff --git a/components/card/__tests__/__snapshots__/footer.test.tsx.snap b/components/card/__tests__/__snapshots__/footer.test.tsx.snap
index 7890e02..0adf8ed 100644
--- a/components/card/__tests__/__snapshots__/footer.test.tsx.snap
+++ b/components/card/__tests__/__snapshots__/footer.test.tsx.snap
@@ -6,6 +6,14 @@ exports[`Card Footer should render correctly 1`] = `
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content > :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content > :global(*:last-child) {
+          margin-bottom: 0;
+        }
       </style></div><footer class=\\"auto-margin \\">footer<style>
         footer {
           padding: 8pt 16pt;
@@ -45,14 +53,6 @@ exports[`Card Footer should render correctly 1`] = `
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap
index 23d5e42..8c1840e 100644
--- a/components/card/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap
@@ -43,6 +43,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                   "next": null,
                                   "parent": [Circular],
@@ -72,6 +80,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                 "next": null,
                                 "parent": [Circular],
@@ -120,14 +136,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -185,14 +193,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -228,6 +228,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -257,6 +265,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                   "next": null,
                                   "parent": [Circular],
@@ -309,6 +325,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -344,6 +368,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -376,6 +408,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -405,6 +445,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                   "next": null,
                                   "parent": [Circular],
@@ -453,14 +501,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -518,14 +558,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -561,6 +593,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -590,6 +630,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -674,14 +722,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -739,14 +779,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -792,6 +824,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -821,6 +861,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                   "next": null,
                                   "parent": [Circular],
@@ -869,14 +917,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -934,14 +974,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -977,6 +1009,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -1006,6 +1046,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -1058,6 +1106,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -1093,6 +1149,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -1125,6 +1189,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -1154,6 +1226,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -1202,14 +1282,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -1267,14 +1339,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -1310,6 +1374,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -1339,6 +1411,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -1427,6 +1507,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                   "next": null,
                   "parent": [Circular],
@@ -1462,6 +1550,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                 "next": null,
                 "parent": [Circular],
@@ -1504,6 +1600,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -1533,6 +1637,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                   "next": null,
                                   "parent": [Circular],
@@ -1581,14 +1693,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -1646,14 +1750,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -1689,6 +1785,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -1718,6 +1822,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -1770,6 +1882,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -1805,6 +1925,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -1837,6 +1965,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -1866,6 +2002,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -1914,14 +2058,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -1979,14 +2115,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2022,6 +2150,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -2051,6 +2187,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -2135,14 +2279,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2200,14 +2336,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2253,6 +2381,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -2282,6 +2418,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -2330,14 +2474,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2395,14 +2531,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2438,6 +2566,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -2467,6 +2603,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -2519,6 +2663,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                               "next": null,
                               "parent": [Circular],
@@ -2554,6 +2706,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -2586,6 +2746,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -2615,6 +2783,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -2663,14 +2839,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2728,14 +2896,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2771,6 +2931,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                           "next": null,
                                           "parent": [Circular],
@@ -2800,6 +2968,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -2920,14 +3096,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -2985,14 +3153,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3048,6 +3208,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -3077,6 +3245,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                   "next": null,
                                   "parent": [Circular],
@@ -3125,14 +3301,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3190,14 +3358,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3233,6 +3393,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -3262,6 +3430,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -3314,6 +3490,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -3349,6 +3533,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -3381,6 +3573,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -3410,6 +3610,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -3458,14 +3666,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3523,14 +3723,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3566,6 +3758,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -3595,6 +3795,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -3679,14 +3887,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3744,14 +3944,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3797,6 +3989,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -3826,6 +4026,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -3874,14 +4082,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3939,14 +4139,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -3982,6 +4174,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -4011,6 +4211,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -4063,6 +4271,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                               "next": null,
                               "parent": [Circular],
@@ -4098,6 +4314,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -4130,6 +4354,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -4159,6 +4391,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -4207,14 +4447,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -4272,14 +4504,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -4315,6 +4539,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                           "next": null,
                                           "parent": [Circular],
@@ -4344,6 +4576,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -4432,6 +4672,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                     "next": null,
                     "parent": [Circular],
@@ -4467,6 +4715,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                   "next": null,
                   "parent": [Circular],
@@ -4509,6 +4765,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -4538,6 +4802,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                     "next": null,
                                     "parent": [Circular],
@@ -4586,14 +4858,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -4651,14 +4915,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -4694,6 +4950,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -4723,6 +4987,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -4775,6 +5047,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                               "next": null,
                               "parent": [Circular],
@@ -4810,6 +5090,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -4842,6 +5130,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -4871,6 +5167,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -4919,14 +5223,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -4984,14 +5280,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5027,6 +5315,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                           "next": null,
                                           "parent": [Circular],
@@ -5056,6 +5352,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -5140,14 +5444,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5205,14 +5501,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5258,6 +5546,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -5287,6 +5583,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                       "next": null,
                                       "parent": [Circular],
@@ -5335,14 +5639,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5400,14 +5696,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5443,6 +5731,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                           "next": null,
                                           "parent": [Circular],
@@ -5472,6 +5768,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -5524,6 +5828,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                 "next": null,
                                 "parent": [Circular],
@@ -5559,6 +5871,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                               "next": null,
                               "parent": [Circular],
@@ -5591,6 +5911,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                           "next": null,
                                           "parent": [Circular],
@@ -5620,6 +5948,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                         "next": null,
                                         "parent": [Circular],
@@ -5668,14 +6004,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5733,14 +6061,6 @@ initialize {
           box-shadow: none;
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -5776,6 +6096,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                             "next": null,
                                             "parent": [Circular],
@@ -5805,6 +6133,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                                           "next": null,
                                           "parent": [Circular],
@@ -5982,6 +6318,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -6011,6 +6355,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                     "next": null,
                     "parent": [Circular],
@@ -6059,14 +6411,6 @@ initialize {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6124,14 +6468,6 @@ initialize {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6167,6 +6503,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -6196,6 +6540,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -6260,6 +6612,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -6289,6 +6649,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -6337,14 +6705,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6402,14 +6762,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6445,6 +6797,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -6474,6 +6834,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -6538,6 +6906,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -6567,6 +6943,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -6615,14 +6999,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6680,14 +7056,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6723,6 +7091,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -6752,6 +7128,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -6847,6 +7231,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -6876,6 +7268,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                     "next": null,
                     "parent": [Circular],
@@ -6924,14 +7324,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -6989,14 +7381,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7032,6 +7416,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -7061,6 +7453,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -7125,6 +7525,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -7154,6 +7562,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -7202,14 +7618,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7267,14 +7675,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7310,6 +7710,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -7339,6 +7747,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -7415,6 +7831,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -7444,6 +7868,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -7492,14 +7924,6 @@ initialize {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7557,14 +7981,6 @@ initialize {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7600,6 +8016,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -7629,6 +8053,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -7712,6 +8144,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -7741,6 +8181,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                     "next": null,
                     "parent": [Circular],
@@ -7789,14 +8237,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7854,14 +8294,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -7897,6 +8329,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -7926,6 +8366,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -7992,6 +8440,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -8021,6 +8477,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                       "next": null,
                       "parent": [Circular],
@@ -8069,14 +8533,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -8134,14 +8590,6 @@ initialize {
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -8177,6 +8625,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -8206,6 +8662,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -8272,6 +8736,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
@@ -8301,6 +8773,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                         "next": null,
                         "parent": [Circular],
@@ -8349,14 +8829,6 @@ initialize {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -8414,14 +8886,6 @@ initialize {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
@@ -8457,6 +8921,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                             "next": null,
                             "parent": [Circular],
@@ -8486,6 +8958,14 @@ initialize {
           width: 100%;
           padding: 16pt 16pt;
         }
+        
+        .content &gt; :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content &gt; :global(*:last-child) {
+          margin-bottom: 0;
+        }
       ",
                           "next": null,
                           "parent": [Circular],
diff --git a/components/card/card-content.tsx b/components/card/card-content.tsx
index 805b184..cea60e1 100644
--- a/components/card/card-content.tsx
+++ b/components/card/card-content.tsx
@@ -26,6 +26,14 @@ const CardContent: React.FC<React.PropsWithChildren<CardContentProps>> = ({
           width: 100%;
           padding: ${theme.layout.gap} ${theme.layout.gap};
         }
+        
+        .content > :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content > :global(*:last-child) {
+          margin-bottom: 0;
+        }
       `}</style>
     </div>
   )
diff --git a/components/card/card.tsx b/components/card/card.tsx
index f17682e..ffeb4bf 100644
--- a/components/card/card.tsx
+++ b/components/card/card.tsx
@@ -69,14 +69,6 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
           box-shadow: ${hoverShadow};
         }
         
-        .card :global(*:first-child) {
-          margin-top: 0;
-        }
-        
-        .card :global(*:last-child) {
-          margin-bottom: 0;
-        }
-        
         .card :global(img) {
           width: 100%;
         }
diff --git a/components/modal/__tests__/__snapshots__/index.test.tsx.snap b/components/modal/__tests__/__snapshots__/index.test.tsx.snap
index bdcb41c..caf69b0 100644
--- a/components/modal/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/index.test.tsx.snap
@@ -35,8 +35,12 @@ exports[`Modal should render correctly 1`] = `
           padding: 16pt 0 8pt 0;
         }
         
-        .content :global(p) {
-          margin: 0;
+        .content > :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content > :global(*:last-child) {
+          margin-bottom: 0;
         }
       </style><div></div><footer><button class=\\"\\">Cancel</button><style>
         button {
diff --git a/components/modal/modal-content.tsx b/components/modal/modal-content.tsx
index 3947261..53a0c2d 100644
--- a/components/modal/modal-content.tsx
+++ b/components/modal/modal-content.tsx
@@ -27,8 +27,12 @@ const ModalContent: React.FC<ModalContentProps> = ({
           padding: ${theme.layout.gap} 0 ${theme.layout.gapHalf} 0;
         }
         
-        .content :global(p) {
-          margin: 0;
+        .content > :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .content > :global(*:last-child) {
+          margin-bottom: 0;
         }
       `}</style>
     </>
diff --git a/lib/components/displays/icons-cell.tsx b/lib/components/displays/icons-cell.tsx
new file mode 100644
index 0000000..3e8b46d
--- /dev/null
+++ b/lib/components/displays/icons-cell.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Text, useTheme } from 'components'
+
+export const getFileName = (name: string): string => {
+  return name.replace(/^(.)/, g => g.toLowerCase())
+}
+
+export const getImportString = (name: string) => {
+  const fileName = getFileName(name)
+  const single = `import ${name} from '@zeit-ui/react-icons/${fileName}'`
+  const normal = `import { ${name} } from '@zeit-ui/react-icons'`
+  return {
+    single, normal,
+  }
+}
+
+interface Props {
+  component: React.ComponentType<any>
+  name: string
+  onClick: (name: string) => void
+}
+
+const IconsCell: React.FC<Props> = ({
+  component: Component, name, onClick
+}) => {
+  const theme = useTheme()
+  return (
+    <div className="icon-item" key={name} onClick={() => onClick(name)}>
+      <Component />
+      <Text type="secondary" small>{name}</Text>
+      <style jsx>{`
+        .icon-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-evenly;
+          flex-grow: 0;
+          flex-basis: 125px;
+          min-width: 0px;
+          height: 95px;
+          margin: 12px 5px;
+          border-radius: ${theme.layout.radius};
+          box-sizing: border-box;
+          cursor: pointer;
+          user-select: none;
+          transition: all 150ms ease-in-out;
+        }
+        
+        .icon-item > :global(small) {
+          display: inline-block;
+          width: 90%;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .icon-item:hover {
+          box-shadow: ${theme.expressiveness.shadowMedium};
+        }
+        
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          .icon-item {
+            flex-basis: 30%;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default React.memo(IconsCell)
diff --git a/lib/components/displays/icons.tsx b/lib/components/displays/icons.tsx
new file mode 100644
index 0000000..e5fc087
--- /dev/null
+++ b/lib/components/displays/icons.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import { Card, Input, useInput, Modal, useModal, Snippet } from 'components'
+import * as Icon from '@zeit-ui/react-icons'
+import IconsCell, { getImportString } from './icons-cell'
+
+const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+  return (
+    <Snippet>
+      {children}
+      <style jsx>{`
+        :global(pre:before) {
+          display: none;
+        }
+      `}</style>
+    </Snippet>
+  )
+}
+
+const Icons: React.FC = () => {
+  const { setVisible, bindings: modalBindings } = useModal()
+  const { state: query, bindings } = useInput('')
+  const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
+  const icons = Object.entries(Icon).filter(
+    ([name]) => !query || name.toLowerCase().includes(query.toLowerCase())
+  )
+  const onCellClick = (name: string) => {
+    const { single, normal } = getImportString(name)
+    setImportStr({ title: name, single, normal })
+    setVisible(true)
+  }
+
+  return (
+    <>
+      <h3 className="title">Icons Gallery</h3>
+      <Card>
+        <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} />
+        <div className="icons-grid">
+          {icons.map(([name, component], index) => (
+            <IconsCell name={name} component={component} key={`${name}-${index}`}
+              onClick={onCellClick} />
+          ))}
+        </div>
+        <Modal {...modalBindings}>
+          <Modal.Title>{importStr.title}</Modal.Title>
+          <Modal.Content>
+            <p>Import:</p>
+            <ImportSnippet>{importStr.normal}</ImportSnippet>
+            <p>Import single component:</p>
+            <ImportSnippet>{importStr.single}</ImportSnippet>
+          </Modal.Content>
+        </Modal>
+      </Card>
+      <style jsx>{`
+        .title {
+          line-height: 1;
+          margin-top: 75px;
+          margin-bottom: 30px;
+        }
+
+        :global(input) {
+          margin-bottom: 4px !important;
+        }
+
+        .icons-grid {
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: 8pt;
+          justify-content: space-around;
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default Icons
diff --git a/lib/components/icons/logo.tsx b/lib/components/icons/logo.tsx
index 9df4a13..d4c4e70 100644
--- a/lib/components/icons/logo.tsx
+++ b/lib/components/icons/logo.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 import { useTheme } from 'components/index'
 
-
-
-export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...props }) => {
+export const LogoIcon: React.FC<React.SVGAttributes<any>> = ({ ...props }) => {
   const theme = useTheme()
   return (
     <svg width="25" viewBox="0 0 114 100" fill="none" {...props}>
@@ -25,6 +23,6 @@ export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...pro
       `}</style>
     </svg>
   )
-})
+}
 
-export default LogoIcon
+export default React.memo(LogoIcon)
diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json
index 423d56c..c87c1e1 100644
--- a/lib/data/metadata-en-us.json
+++ b/lib/data/metadata-en-us.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
diff --git a/pages/en-us/components/icons.mdx b/pages/en-us/components/icons.mdx
new file mode 100644
index 0000000..b30bff3
--- /dev/null
+++ b/pages/en-us/components/icons.mdx
@@ -0,0 +1,82 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import Title from 'lib/components/playground/title'
+import { Spacer, Tabs, Snippet } from 'components'
+import * as Icon from '@zeit-ui/react-icons'
+import Github from '@zeit-ui/react-icons/github'
+import IconsGallery from 'lib/components/displays/icons'
+
+export const meta = {
+  title: 'Icons',
+  group: 'General',
+}
+
+## Icons
+
+Display semantic vector graphics in SVG format.
+
+<Title title="Installation" desc="Install the package in your project directory." />
+<Tabs initialValue="yarn">
+  <Tabs.Item label="Yarn" value="yarn">
+    <Spacer y={0.6} />
+    <Snippet width="400px">yarn add @zeit-ui/react-icons</Snippet>
+  </Tabs.Item>
+  <Tabs.Item label="npm" value="npm">
+    <Spacer y={0.6} />
+    <Snippet width="400px">npm i @zeit-ui/react-icons</Snippet>
+  </Tabs.Item>
+</Tabs>
+
+<Playground
+  title="Import"
+  scope={{ Icon, Github, Spacer }}
+  code={`
+// import * as Icon from '@zeit-ui/react-icons'
+// or
+// import { Github } from '@zeit-ui/react-icons'
+// or, for tree-shaking:
+// import Github from '@zeit-ui/react-icons/github'
+
+<>
+  <Icon.Github />
+  <Spacer x={1} inline />
+  <Github />
+</>
+`} />
+
+<Playground
+  title="Color"
+  scope={{ Github }}
+  code={`
+<Github color="red" />
+`}
+/>
+
+<Playground
+  title="Sizes"
+  scope={{ Github, Spacer }}
+  code={`
+<>
+  <Github size={16} /> <Spacer inline x={.35} />
+  <Github size={20} /> <Spacer inline x={.35} />
+  <Github size={24} /> <Spacer inline x={.35} />
+  <Github size={28} /> <Spacer inline x={.35} />
+  <Github size={32} /> <Spacer inline x={.35} />
+  <Github size={36} />
+</>
+`}
+/>
+
+<IconsGallery />
+
+<Attributes edit="/pages/en-us/components/icons.mdx">
+<Attributes.Title>Icon.Props</Attributes.Title>
+
+| Attribute | Description  | Type            | Accepted values                  | Default |
+| --------- | ------------ | --------------- | -------------------------------- | ------- |
+| **color** | Icon color   | `string`        | -                                | -       |
+| **size**  | Icon size    | `number`        | -                                | -       |
+| ...       | Native props | `SVGAttributes` | `'id', 'name', 'className', ...` | -       |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>