build(aio): render grouped overloads

aio/src/styles/2-modules/_api-info-bar.scss

@@ -1,13 +0,0 @@
-.api-info-bar {
-    max-width: 800px;
-    text-align: left;
-
-    span {
-        margin: 0 16px 0 0;
-
-        @media screen and (max-width: 600px) {
-            display: block;
-        }
-
-    }
-}

aio/src/styles/2-modules/_api-pages.scss

@@ -0,0 +1,23 @@
+.api-info-bar {
+  max-width: 800px;
+  text-align: left;
+
+  span {
+    margin: 0 16px 0 0;
+
+    @media screen and (max-width: 600px) {
+      display: block;
+    }
+
+  }
+}
+
+.api-heading {
+  margin-top: 24px;
+  margin-bottom: 18px;
+  font-size: 16px;
+}
+
+.overloads .detail-contents {
+  padding-top: 0;
+}

aio/src/styles/2-modules/_details.scss

@@ -0,0 +1,51 @@
+/*
+ * General styling to make detail/summary tags look a bit more material
+ * To get the best out of it you should structure your usage like this:
+ *
+ * ```
+ * <details>
+ *   <summary>Some title</summary>
+ *   <div class="details-content">
+ *     Some content
+ *   </div>
+ *  </details>
+ *
+ */
+
+summary {
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  padding: 16px 24px;
+  color: $black;
+  height: 16px;
+  display: block; // Remove the built in details marker in FF
+
+  &::-webkit-details-marker {
+    display: none; // Remove the built in details marker in webkit
+  }
+
+  &::after {
+    content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
+    font-family: 'Material Icons';
+    font-size: 24px;
+    -webkit-font-smoothing: antialiased;
+    @include rotate(0deg); // We will rotate 180 degrees when details is open
+
+    position: absolute;
+    top: 12px;
+    right: 22px;
+  }
+}
+
+details {
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+  .detail-contents {
+    padding: 16px 24px;
+  }
+
+  &[open] > summary::after {
+    @include rotate(180deg); // Rotate the icon
+  }
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -3,7 +3,7 @@
    ============================== */
 
    @import 'alert';
-   @import 'api-info-bar';
+   @import 'api-pages';
    @import 'api-list';
    @import 'banner';
    @import 'buttons';
@@ -12,6 +12,7 @@
    @import 'code';
    @import 'contribute';
    @import 'contributor';
+   @import 'details';
    @import 'edit-page-cta';
    @import 'features';
    @import 'filetree';