feat(aio): api page styles

Changed description from h3 to h2 to match the other header
Created api page classes for consistent styling
Add styles for info-bar section
Wrapped pre tags for code not to go off of screen

aio/src/styles/1-layouts/_api-page.scss

@@ -0,0 +1,42 @@
+.api-section {
+    display: flex;
+    flex-direction: row;
+    vertical-align: top;
+    position: relative;
+    margin-bottom: 32px;
+    padding: 8px 0 16px;
+
+    pre {
+        white-space: pre-line;
+    }
+
+    &:after {
+        content:"";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-bottom: 1px solid $lightgray;
+        width: 100%;
+    }
+}
+
+.api-section-header {
+    width: 30%;
+    display: inline-block;
+    margin-right: 32px;
+
+    h2, p {
+        margin: 0;
+    }
+}
+
+.api-section-content {
+    width: 60%;
+    display: inline-block;
+
+    p {
+        margin: 0 0 8px 0;
+    }
+}

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -9,4 +9,5 @@
 @import 'marketing-layout';
 @import 'footer';
 @import 'layout-global';
-@import 'not-found';
+@import 'not-found';
+@import 'api-page';

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

@@ -0,0 +1,5 @@
+.info-bar {
+    padding: 32px;
+    border-radius: 4px;
+    background-color: rgba($blue, 0.1);
+}

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

@@ -24,4 +24,5 @@
    @import 'callout';
    @import 'resources';
    @import 'edit-page-cta';
-   @import 'heading-anchors';
+   @import 'heading-anchors';
+   @import 'api-info-bar';