diff --git a/docs/scss/style.scss b/docs/scss/style.scss
index ce5f2ba47..fb89b83b1 100644
--- a/docs/scss/style.scss
+++ b/docs/scss/style.scss
@@ -18,7 +18,7 @@ $secondary-fore-color: #444;
 $tertiary-fore-color: #222;
 $back-color: #fff;
 $secondary-back-color: #f0f0f0;
-$border-color: #fff;
+$border-color: #eee;
 $token-color-a-var: '--token-color-a';
 $token-color-b-var: '--token-color-b';
 $token-color-c-var: '--token-color-c';
@@ -242,8 +242,6 @@ pre {
   overflow: auto; // Responsiveness
   padding: calc(1.5 * var(#{$universal-padding-var}));
   margin: var(#{$universal-margin-var});
-
-  border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
   background: #263238;
   border: 0;
   color: #fafafa;
@@ -386,6 +384,7 @@ $grid-large-breakpoint: 768px;
 // Generic centered column
 .col-centered {
   grid-column: span 12;
+  max-width: 100%;
   @media screen and (min-width: #{$grid-medium-breakpoint}) {
     grid-column: 2/12;
   }
@@ -421,15 +420,76 @@ $grid-large-breakpoint: 768px;
 // TODO: Redesign cards from scratch
 
 .card {
+  position: relative;
   margin: var(#{$universal-margin-var});
+  border-radius: calc(4 * var(#{$universal-border-radius-var}));
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
   .section {
     &.card-content{
       padding: calc(1.5 * var(#{$universal-padding-var}));
     }
   }
+  pre.section {
+    &.card-code {
+      position: relative;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+    &.card-examples {
+      margin-top: 0;
+      border-radius: 0 0 calc(4 * var(#{$universal-border-radius-var})) calc(4 * var(#{$universal-border-radius-var}));
+      &:before {
+        content: 'Examples';
+        text-transform: uppercase;
+        display: block;
+        font-size: 0.75rem;
+        padding-bottom: calc(0.125 * var(#{$universal-padding-var}));
+        color: #607D8B;
+      }
+    }
+  }
+  h4 {
+    text-align: center;
+    padding-bottom: calc(0.75 * var(#{$universal-padding-var}));
+    margin-bottom: calc(2 * var(#{$universal-margin-var}));
+    border-bottom: $__1px solid var(#{$border-color-var});
+  }
+  .copy-button-container {
+    position: relative;
+    z-index: 2;
+    .copy-button {
+      background: #1E88E5;
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background-color:%231E88E5' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
+      background-position: center center;
+      background-repeat: no-repeat;
+      box-sizing: border-box;
+      padding: calc(2.5 * var(#{$universal-padding-var}));
+      border-radius: 50%;
+      position: absolute;
+      border: 0;
+      top: -1.75rem;
+      right: 0;
+      margin: calc(2 * var(#{$universal-margin-var}));
+      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+      &:before {
+        background: #fff;
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        content: '';
+        display: block;
+        box-sizing: border-box;
+        padding: calc(2.5 * var(#{$universal-padding-var}));
+        border-radius: 50%;
+        border: 4px solid #fff;
+        z-index: -1;
+      }
+    }
+  }
 }
 
+
 // TODO: Buttons and search form only
 // TODO: Top bar - header
 // TODO: Side bar - nav