diff --git a/aio/src/styles/2-modules/_banner.scss b/aio/src/styles/2-modules/_banner.scss
deleted file mode 100644
index 1773713fc5..0000000000
--- a/aio/src/styles/2-modules/_banner.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/* BANNER */
-
-.info-banner {
-    margin: 16px 0;
-    justify-content: center;
-    background: $white;
-    border: 1px solid rgba($lightgray, 0.5);
-    border-radius: 4px;
-    box-sizing: border-box;
-    padding: 16px;
-    background: $white;
-    height: auto;
-    overflow: visible;
-
-    @media screen and (max-width: 600px) {
-        text-align: center;
-    }
-
-    p, .text-body {
-        color: $darkgray;
-        line-height: 32px;
-        margin: 0;
-        text-align: center;
-    }
-}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index a397b70782..1bb94dc4fb 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -5,7 +5,6 @@
    @import 'alert';
    @import 'api-pages';
    @import 'api-list';
-   @import 'banner';
    @import 'buttons';
    @import 'callout';
    @import 'card';
diff --git a/aio/tools/transforms/angular-api-package/index.js b/aio/tools/transforms/angular-api-package/index.js
index 289db0f15b..b4728d01ce 100644
--- a/aio/tools/transforms/angular-api-package/index.js
+++ b/aio/tools/transforms/angular-api-package/index.js
@@ -15,6 +15,7 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
 
   // Register the processors
   .processor(require('./processors/migrateLegacyJSDocTags'))
+  .processor(require('./processors/splitDescription'))
   .processor(require('./processors/convertPrivateClassesToInterfaces'))
   .processor(require('./processors/generateApiListDoc'))
   .processor(require('./processors/addNotYetDocumentedProperty'))
@@ -91,6 +92,10 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
         parseTagsProcessor.tagDefinitions.concat(getInjectables(requireFolder(__dirname, './tag-defs')));
   })
 
+  .config(function(splitDescription, EXPORT_DOC_TYPES) {
+    // Only split the description on the API docs
+    splitDescription.docTypes = EXPORT_DOC_TYPES;
+  })
 
   .config(function(computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc) {
 
diff --git a/aio/tools/transforms/angular-api-package/processors/splitDescription.js b/aio/tools/transforms/angular-api-package/processors/splitDescription.js
new file mode 100644
index 0000000000..d2f86ac794
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/splitDescription.js
@@ -0,0 +1,28 @@
+/**
+ * Split the descripton (of selected docs) into:
+ * * `shortDescription`: the first paragraph
+ * * `description`: the rest of the paragraphs
+ */
+module.exports = function splitDescription() {
+  return {
+    $runAfter: ['tags-extracted', 'migrateLegacyJSDocTags'],
+    $runBefore: ['processing-docs'],
+    docTypes: [],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (this.docTypes.indexOf(doc.docType) !== -1 && doc.description !== undefined) {
+          const description = doc.description.trim();
+          const endOfParagraph = description.search(/\n\s*\n/);
+          if (endOfParagraph === -1) {
+            doc.shortDescription = description;
+            doc.description = '';
+          } else {
+            doc.shortDescription = description.substr(0, endOfParagraph).trim();
+            doc.description = description.substr(endOfParagraph).trim();
+          }
+        }
+      });
+    }
+  };
+};
+
diff --git a/aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js b/aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js
new file mode 100644
index 0000000000..90b3b6b92b
--- /dev/null
+++ b/aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js
@@ -0,0 +1,71 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./splitDescription');
+const Dgeni = require('dgeni');
+
+describe('splitDescription processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('splitDescription');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['processing-docs']);
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['tags-extracted', 'migrateLegacyJSDocTags']);
+  });
+
+  it('should split the `description` property into the first paragraph and other paragraphs', () => {
+    const processor = processorFactory();
+    processor.docTypes = ['test'];
+    const docs = [
+      { docType: 'test' },
+      { docType: 'test', description: '' },
+      { docType: 'test', description: 'abc' },
+      { docType: 'test', description: 'abc\n' },
+      { docType: 'test', description: 'abc\n\n' },
+      { docType: 'test', description: 'abc\ncde' },
+      { docType: 'test', description: 'abc\ncde\n' },
+      { docType: 'test', description: 'abc\n\ncde' },
+      { docType: 'test', description: 'abc\n  \ncde' },
+      { docType: 'test', description: 'abc\n\n\ncde' },
+      { docType: 'test', description: 'abc\n\ncde\nfgh' },
+      { docType: 'test', description: 'abc\n\ncde\n\nfgh' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { docType: 'test' },
+      { docType: 'test', shortDescription: '', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc\ncde', description: '' },
+      { docType: 'test', shortDescription: 'abc\ncde', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde\nfgh' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde\n\nfgh' },
+    ]);
+  });
+
+  it('should ignore docs that do not match the specified doc types', () => {
+    const processor = processorFactory();
+    processor.docTypes = ['test'];
+    const docs = [
+      { docType: 'test', description: 'abc\n\ncde' },
+      { docType: 'other', description: 'abc\n\ncde' }
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'other', description: 'abc\n\ncde' }
+    ]);
+  });
+});
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/class.template.html b/aio/tools/transforms/templates/api/class.template.html
index 8367ca78fd..60445b3372 100644
--- a/aio/tools/transforms/templates/api/class.template.html
+++ b/aio/tools/transforms/templates/api/class.template.html
@@ -4,7 +4,7 @@
 {% extends 'base.template.html' -%}
 
 {% block body %}
-  <p>{$ doc.whatItDoes | marked $}</p>
+  <p class="short-description">{$ doc.shortDescription | marked $}</p>
   {% include "includes/security-notes.html" %}
   {% include "includes/deprecation.html" %}
   {% block overview %}
@@ -25,5 +25,5 @@
 
     {% block annotations %}{% include "includes/annotations.html" %}{% endblock %}
   {% endblock %}
-  {% include "includes/how-to-use.html" %}
+  {% include "includes/usageNotes.html" %}
 {% endblock %}
diff --git a/aio/tools/transforms/templates/api/export-base.template.html b/aio/tools/transforms/templates/api/export-base.template.html
index f1d3c5be92..b2e24aa799 100644
--- a/aio/tools/transforms/templates/api/export-base.template.html
+++ b/aio/tools/transforms/templates/api/export-base.template.html
@@ -1,10 +1,10 @@
 {% extends 'base.template.html' -%}
 
 {% block body %}
-  {% include "includes/what-it-does.html" %}
+  <p class="short-description">{$ doc.shortDescription | marked $}</p>
   {% include "includes/security-notes.html" %}
   {% include "includes/deprecation.html" %}
   {% block overview %}{% endblock %}
-  {% include "includes/how-to-use.html" %}
+  {% include "includes/usageNotes.html" %}
   {% block details %}{% endblock %}
 {% endblock %}
diff --git a/aio/tools/transforms/templates/api/includes/class-overview.html b/aio/tools/transforms/templates/api/includes/class-overview.html
index fdb6d8393d..1bd48c0dca 100644
--- a/aio/tools/transforms/templates/api/includes/class-overview.html
+++ b/aio/tools/transforms/templates/api/includes/class-overview.html
@@ -1,7 +1,6 @@
 {% import "lib/memberHelpers.html" as memberHelper -%}
 
 <section class="{$ doc.docType $}-overview">
-<h2>Overview</h2>
 <code-example language="ts" hideCopy="true">
 {$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }
diff --git a/aio/tools/transforms/templates/api/includes/how-to-use.html b/aio/tools/transforms/templates/api/includes/how-to-use.html
deleted file mode 100644
index 13156b0b7a..0000000000
--- a/aio/tools/transforms/templates/api/includes/how-to-use.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% if doc.howToUse %}
-<section class="how-to-use">
-  <h2>How To Use</h2>
-  {$ doc.howToUse | marked $}
-</section>
-{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/usageNotes.html b/aio/tools/transforms/templates/api/includes/usageNotes.html
new file mode 100644
index 0000000000..88b2d89853
--- /dev/null
+++ b/aio/tools/transforms/templates/api/includes/usageNotes.html
@@ -0,0 +1,6 @@
+{% if doc.usageNotes %}
+<section class="usage-notes">
+  <h2>Usage Notes</h2>
+  {$ doc.usageNotes | marked $}
+</section>
+{% endif %}
diff --git a/aio/tools/transforms/templates/api/includes/what-it-does.html b/aio/tools/transforms/templates/api/includes/what-it-does.html
deleted file mode 100644
index b492b932a7..0000000000
--- a/aio/tools/transforms/templates/api/includes/what-it-does.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{%- if doc.whatItDoes %}
-<div class="what-it-does info-banner">
-  {$ doc.whatItDoes | marked $}
-</div>
-{% endif %}
\ No newline at end of file