diff --git a/elements/context-free-parser.html b/elements/context-free-parser.html
index 579f2f8..d2a6324 100644
--- a/elements/context-free-parser.html
+++ b/elements/context-free-parser.html
@@ -69,13 +69,15 @@
                 break;
               
               case 'attribute':
+              case 'property':
               case 'method':
               case 'event':
                 subCurrent = {
                   name: content,
                   description: code
                 };
-                makePragma(current, pragma + 's', subCurrent);
+                var label = pragma == 'property' ? 'properties' : pragma + 's';
+                makePragma(current, label, subCurrent);
                 break;
 
               case 'default':
@@ -101,8 +103,8 @@
 
         });
 
-        if (classes.length === 0) {
-          classes.push({name: this.url.split('/').pop(), description: '**Undocumented**'});
+        if (classes.length === 0) {
+          classes.push({name: this.url.split('/').pop(), description: '**Undocumented**'});
         }
         this.data = { classes : classes };
       },
diff --git a/elements/core-doc-page.css b/elements/core-doc-page.css
index 2e80ce7..b784387 100644
--- a/elements/core-doc-page.css
+++ b/elements/core-doc-page.css
@@ -1,161 +1,179 @@
-:host {
-  display: block;
-  position: relative;
-}
-
-#panel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.main {
-  padding: 0 72px;
-  max-width: 832px;
-  margin: 0 auto;
-}
-
-markedjs-element {
-  display: block;
-}
-
-h1 {
-  font-size: 52px;
-  color: #E91E63
-}
-
-.element {
-  font-size: 21px;
-}
-
-.name {
-  /* typography */
-  color: white;
-  /* font-size: 14px; */
-  font-size: 12px;
-  font-weight: bold;
-  text-decoration: none;
-  /* colors / effects */
-  background-color: #999;
-  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  cursor: pointer;
-  /* metrics */
-  display: inline-block;
-  padding: 4px 12px 5px 12px;
-  margin: 4px 0;
-}
-
-.ntitle {
-  font-size: 26px;
-}
-
-.box {
-  margin-bottom: 40px;
-}
-
-.top pre {
-  padding: 12px 13px;
-  background-color: #f8f8f8;
-}
-
-code {
-  font-family: Consolas, monospace;
-  border: 1px solid #ddd;
-  background-color: #f8f8f8;
-  border-radius: 3px;
-  padding: 0 3px;
-}
-
-pre code {
-  max-width: 832px;
-  white-space: pre-wrap;
-  overflow: hidden;
-  border: none;
-}
-
-/**/
-
-.details-name {
-  display: inline-block; 
-  vertical-align: top;
-  width: 190px;
-}
-
-.details-info {
-  display: inline-block;
-  max-width: 540px;
-}
-
-.attribute-box {
-}
-
-.attribute-box .details {
-  background-color: #FFF9C4;
-  padding: 8px 16px;
-  border-bottom: 1px solid #D1CCA1;
-}
-
-.attribute-box .ntitle {
-  padding: 24px 16px;
-}
-
-.attribute-box code {
-  color: #FFAB40;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
-}
-
-.method-box {
-}
-
-.method-box .details {
-  background-color: #F0F4C3;
-  padding: 8px 16px;
-  border-bottom: 1px solid #D1CCA1;
-}
-
-.method-box .ntitle {
-  background-color: #9E9D24;
-  padding: 24px 16px;
-}
-
-.method-box code {
-  color: #9E9D24;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
-}
-
-.event-box {
-}
-
-.event-box .details {
-  background-color: #B2DFDB;
-  padding: 8px 16px;
-  border-bottom: 1px solid #92B7B3;
-}
-
-.event-box .ntitle {
-  background-color: #009688;
-  padding: 24px 16px;
-}
-
-.event-box code {
-  color: #009688;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
-}
-
-
+:host {
+  display: block;
+  position: relative;
+}
+
+#panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.main {
+  padding: 0 72px;
+  max-width: 832px;
+  margin: 0 auto;
+}
+
+markedjs-element {
+  display: block;
+}
+
+h1 {
+  font-size: 52px;
+  color: #E91E63
+}
+
+.element {
+  font-size: 21px;
+}
+
+.name {
+  /* typography */
+  color: white;
+  /* font-size: 14px; */
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  /* colors / effects */
+  background-color: #999;
+  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  cursor: pointer;
+  /* metrics */
+  display: inline-block;
+  padding: 4px 12px 5px 12px;
+  margin: 4px 0;
+}
+
+.ntitle {
+  font-size: 26px;
+}
+
+.box {
+  margin-bottom: 40px;
+}
+
+.top pre {
+  padding: 12px 13px;
+  background-color: #f8f8f8;
+}
+
+code {
+  font-family: Consolas, monospace;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  border-radius: 3px;
+  padding: 0 3px;
+}
+
+pre code {
+  max-width: 832px;
+  white-space: pre-wrap;
+  overflow: hidden;
+  border: none;
+}
+
+/**/
+
+.details-name {
+  display: inline-block; 
+  vertical-align: top;
+  width: 190px;
+}
+
+.details-info {
+  display: inline-block;
+  max-width: 540px;
+}
+
+.attribute-box {
+}
+
+.attribute-box .details {
+  background-color: #FFF9C4;
+  padding: 8px 16px;
+  border-bottom: 1px solid #D1CCA1;
+}
+
+.attribute-box .ntitle {
+  padding: 24px 16px;
+}
+
+.attribute-box code {
+  color: #FFAB40;
+  border: none;
+  background-color: transparent;
+  border-radius: none;
+  padding: 0;
+  font-size: 1.2em;
+}
+
+.property-box .ntitle {
+  padding: 24px 16px;
+}
+
+.property-box code {
+  color: #4285F4;
+  border: none;
+  background-color: transparent;
+  border-radius: none;
+  padding: 0;
+  font-size: 1.2em;
+}
+
+.property-box .details {
+  background-color: lightblue;
+  padding: 8px 16px;
+  border-bottom: 1px solid #D1CCA1;
+}
+
+.method-box {
+}
+
+.method-box .details {
+  background-color: #F0F4C3;
+  padding: 8px 16px;
+  border-bottom: 1px solid #D1CCA1;
+}
+
+.method-box .ntitle {
+  background-color: #9E9D24;
+  padding: 24px 16px;
+}
+
+.method-box code {
+  color: #9E9D24;
+  border: none;
+  background-color: transparent;
+  border-radius: none;
+  padding: 0;
+  font-size: 1.2em;
+}
+
+.event-box {
+}
+
+.event-box .details {
+  background-color: #B2DFDB;
+  padding: 8px 16px;
+  border-bottom: 1px solid #92B7B3;
+}
+
+.event-box .ntitle {
+  background-color: #009688;
+  padding: 24px 16px;
+}
+
+.event-box code {
+  color: #009688;
+  border: none;
+  background-color: transparent;
+  border-radius: none;
+  padding: 0;
+  font-size: 1.2em;
+}
+
diff --git a/elements/core-doc-page.html b/elements/core-doc-page.html
index a835ab6..c078141 100644
--- a/elements/core-doc-page.html
+++ b/elements/core-doc-page.html
@@ -1,141 +1,158 @@
-<link rel="import" href="../../core-layout/core-layout.html">
-<link rel="import" href="../../core-icons/core-icons.html">
-<link rel="import" href="../../core-icon-button/core-icon-button.html">
-<link rel="import" href="../../core-toolbar/core-toolbar.html">
-<link rel="import" href="../../core-header-panel/core-header-panel.html">
-<link rel="import" href="../../marked-element/marked-element.html">
-<link rel="import" href="../../highlightjs-element/highlightjs-element.html">
-
-<link rel="import" href="context-free-parser.html">
-
-<!--
-
-Displays formatted source documentation scraped from input urls.
-
-@class core-doc-page
--->
-
-<polymer-element name="core-doc-page" attributes="data">
-
-<!--
-
-Set url to add documentation from that location to the view.
-
-@attribute url
-@type String
--->
-
-  <template>
-
-    <link rel="stylesheet" href="../../highlightjs/styles/default.css">
-    <link rel="stylesheet" href="core-doc-page.css">
-
-    <core-header-panel id="panel" mode="waterfall">
-
-      <!--<core-toolbar>
-        <span style="margin: 0 72px;">{{data.name}}</span>
-      </core-toolbar>-->
-
-      <div class="main" on-marked-js-highlight="{{hilight}}">
-
-        <h1 style="font-size: 52px; color: #E91E63;">
-          {{data.name}}
-        </h1>
-
-        <p>
-          <core-icon icon="home" style="vertical-align: middle;"></core-icon>&nbsp;<a href="{{data | homepageFilter}}">Home Page</a>
-        </p>
-
-        <template if="{{data.extends}}">
-          <section class="box">
-            <div class="ntitle">Extends</div>
-            <a href="#{{data.extends}}">{{data.extends}}</a>
-          </section>
-        </template>
-
-        <template if="{{data.description}}">
-          <section class="box top">
-            <div class="ntitle">Summary</div>
-            <marked-element text="{{data.description}}"></marked-element>
-          </section>
-        </template>
-
-        <template if="{{data.attributes.length}}">
-          <section class="box attribute-box">
-            <div class="ntitle" style="background-color: #FFAB40; color: white;">Attributes</div>
-            <template repeat="{{data.attributes}}">
-              <div class="details">
-                <div class="details-name">
-                  <p><code>{{name}}</code></p>
-                </div>
-                <div class="details-info">
-                  <p><code>{{type}}</code></p>
-                  <marked-element text="{{description}}"></marked-element>
-                </div>
-              </div>
-            </template>
-          </section>
-        </template>
-
-        <template if="{{data.events.length}}">
-          <section class="box event-box">
-            <div class="ntitle" style="color: white;">Events</div>
-            <template repeat="{{data.events}}">
-              <div class="details">
-                <div class="details-name">
-                  <p><code>{{name}}</code></p>
-                </div>
-                <div class="details-info">
-                  <marked-element text="{{description}}"></marked-element>
-                </div>
-              </div>
-            </template>
-          </section>
-        </template>
-
-        <template if="{{data.methods.length}}">
-          <section class="box method-box">
-            <div class="ntitle" style="color: white;">Methods</div>
-            <template repeat="{{data.methods}}">
-              <div class="details">
-                <div class="details-name">
-                  <p><code>{{name}}</code></p>
-                </div>
-                <div class="details-info">
-                  <marked-element text="{{description}}"></marked-element>
-                </div>
-              </div>
-            </template>
-          </section>
-        </template>
-
-      </div>
-
-    </core-header-panel>
-
-  </template>
-
-  <script>
-
-    Polymer('core-doc-page', {
-
-      hilight: function(event, detail, sender) {
-        detail.code = hljs.highlightAuto(detail.code).value;
-      },
-
-      homepageFilter: function(data) {
-        if (!data) {
-          return '';
-        }
-        if (!data.homepage || data.homepage === 'github.io') {
-          return '//polymer.github.io/' + data.name;
-        } else {
-          return data.homepage;
-        }
-      }
-
-    });
-
-  </script>
-
-</polymer-element>
+<link rel="import" href="../../core-layout/core-layout.html">
+<link rel="import" href="../../core-icons/core-icons.html">
+<link rel="import" href="../../core-icon-button/core-icon-button.html">
+<link rel="import" href="../../core-toolbar/core-toolbar.html">
+<link rel="import" href="../../core-header-panel/core-header-panel.html">
+<link rel="import" href="../../marked-element/marked-element.html">
+<link rel="import" href="../../highlightjs-element/highlightjs-element.html">
+
+<link rel="import" href="context-free-parser.html">
+
+<!--
+
+Displays formatted source documentation scraped from input urls.
+
+@class core-doc-page
+-->
+
+<polymer-element name="core-doc-page" attributes="data">
+
+<!--
+
+Set url to add documentation from that location to the view.
+
+@attribute url
+@type String
+-->
+
+  <template>
+
+    <link rel="stylesheet" href="../../highlightjs/styles/default.css">
+    <link rel="stylesheet" href="core-doc-page.css">
+
+    <core-header-panel id="panel" mode="waterfall">
+
+      <!--<core-toolbar>
+        <span style="margin: 0 72px;">{{data.name}}</span>
+      </core-toolbar>-->
+
+      <div class="main" on-marked-js-highlight="{{hilight}}">
+
+        <h1 style="font-size: 52px; color: #E91E63;">
+          {{data.name}}
+        </h1>
+
+        <p>
+          <core-icon icon="home" style="vertical-align: middle;"></core-icon>&nbsp;<a href="{{data | homepageFilter}}">Home Page</a>
+        </p>
+
+        <template if="{{data.extends}}">
+          <section class="box">
+            <div class="ntitle">Extends</div>
+            <a href="#{{data.extends}}">{{data.extends}}</a>
+          </section>
+        </template>
+
+        <template if="{{data.description}}">
+          <section class="box top">
+            <div class="ntitle">Summary</div>
+            <marked-element text="{{data.description}}"></marked-element>
+          </section>
+        </template>
+
+        <template if="{{data.attributes.length}}">
+          <section class="box attribute-box">
+            <div class="ntitle" style="background-color: #FFAB40; color: white;">Attributes</div>
+            <template repeat="{{data.attributes}}">
+              <div class="details">
+                <div class="details-name">
+                  <p><code>{{name}}</code></p>
+                </div>
+                <div class="details-info">
+                  <p><code>{{type}}</code></p>
+                  <marked-element text="{{description}}"></marked-element>
+                </div>
+              </div>
+            </template>
+          </section>
+        </template>
+
+        <template if="{{data.properties.length}}">
+          <section class="box property-box">
+            <div class="ntitle" style="background-color: #4285F4; color: white;">Properties</div>
+            <template repeat="{{data.properties}}">
+              <div class="details">
+                <div class="details-name">
+                  <p><code>{{name}}</code></p>
+                </div>
+                <div class="details-info">
+                  <p><code>{{type}}</code></p>
+                  <marked-element text="{{description}}"></marked-element>
+                </div>
+              </div>
+            </template>
+          </section>
+        </template>
+
+        <template if="{{data.events.length}}">
+          <section class="box event-box">
+            <div class="ntitle" style="color: white;">Events</div>
+            <template repeat="{{data.events}}">
+              <div class="details">
+                <div class="details-name">
+                  <p><code>{{name}}</code></p>
+                </div>
+                <div class="details-info">
+                  <marked-element text="{{description}}"></marked-element>
+                </div>
+              </div>
+            </template>
+          </section>
+        </template>
+
+        <template if="{{data.methods.length}}">
+          <section class="box method-box">
+            <div class="ntitle" style="color: white;">Methods</div>
+            <template repeat="{{data.methods}}">
+              <div class="details">
+                <div class="details-name">
+                  <p><code>{{name}}</code></p>
+                </div>
+                <div class="details-info">
+                  <marked-element text="{{description}}"></marked-element>
+                </div>
+              </div>
+            </template>
+          </section>
+        </template>
+
+      </div>
+
+    </core-header-panel>
+
+  </template>
+
+  <script>
+
+    Polymer('core-doc-page', {
+
+      hilight: function(event, detail, sender) {
+        detail.code = hljs.highlightAuto(detail.code).value;
+      },
+
+      homepageFilter: function(data) {
+        if (!data) {
+          return '';
+        }
+        if (!data.homepage || data.homepage === 'github.io') {
+          return '//polymer.github.io/' + data.name;
+        } else {
+          return data.homepage;
+        }
+      }
+
+    });
+
+  </script>
+
+</polymer-element>
\ No newline at end of file