diff --git a/docs/src/App.vue b/docs/src/App.vue
index 3e22d10..8bfcd4a 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -72,7 +72,7 @@
                 </md-list-item>
 
                 <md-list-item class="md-inset">
-                  <router-link exact to="/components/ripple">Ripple</router-link>
+                  <router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
                 </md-list-item>
 
                 <md-list-item class="md-inset">
diff --git a/docs/src/index.js b/docs/src/index.js
index 07d5b06..dd9d4ee 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -63,16 +63,16 @@ Docs = new Docs({
 
 handleSectionTheme(router.currentRoute);
 
-router.beforeEach((to, from, next) => {
-  let mainContent = document.querySelector('.main-content');
+router.afterEach((to) => {
+  Vue.nextTick(() => {
+    let mainContent = document.querySelector('.main-content');
 
-  if (mainContent) {
-    mainContent.scrollTop = 0;
-  }
+    if (mainContent) {
+      mainContent.scrollTop = 0;
+    }
 
-  Docs.closeSidenav();
+    Docs.closeSidenav();
 
-  handleSectionTheme(to);
-
-  next();
+    handleSectionTheme(to);
+  });
 });
diff --git a/docs/src/pages/components/InkRipple.vue b/docs/src/pages/components/InkRipple.vue
new file mode 100644
index 0000000..5b80de7
--- /dev/null
+++ b/docs/src/pages/components/InkRipple.vue
@@ -0,0 +1,269 @@
+<template>
+  <page-content page-title="Components - Ink Ripple">
+    <docs-component>
+      <div slot="description">
+        <p>Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.</p>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-ink-ripple">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-disabled</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Disable the ripple effect on the parent element. Default <code>false</code></md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="As a component">
+          <div slot="demo">
+            <div class="has-ripple">
+              <md-ink-ripple></md-ink-ripple>
+              This div has ripple effect
+            </div>
+
+            <div class="has-ripple purple">
+              <md-ink-ripple></md-ink-ripple>
+              This div has ripple effect
+            </div>
+
+            <div class="has-ripple blue">
+              <md-ink-ripple></md-ink-ripple>
+              This div has ripple effect
+            </div>
+
+            <div class="has-ripple red">
+              <md-ink-ripple></md-ink-ripple>
+              This div has ripple effect
+            </div>
+
+            <md-card class="card-ripple" md-with-hover>
+              <md-card-media>
+                <md-ink-ripple></md-ink-ripple>
+                <img src="assets/card-image-1.jpg" alt="People">
+              </md-card-media>
+
+              <md-card-actions>
+                <md-button class="md-icon-button">
+                  <md-icon>favorite</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button">
+                  <md-icon>bookmark</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button">
+                  <md-icon>share</md-icon>
+                </md-button>
+              </md-card-actions>
+            </md-card>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;has-ripple&quot;&gt;
+                &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+                This div has ripple effect
+              &lt;/div&gt;
+
+              &lt;div class=&quot;has-ripple purple&quot;&gt;
+                &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+                This div has ripple effect
+              &lt;/div&gt;
+
+              &lt;div class=&quot;has-ripple blue&quot;&gt;
+                &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+                This div has ripple effect
+              &lt;/div&gt;
+
+              &lt;div class=&quot;has-ripple red&quot;&gt;
+                &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+                This div has ripple effect
+              &lt;/div&gt;
+
+              &lt;md-card class=&quot;card-ripple&quot; md-with-hover&gt;
+                &lt;md-card-media&gt;
+                  &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+                  &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+                &lt;/md-card-media&gt;
+
+                &lt;md-card-actions&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;bookmark&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;share&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+                &lt;/md-card-actions&gt;
+              &lt;/md-card&gt;
+            </code-block>
+
+            <code-block lang="scss">
+              .has-ripple {
+                margin-bottom: 16px;
+                padding: 20px;
+                display: inline-block;
+                position: relative;
+              }
+
+              .blue {
+                color: #2196F3;
+              }
+
+              .purple {
+                color: #9C27B0;
+              }
+
+              .red {
+                color: #F44336;
+              }
+
+              .card-ripple {
+                width: 300px;
+                margin-top: 24px;
+              }
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="As a directive">
+          <div slot="demo">
+            <span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
+            <span class="has-ripple purple" v-md-ink-ripple>This span has ripple effect</span>
+            <span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
+            <span class="has-ripple red" v-md-ink-ripple>This span has ripple effect</span>
+
+            <md-card class="card-ripple" md-with-hover>
+              <md-card-media v-md-ink-ripple>
+                <img src="assets/card-image-1.jpg" alt="People">
+              </md-card-media>
+
+              <md-card-actions>
+                <md-button class="md-icon-button">
+                  <md-icon>favorite</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button">
+                  <md-icon>bookmark</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button">
+                  <md-icon>share</md-icon>
+                </md-button>
+              </md-card-actions>
+            </md-card>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;span class=&quot;has-ripple&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
+              &lt;span class=&quot;has-ripple purple&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
+              &lt;span class=&quot;has-ripple blue&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
+              &lt;span class=&quot;has-ripple red&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
+
+              &lt;div&gt;
+                &lt;md-avatar v-md-ink-ripple&gt;
+                  &lt;img src=&quot;//placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+                &lt;/md-avatar&gt;
+
+                &lt;md-avatar v-md-ink-ripple class=&quot;md-avatar-icon&quot;&gt;
+                  &lt;md-icon&gt;home&lt;/md-icon&gt;
+                &lt;/md-avatar&gt;
+              &lt;/div&gt;
+
+              &lt;md-card class=&quot;card-ripple&quot; md-with-hover&gt;
+                &lt;md-card-media v-md-ink-ripple&gt;
+                  &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+                &lt;/md-card-media&gt;
+
+                &lt;md-card-actions&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;bookmark&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+
+                  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                    &lt;md-icon&gt;share&lt;/md-icon&gt;
+                  &lt;/md-button&gt;
+                &lt;/md-card-actions&gt;
+              &lt;/md-card&gt;
+            </code-block>
+
+            <code-block lang="scss">
+              .has-ripple {
+                margin-bottom: 16px;
+                padding: 16px;
+                display: inline-block;
+                position: relative;
+              }
+
+              .blue {
+                color: #2196F3;
+              }
+
+              .purple {
+                color: #9C27B0;
+              }
+
+              .red {
+                color: #F44336;
+              }
+
+              .card-ripple {
+                width: 300px;
+                margin-top: 24px;
+              }
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+  .has-ripple {
+    margin-bottom: 16px;
+    padding: 20px;
+    display: inline-block;
+    position: relative;
+  }
+
+  .blue {
+    color: #2196F3;
+  }
+
+  .purple {
+    color: #9C27B0;
+  }
+
+  .red {
+    color: #F44336;
+  }
+
+  .card-ripple {
+    width: 300px;
+    margin-top: 24px;
+  }
+</style>
diff --git a/docs/src/pages/components/Ripple.vue b/docs/src/pages/components/Ripple.vue
deleted file mode 100644
index 5f59590..0000000
--- a/docs/src/pages/components/Ripple.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <demo-page label="Components - Ripple">
-    <div slot="examples">
-      <demo-example label="Default">
-        <span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
-        <span class="has-ripple green" v-md-ink-ripple>This span has ripple effect</span>
-        <span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
-
-        <div>
-          <md-avatar v-md-ink-ripple>
-            <img src="//placeimg.com/40/40/people/1" alt="People">
-          </md-avatar>
-
-          <md-avatar v-md-ink-ripple class="md-avatar-icon">
-            <md-icon>home</md-icon>
-          </md-avatar>
-        </div>
-      </demo-example>
-    </div>
-
-    <div slot="code">
-      <demo-example label="Default">
-        <code-block lang="xml">
-&lt;span class=&quot;has-ripple&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
-&lt;span class=&quot;has-ripple green&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
-&lt;span class=&quot;has-ripple blue&quot; v-md-ink-ripple&gt;This span has ripple effect&lt;/span&gt;
-
-&lt;div&gt;
-  &lt;md-avatar v-md-ink-ripple&gt;
-    &lt;img src=&quot;//placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
-  &lt;/md-avatar&gt;
-
-  &lt;md-avatar v-md-ink-ripple class=&quot;md-avatar-icon&quot;&gt;
-    &lt;md-icon&gt;home&lt;/md-icon&gt;
-  &lt;/md-avatar&gt;
-&lt;/div&gt;
-        </code-block>
-      </demo-example>
-    </div>
-
-    <div slot="api">
-
-    </div>
-  </demo-page>
-</template>
-
-<style lang="scss" scoped>
-  .has-ripple {
-    margin-bottom: 16px;
-    padding: 16px;
-    position: relative;
-  }
-
-  span {
-    display: inline-block;
-  }
-
-  .blue {
-    color: #2196F3;
-  }
-
-  .green {
-    color: #4CAF50;
-  }
-</style>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index 11150a0..31898f5 100644
--- a/docs/src/routes.js
+++ b/docs/src/routes.js
@@ -18,7 +18,7 @@ import Input from './pages/components/Input';
 import List from './pages/components/List';
 import Menu from './pages/components/Menu';
 import Radio from './pages/components/Radio';
-import Ripple from './pages/components/Ripple';
+import InkRipple from './pages/components/InkRipple';
 import Select from './pages/components/Select';
 import Sidenav from './pages/components/Sidenav';
 import Subheader from './pages/components/Subheader';
@@ -127,9 +127,9 @@ const components = [
     component: Radio
   },
   {
-    path: '/components/ripple',
-    name: 'components:ripple',
-    component: Ripple
+    path: '/components/ink-ripple',
+    name: 'components:ink-ripple',
+    component: InkRipple
   },
   {
     path: '/components/select',