diff --git a/aio/src/app/embedded/code/code-example.component.ts b/aio/src/app/embedded/code/code-example.component.ts
index 8017cc8b89..baf9900c57 100644
--- a/aio/src/app/embedded/code/code-example.component.ts
+++ b/aio/src/app/embedded/code/code-example.component.ts
@@ -16,7 +16,7 @@ import { Component, ElementRef, OnInit } from '@angular/core';
   selector: 'code-example',
   template: `
     <header *ngIf="title">{{title}}</header>
-    <aio-code [code]="code" [language]="language" [linenums]="linenums"></aio-code>
+    <aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code" [language]="language" [linenums]="linenums"></aio-code>
   `
 })
 export class CodeExampleComponent implements OnInit { // implements AfterViewInit {
diff --git a/aio/src/app/embedded/code/code.component.spec.ts b/aio/src/app/embedded/code/code.component.spec.ts
index f185be9768..86efc25b22 100644
--- a/aio/src/app/embedded/code/code.component.spec.ts
+++ b/aio/src/app/embedded/code/code.component.spec.ts
@@ -165,7 +165,7 @@ describe('CodeComponent', () => {
 @Component({
   selector: 'aio-host-comp',
   template: `
-      <aio-code [code]="code" [language]="language" [linenums]="linenums"></aio-code>
+      <aio-code md-no-ink [code]="code" [language]="language" [linenums]="linenums"></aio-code>
   `
 })
 class HostComponent {
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index eaff21db2f..f561d08c7a 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -26,7 +26,7 @@ code-example header {
   color: $offwhite;
   font-size: 16px;
   padding: 10px;
-  margin: -10px;
+  margin: -17px;
 }
 
 code-example.is-anti-pattern header {
@@ -57,7 +57,7 @@ aio-code pre {
     white-space: pre-wrap;
 
     code span, code ol li {
-      line-height: 18px;
+      line-height: 24px;
     }
 }
 
@@ -72,6 +72,12 @@ code ol {
   }
 }
 
+aio-code.headed-code {
+  pre.prettyprint {
+    margin-top: 32px;
+  }
+}
+
 .code-missing {
   color: $darkred;
 }
@@ -87,6 +93,7 @@ code ol {
   &:hover {
     color: $mediumgray;
   }
+  
   @media (max-width: 480px) {
     top: 0;
     bottom: 0;
@@ -102,6 +109,7 @@ code ol {
 
 .code-tab-group div.mat-tab-body-content {
   height: auto;
+  transform: none;
 }
 
 $blue-grey-50: #ECEFF1;
@@ -175,41 +183,50 @@ code-example.code-shell, code-example[language=sh], code-example[language=bash]
 /* PRINT COLORS */
 
 
-  @media print {
-    border: none;
-    box-shadow: none;
+@media print {
+  border: none;
+  box-shadow: none;
 
-    ol {
-      background: $white;
-    }
-
-    .kwd {
-      color: $darkgray;
-    }
-    .typ,
-    .tag {
-      color: $darkred;
-    }
-    .str,
-    .atv {
-      color: $blue;
-    }
-    .atn {
-      color: $blue;
-    }
-    .com {
-      color: $mediumgray;
-    }
-    .lit {
-      color: $blue;
-    }
-    .pun {
-      color: $blue-grey-700;
-    }
-    .pln {
-      color: $green-800;
-    }
-    .dec {
-      color: $blue;
-    }
+  ol {
+    background: $white;
   }
+
+  .kwd {
+    color: $darkgray;
+  }
+  .typ,
+  .tag {
+    color: $darkred;
+  }
+  .str,
+  .atv {
+    color: $blue;
+  }
+  .atn {
+    color: $blue;
+  }
+  .com {
+    color: $mediumgray;
+  }
+  .lit {
+    color: $blue;
+  }
+  .pun {
+    color: $blue-grey-700;
+  }
+  .pln {
+    color: $green-800;
+  }
+  .dec {
+    color: $blue;
+  }
+}
+
+// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
+code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-list, code-tabs md-tab-gropu *.mat-tab-body-content {
+  transform: none !important;
+}
+
+[role="tabpanel"] {
+    transition: none;
+}
\ No newline at end of file