diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md
index e83872b849f9e7bcb01ffd042324d6f6340a4cd2..4a6f33dd0dd3974fd445461698203b285678e2d8 100644
--- a/pages/_docs/cards.md
+++ b/pages/_docs/cards.md
@@ -83,7 +83,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
     </div>
 </div>
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 ## Post card with aside image
 
@@ -92,7 +92,7 @@ You can also add the image on the left side of the card. All you need do to is:
 {% capture code %}
 {% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 ## Color variations
 
@@ -106,19 +106,19 @@ You can also add the image on the left side of the card. All you need do to is:
     </div>
 </div>
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 ## Stacked card
 
 {% capture code %}
 {% include cards/card.html class="card-stacked" title="Stacked card" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
 ## Tabbed card
 
 {% capture code %}
 {% include cards/card-tabs.html count=4 %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
diff --git a/pages/_includes/example.html b/pages/_includes/example.html
index 9eb53fc8fbd10d3166b8178a7002509c2102fcc3..2d5b069d4ebcc44245f2b36a838a88f8a7809872 100644
--- a/pages/_includes/example.html
+++ b/pages/_includes/example.html
@@ -16,6 +16,8 @@
 {% assign code = code | replace_regex: "\n\n+", new_line %}
 {% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
 {% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
+{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
+{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
 {% assign code = code | htmlbeautifier %}
 
 <div class="example-code">
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9027fb0e8012a6b69f341b0a39ff0a6904ff0954..b6d2895ac541330f58230bd3406b0a122288d585 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -55,7 +55,7 @@ $white: #ffffff !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted-opacity: .64 !default;
+$text-muted-opacity: .60 !default;
 $text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
 $border-color: rgba($text-muted, .24) !default;
 
diff --git a/scss/demo/_examples.scss b/scss/demo/_examples.scss
index 707c71c86e05e82a6341bb770255b22ac67c22b6..423f2e07b53ee27a65ee547944a80afbb9bcc242 100644
--- a/scss/demo/_examples.scss
+++ b/scss/demo/_examples.scss
@@ -21,6 +21,7 @@
   font-size: $font-size-base;
   color: $body-color;
   flex: 1;
+  max-width: 100%;
 }
 
 .example-bg {