From bd7468de4e725be2cf0e02820b77eec0af7e0bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= <displaynone@gmail.com>
Date: Mon, 2 Oct 2017 22:15:08 +0200
Subject: [PATCH] kss - adding new section Demos

---
 doc/kss/templates/default/index.hbs           | 13 ++++++
 doc/kss/templates/default/kss-assets/kss.css  | 16 +++++--
 doc/kss/templates/default/kss-assets/kss.scss | 20 +++++++--
 doc/kss/templates/default/kss-extend/demos.js | 20 +++++++++
 .../item-architecture-alignment.html          |  1 +
 .../item-architecture-background.html         |  1 +
 ...tem-architecture-backgrounds-gradient.html |  1 +
 ...-architecture-backgrounds-transparent.html |  1 +
 .../item-architecture-backgrounds.html        |  1 +
 doc/styleguide/item-architecture-buttons.html |  1 +
 doc/styleguide/item-architecture-columns.html |  1 +
 doc/styleguide/item-architecture-context.html |  1 +
 doc/styleguide/item-architecture-data.html    |  1 +
 doc/styleguide/item-architecture-emoji.html   |  1 +
 .../item-architecture-forms-user.html         |  1 +
 doc/styleguide/item-architecture-forms.html   |  1 +
 doc/styleguide/item-architecture-grid.html    |  1 +
 doc/styleguide/item-architecture-info.html    |  1 +
 .../item-architecture-interviews.html         |  1 +
 doc/styleguide/item-architecture-intro.html   |  1 +
 doc/styleguide/item-architecture-label.html   |  1 +
 .../item-architecture-landings.html           |  1 +
 .../item-architecture-lowercase.html          |  1 +
 .../item-architecture-navigation.html         |  1 +
 .../item-architecture-pull_quote.html         |  1 +
 doc/styleguide/item-architecture-radius.html  |  1 +
 .../item-architecture-separator.html          |  1 +
 doc/styleguide/item-architecture-serif.html   |  1 +
 doc/styleguide/item-architecture-shadow.html  |  1 +
 doc/styleguide/item-architecture-sizes.html   |  1 +
 .../item-architecture-slides-bottom.html      |  1 +
 .../item-architecture-slides-top.html         |  1 +
 doc/styleguide/item-architecture-slides.html  |  1 +
 .../item-architecture-subtitle.html           |  1 +
 doc/styleguide/item-architecture-symbols.html |  1 +
 doc/styleguide/item-architecture-tables.html  |  1 +
 doc/styleguide/item-architecture-try.html     |  1 +
 .../item-architecture-uppercase.html          |  1 +
 doc/styleguide/item-architecture.html         |  1 +
 doc/styleguide/item-contents-activity.html    |  1 +
 doc/styleguide/item-contents-clients.html     |  1 +
 doc/styleguide/item-contents-features.html    |  1 +
 doc/styleguide/item-contents-flexblocks.html  |  1 +
 .../item-contents-gallery-overlay.html        |  1 +
 doc/styleguide/item-contents-gallery.html     |  1 +
 doc/styleguide/item-contents-metrics.html     |  1 +
 doc/styleguide/item-contents-plans.html       |  1 +
 doc/styleguide/item-contents-reasons.html     |  1 +
 doc/styleguide/item-contents-resume.html      |  1 +
 doc/styleguide/item-contents-specs.html       |  1 +
 doc/styleguide/item-contents-steps.html       |  1 +
 doc/styleguide/item-contents.html             |  1 +
 doc/styleguide/item-landings-cards.html       |  1 +
 doc/styleguide/item-landings-cites.html       |  1 +
 doc/styleguide/item-landings-cta-cover.html   |  1 +
 doc/styleguide/item-landings-cta.html         |  1 +
 doc/styleguide/item-landings-longform.html    |  1 +
 doc/styleguide/item-landings-quotes.html      |  1 +
 doc/styleguide/item-landings-toc.html         |  1 +
 doc/styleguide/item-landings.html             |  1 +
 doc/styleguide/item-media-avatars.html        | 36 ++++++++++-----
 .../item-media-background-anim.html           |  1 +
 .../item-media-background-video.html          |  1 +
 doc/styleguide/item-media-background.html     |  1 +
 doc/styleguide/item-media-badgets.html        |  1 +
 doc/styleguide/item-media-embed.html          |  1 +
 .../item-media-fullscreen-embed.html          |  1 +
 doc/styleguide/item-media-fullscreen.html     |  1 +
 doc/styleguide/item-media-screenshots.html    |  1 +
 doc/styleguide/item-media.html                |  1 +
 .../kss-assets/images/down_arrow.svg          | 35 ---------------
 doc/styleguide/kss-assets/images/up_arrow.svg | 35 ---------------
 doc/styleguide/kss-assets/kss.css             | 16 +++++--
 doc/styleguide/kss-assets/kss.scss            | 20 +++++++--
 doc/styleguide/section-architecture.html      | 38 ++++++++++++++++
 doc/styleguide/section-contents.html          | 13 ++++++
 doc/styleguide/section-landings.html          |  8 ++++
 doc/styleguide/section-media.html             | 45 ++++++++++++++-----
 kss-config.json                               |  8 ++++
 src/scss/modules/_avatars.scss                | 16 ++++---
 80 files changed, 290 insertions(+), 114 deletions(-)
 create mode 100644 doc/kss/templates/default/kss-extend/demos.js
 delete mode 100644 doc/styleguide/kss-assets/images/down_arrow.svg
 delete mode 100644 doc/styleguide/kss-assets/images/up_arrow.svg

diff --git a/doc/kss/templates/default/index.hbs b/doc/kss/templates/default/index.hbs
index a21f03b..6850d4b 100644
--- a/doc/kss/templates/default/index.hbs
+++ b/doc/kss/templates/default/index.hbs
@@ -108,6 +108,19 @@
           {{/if}}
         </div>
 
+        {{#if demos}}
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+            {{#Demos demos}}
+              <li>
+                <a href="{{demo.href}}" title="{{demo.title}}" target="_blank">{{demo.title}}</a>
+              </li>
+            {{/Demos}}
+          </ul>
+        {{/if}}
+
         {{#if example}}
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css
index 3934373..f310e70 100644
--- a/doc/kss/templates/default/kss-assets/kss.css
+++ b/doc/kss/templates/default/kss-assets/kss.css
@@ -537,6 +537,14 @@
       margin: 0;
       min-height: 24px;
       padding: 0 10px; }
+  #kss-node .kss__demos {
+    list-style: none; }
+    #kss-node .kss__demos li {
+      margin-left: 0; }
+    #kss-node .kss__demos a {
+      color: #d1783e;
+      font-size: 13.33333px;
+      font-weight: bold; }
 
 .kss-container {
   display: grid;
@@ -576,19 +584,19 @@
 #kssref-layout-radius .radius {
   padding: 2.4rem; }
 
-#kssref-base-backgrounds span[class*='bg'] {
+#kssref-architecture-backgrounds span[class*='bg'] {
   display: inline-block;
   margin-left: -4px;
   padding: 1.2rem; }
 
-#kssref-base-backgrounds-transparent div[class*='bg'] {
+#kssref-architecture-backgrounds-transparent div[class*='bg'] {
   margin: 0;
   padding: 2rem; }
-  #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
+  #kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
     margin: 3rem;
     padding: 6rem; }
 
-#kssref-base-backgrounds-gradient div[class*='bg'] {
+#kssref-architecture-backgrounds-gradient div[class*='bg'] {
   margin: 3rem;
   padding: 4rem; }
 
diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss
index 1453c41..4f1275f 100644
--- a/doc/kss/templates/default/kss-assets/kss.scss
+++ b/doc/kss/templates/default/kss-assets/kss.scss
@@ -865,6 +865,20 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
       padding: 0 10px;
     }
   }
+
+  .kss__demos {
+    list-style: none;
+
+    li {
+      margin-left: 0;
+    }
+
+    a {
+      color: $kss-colors-link-active;
+      font-size: $kss-font-size / 1.2;
+      font-weight: bold;
+    }
+  }
 }
 
 .kss-container {
@@ -924,7 +938,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds {
+#kssref-architecture-backgrounds {
   & span[class*='bg'] {
     display: inline-block;
     margin-left: -4px;
@@ -932,7 +946,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-transparent {
+#kssref-architecture-backgrounds-transparent {
   & div[class*='bg'] {
     margin: 0;
     padding: 2rem;
@@ -944,7 +958,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-gradient {
+#kssref-architecture-backgrounds-gradient {
   & div[class*='bg'] {
     margin: 3rem;
     padding: 4rem;
diff --git a/doc/kss/templates/default/kss-extend/demos.js b/doc/kss/templates/default/kss-extend/demos.js
new file mode 100644
index 0000000..94af5b5
--- /dev/null
+++ b/doc/kss/templates/default/kss-extend/demos.js
@@ -0,0 +1,20 @@
+
+module.exports = function (Handlebars) {
+  'use strict';
+
+  Handlebars.registerHelper('Demos', function (doc, block) {
+    var accum = '';
+    var regex = /^\[([^\]]+)\]\(([^\)]+)\)$/gm;
+    var test;
+
+    while ((test = regex.exec(doc)) !== null) {
+      this.demo = {};
+      this.demo.title = test[1];
+      this.demo.href = test[2];
+
+      accum += block.fn(this);
+    }
+
+    return accum;
+  });
+};
diff --git a/doc/styleguide/item-architecture-alignment.html b/doc/styleguide/item-architecture-alignment.html
index 8bcb45a..16e229b 100644
--- a/doc/styleguide/item-architecture-alignment.html
+++ b/doc/styleguide/item-architecture-alignment.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-background.html b/doc/styleguide/item-architecture-background.html
index 0713dc1..593aef4 100644
--- a/doc/styleguide/item-architecture-background.html
+++ b/doc/styleguide/item-architecture-background.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-backgrounds-gradient.html b/doc/styleguide/item-architecture-backgrounds-gradient.html
index 627b416..bb4d87a 100644
--- a/doc/styleguide/item-architecture-backgrounds-gradient.html
+++ b/doc/styleguide/item-architecture-backgrounds-gradient.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-backgrounds-transparent.html b/doc/styleguide/item-architecture-backgrounds-transparent.html
index c7bfc5b..d730368 100644
--- a/doc/styleguide/item-architecture-backgrounds-transparent.html
+++ b/doc/styleguide/item-architecture-backgrounds-transparent.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-backgrounds.html b/doc/styleguide/item-architecture-backgrounds.html
index 45e4296..130baa8 100644
--- a/doc/styleguide/item-architecture-backgrounds.html
+++ b/doc/styleguide/item-architecture-backgrounds.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-buttons.html b/doc/styleguide/item-architecture-buttons.html
index 797e7c6..546f291 100644
--- a/doc/styleguide/item-architecture-buttons.html
+++ b/doc/styleguide/item-architecture-buttons.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-columns.html b/doc/styleguide/item-architecture-columns.html
index bfca1d4..c101815 100644
--- a/doc/styleguide/item-architecture-columns.html
+++ b/doc/styleguide/item-architecture-columns.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-context.html b/doc/styleguide/item-architecture-context.html
index a46c795..4d7097e 100644
--- a/doc/styleguide/item-architecture-context.html
+++ b/doc/styleguide/item-architecture-context.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-data.html b/doc/styleguide/item-architecture-data.html
index 2c27707..ab94cf4 100644
--- a/doc/styleguide/item-architecture-data.html
+++ b/doc/styleguide/item-architecture-data.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-emoji.html b/doc/styleguide/item-architecture-emoji.html
index 6fd740c..52587c7 100644
--- a/doc/styleguide/item-architecture-emoji.html
+++ b/doc/styleguide/item-architecture-emoji.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-forms-user.html b/doc/styleguide/item-architecture-forms-user.html
index 07d5d94..639de60 100644
--- a/doc/styleguide/item-architecture-forms-user.html
+++ b/doc/styleguide/item-architecture-forms-user.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-forms.html b/doc/styleguide/item-architecture-forms.html
index 0e7fb0e..07f3da8 100644
--- a/doc/styleguide/item-architecture-forms.html
+++ b/doc/styleguide/item-architecture-forms.html
@@ -74,6 +74,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/item-architecture-grid.html b/doc/styleguide/item-architecture-grid.html
index db25890..a345593 100644
--- a/doc/styleguide/item-architecture-grid.html
+++ b/doc/styleguide/item-architecture-grid.html
@@ -77,6 +77,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-info.html b/doc/styleguide/item-architecture-info.html
index 0846cf8..4f891bd 100644
--- a/doc/styleguide/item-architecture-info.html
+++ b/doc/styleguide/item-architecture-info.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-interviews.html b/doc/styleguide/item-architecture-interviews.html
index 0047a01..5ed4268 100644
--- a/doc/styleguide/item-architecture-interviews.html
+++ b/doc/styleguide/item-architecture-interviews.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-intro.html b/doc/styleguide/item-architecture-intro.html
index 3c24f51..fc5af1b 100644
--- a/doc/styleguide/item-architecture-intro.html
+++ b/doc/styleguide/item-architecture-intro.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-label.html b/doc/styleguide/item-architecture-label.html
index 56ca446..09e20c0 100644
--- a/doc/styleguide/item-architecture-label.html
+++ b/doc/styleguide/item-architecture-label.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-landings.html b/doc/styleguide/item-architecture-landings.html
index f5793dc..f6cb17a 100644
--- a/doc/styleguide/item-architecture-landings.html
+++ b/doc/styleguide/item-architecture-landings.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-lowercase.html b/doc/styleguide/item-architecture-lowercase.html
index 7fb64a8..97c5423 100644
--- a/doc/styleguide/item-architecture-lowercase.html
+++ b/doc/styleguide/item-architecture-lowercase.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-navigation.html b/doc/styleguide/item-architecture-navigation.html
index 060fb29..9f487bd 100644
--- a/doc/styleguide/item-architecture-navigation.html
+++ b/doc/styleguide/item-architecture-navigation.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-pull_quote.html b/doc/styleguide/item-architecture-pull_quote.html
index 518296b..5955e9b 100644
--- a/doc/styleguide/item-architecture-pull_quote.html
+++ b/doc/styleguide/item-architecture-pull_quote.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-radius.html b/doc/styleguide/item-architecture-radius.html
index f7e6d78..17fdaca 100644
--- a/doc/styleguide/item-architecture-radius.html
+++ b/doc/styleguide/item-architecture-radius.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-separator.html b/doc/styleguide/item-architecture-separator.html
index d46f35b..1b7f6b8 100644
--- a/doc/styleguide/item-architecture-separator.html
+++ b/doc/styleguide/item-architecture-separator.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-serif.html b/doc/styleguide/item-architecture-serif.html
index a3704ec..0a0d665 100644
--- a/doc/styleguide/item-architecture-serif.html
+++ b/doc/styleguide/item-architecture-serif.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-shadow.html b/doc/styleguide/item-architecture-shadow.html
index b3d8fb3..ac95150 100644
--- a/doc/styleguide/item-architecture-shadow.html
+++ b/doc/styleguide/item-architecture-shadow.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-sizes.html b/doc/styleguide/item-architecture-sizes.html
index ae2f9df..c050900 100644
--- a/doc/styleguide/item-architecture-sizes.html
+++ b/doc/styleguide/item-architecture-sizes.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-slides-bottom.html b/doc/styleguide/item-architecture-slides-bottom.html
index 579802d..479f304 100644
--- a/doc/styleguide/item-architecture-slides-bottom.html
+++ b/doc/styleguide/item-architecture-slides-bottom.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-slides-top.html b/doc/styleguide/item-architecture-slides-top.html
index 4018549..a62b923 100644
--- a/doc/styleguide/item-architecture-slides-top.html
+++ b/doc/styleguide/item-architecture-slides-top.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-architecture-slides.html b/doc/styleguide/item-architecture-slides.html
index c87b12f..a1628b5 100644
--- a/doc/styleguide/item-architecture-slides.html
+++ b/doc/styleguide/item-architecture-slides.html
@@ -78,6 +78,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-subtitle.html b/doc/styleguide/item-architecture-subtitle.html
index 074c598..a38247a 100644
--- a/doc/styleguide/item-architecture-subtitle.html
+++ b/doc/styleguide/item-architecture-subtitle.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-symbols.html b/doc/styleguide/item-architecture-symbols.html
index 4585599..f718ead 100644
--- a/doc/styleguide/item-architecture-symbols.html
+++ b/doc/styleguide/item-architecture-symbols.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-tables.html b/doc/styleguide/item-architecture-tables.html
index 0fb6eac..a082dc5 100644
--- a/doc/styleguide/item-architecture-tables.html
+++ b/doc/styleguide/item-architecture-tables.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-try.html b/doc/styleguide/item-architecture-try.html
index 9184b8a..03cfb5a 100644
--- a/doc/styleguide/item-architecture-try.html
+++ b/doc/styleguide/item-architecture-try.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture-uppercase.html b/doc/styleguide/item-architecture-uppercase.html
index abd50c3..5bf4278 100644
--- a/doc/styleguide/item-architecture-uppercase.html
+++ b/doc/styleguide/item-architecture-uppercase.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-architecture.html b/doc/styleguide/item-architecture.html
index 80901a3..f69090b 100644
--- a/doc/styleguide/item-architecture.html
+++ b/doc/styleguide/item-architecture.html
@@ -261,6 +261,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/item-contents-activity.html b/doc/styleguide/item-contents-activity.html
index 96a5092..bad61bd 100644
--- a/doc/styleguide/item-contents-activity.html
+++ b/doc/styleguide/item-contents-activity.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents-clients.html b/doc/styleguide/item-contents-clients.html
index 78d8b12..c260ddd 100644
--- a/doc/styleguide/item-contents-clients.html
+++ b/doc/styleguide/item-contents-clients.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-contents-features.html b/doc/styleguide/item-contents-features.html
index ce8b60d..84ed8da 100644
--- a/doc/styleguide/item-contents-features.html
+++ b/doc/styleguide/item-contents-features.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-contents-flexblocks.html b/doc/styleguide/item-contents-flexblocks.html
index 1b76c0e..da7e6e3 100644
--- a/doc/styleguide/item-contents-flexblocks.html
+++ b/doc/styleguide/item-contents-flexblocks.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-contents-gallery-overlay.html b/doc/styleguide/item-contents-gallery-overlay.html
index aa7cca2..6b32cd8 100644
--- a/doc/styleguide/item-contents-gallery-overlay.html
+++ b/doc/styleguide/item-contents-gallery-overlay.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents-gallery.html b/doc/styleguide/item-contents-gallery.html
index 3629a59..21c4336 100644
--- a/doc/styleguide/item-contents-gallery.html
+++ b/doc/styleguide/item-contents-gallery.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents-metrics.html b/doc/styleguide/item-contents-metrics.html
index 3954b7f..13be64a 100644
--- a/doc/styleguide/item-contents-metrics.html
+++ b/doc/styleguide/item-contents-metrics.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-contents-plans.html b/doc/styleguide/item-contents-plans.html
index e11f216..5504e00 100644
--- a/doc/styleguide/item-contents-plans.html
+++ b/doc/styleguide/item-contents-plans.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
diff --git a/doc/styleguide/item-contents-reasons.html b/doc/styleguide/item-contents-reasons.html
index 065d71d..4e439c1 100644
--- a/doc/styleguide/item-contents-reasons.html
+++ b/doc/styleguide/item-contents-reasons.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents-resume.html b/doc/styleguide/item-contents-resume.html
index 414284f..31dac4a 100644
--- a/doc/styleguide/item-contents-resume.html
+++ b/doc/styleguide/item-contents-resume.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents-specs.html b/doc/styleguide/item-contents-specs.html
index 28206b6..9fec135 100644
--- a/doc/styleguide/item-contents-specs.html
+++ b/doc/styleguide/item-contents-specs.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents-steps.html b/doc/styleguide/item-contents-steps.html
index e0d20a6..e2c2864 100644
--- a/doc/styleguide/item-contents-steps.html
+++ b/doc/styleguide/item-contents-steps.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-contents.html b/doc/styleguide/item-contents.html
index 4cfe76c..25422b6 100644
--- a/doc/styleguide/item-contents.html
+++ b/doc/styleguide/item-contents.html
@@ -136,6 +136,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/item-landings-cards.html b/doc/styleguide/item-landings-cards.html
index 65aa107..60bc856 100644
--- a/doc/styleguide/item-landings-cards.html
+++ b/doc/styleguide/item-landings-cards.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings-cites.html b/doc/styleguide/item-landings-cites.html
index 9725389..a971436 100644
--- a/doc/styleguide/item-landings-cites.html
+++ b/doc/styleguide/item-landings-cites.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings-cta-cover.html b/doc/styleguide/item-landings-cta-cover.html
index 9654bc1..417a52c 100644
--- a/doc/styleguide/item-landings-cta-cover.html
+++ b/doc/styleguide/item-landings-cta-cover.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings-cta.html b/doc/styleguide/item-landings-cta.html
index bf4011d..6421231 100644
--- a/doc/styleguide/item-landings-cta.html
+++ b/doc/styleguide/item-landings-cta.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings-longform.html b/doc/styleguide/item-landings-longform.html
index 2f4305c..9b4ca37 100644
--- a/doc/styleguide/item-landings-longform.html
+++ b/doc/styleguide/item-landings-longform.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings-quotes.html b/doc/styleguide/item-landings-quotes.html
index ac2c8f2..4d56248 100644
--- a/doc/styleguide/item-landings-quotes.html
+++ b/doc/styleguide/item-landings-quotes.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings-toc.html b/doc/styleguide/item-landings-toc.html
index b9ad56f..6ae6329 100644
--- a/doc/styleguide/item-landings-toc.html
+++ b/doc/styleguide/item-landings-toc.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-landings.html b/doc/styleguide/item-landings.html
index 7934d0d..6681129 100644
--- a/doc/styleguide/item-landings.html
+++ b/doc/styleguide/item-landings.html
@@ -111,6 +111,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/item-media-avatars.html b/doc/styleguide/item-media-avatars.html
index 9fbad28..2c5619a 100644
--- a/doc/styleguide/item-media-avatars.html
+++ b/doc/styleguide/item-media-avatars.html
@@ -76,6 +76,18 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Quotes - Components" target="_blank">Quotes - Components</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;112" title="Avatars - Components" target="_blank">Avatars - Components</a>
+              </li>
+          </ul>
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -83,12 +95,12 @@
 
 
             <div class="kss-modifier__example">
-              <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+              <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
               <div class="kss-modifier__example-footer"></div>
             </div>
 
@@ -98,12 +110,12 @@
               <summary>
                   Markup
               </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
             </details>
 
           <div class="kss-source kss-style">
diff --git a/doc/styleguide/item-media-background-anim.html b/doc/styleguide/item-media-background-anim.html
index 3c004f7..d7f6e76 100644
--- a/doc/styleguide/item-media-background-anim.html
+++ b/doc/styleguide/item-media-background-anim.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-media-background-video.html b/doc/styleguide/item-media-background-video.html
index 069666e..221c790 100644
--- a/doc/styleguide/item-media-background-video.html
+++ b/doc/styleguide/item-media-background-video.html
@@ -72,6 +72,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-media-background.html b/doc/styleguide/item-media-background.html
index 92da984..a80a78d 100644
--- a/doc/styleguide/item-media-background.html
+++ b/doc/styleguide/item-media-background.html
@@ -74,6 +74,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/item-media-badgets.html b/doc/styleguide/item-media-badgets.html
index c7cd322..8058181 100644
--- a/doc/styleguide/item-media-badgets.html
+++ b/doc/styleguide/item-media-badgets.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html
index a66f3b0..3f9e17a 100644
--- a/doc/styleguide/item-media-embed.html
+++ b/doc/styleguide/item-media-embed.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-media-fullscreen-embed.html b/doc/styleguide/item-media-fullscreen-embed.html
index c0f37b1..7145354 100644
--- a/doc/styleguide/item-media-fullscreen-embed.html
+++ b/doc/styleguide/item-media-fullscreen-embed.html
@@ -77,6 +77,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-media-fullscreen.html b/doc/styleguide/item-media-fullscreen.html
index 297950c..cfd71fd 100644
--- a/doc/styleguide/item-media-fullscreen.html
+++ b/doc/styleguide/item-media-fullscreen.html
@@ -74,6 +74,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/item-media-screenshots.html b/doc/styleguide/item-media-screenshots.html
index 1572135..4c1727c 100644
--- a/doc/styleguide/item-media-screenshots.html
+++ b/doc/styleguide/item-media-screenshots.html
@@ -76,6 +76,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html
index 4f21144..1e45590 100644
--- a/doc/styleguide/item-media.html
+++ b/doc/styleguide/item-media.html
@@ -121,6 +121,7 @@
 
 
 
+
       </div>
   </div>
 </div>
diff --git a/doc/styleguide/kss-assets/images/down_arrow.svg b/doc/styleguide/kss-assets/images/down_arrow.svg
deleted file mode 100644
index 7799030..0000000
--- a/doc/styleguide/kss-assets/images/down_arrow.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 10 5.3402697"
-   height="1.5071428mm"
-   width="2.8222222mm">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-29.375,-457.64693)"
-     id="layer1">
-    <path
-       id="path4138"
-       d="m 29.535681,458.41252 4.234404,4.23441 c 0.453686,0.45369 0.756144,0.45369 1.20983,0 l 4.234404,-4.23441 c 0.453687,-0.45368 -0.151229,-1.0586 -0.604915,-0.60491 l -4.234404,4.2344 -4.234405,-4.2344 c -0.453686,-0.45369 -1.058601,0.15123 -0.604914,0.60491 z"
-       style="fill:#858c92;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-  </g>
-</svg>
diff --git a/doc/styleguide/kss-assets/images/up_arrow.svg b/doc/styleguide/kss-assets/images/up_arrow.svg
deleted file mode 100644
index 875cf4f..0000000
--- a/doc/styleguide/kss-assets/images/up_arrow.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 10 5.3402697"
-   height="1.5071428mm"
-   width="2.8222222mm">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-29.375,-457.64693)"
-     id="layer1">
-    <path
-       id="path4138"
-       d="m 29.535681,462.22161 4.234404,-4.23441 c 0.453686,-0.45369 0.756144,-0.45369 1.20983,0 l 4.234404,4.23441 c 0.453687,0.45368 -0.151229,1.0586 -0.604915,0.60491 l -4.234404,-4.2344 -4.234405,4.2344 c -0.453686,0.45369 -1.058601,-0.15123 -0.604914,-0.60491 z"
-       style="fill:#858c92;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-  </g>
-</svg>
diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css
index 3934373..f310e70 100644
--- a/doc/styleguide/kss-assets/kss.css
+++ b/doc/styleguide/kss-assets/kss.css
@@ -537,6 +537,14 @@
       margin: 0;
       min-height: 24px;
       padding: 0 10px; }
+  #kss-node .kss__demos {
+    list-style: none; }
+    #kss-node .kss__demos li {
+      margin-left: 0; }
+    #kss-node .kss__demos a {
+      color: #d1783e;
+      font-size: 13.33333px;
+      font-weight: bold; }
 
 .kss-container {
   display: grid;
@@ -576,19 +584,19 @@
 #kssref-layout-radius .radius {
   padding: 2.4rem; }
 
-#kssref-base-backgrounds span[class*='bg'] {
+#kssref-architecture-backgrounds span[class*='bg'] {
   display: inline-block;
   margin-left: -4px;
   padding: 1.2rem; }
 
-#kssref-base-backgrounds-transparent div[class*='bg'] {
+#kssref-architecture-backgrounds-transparent div[class*='bg'] {
   margin: 0;
   padding: 2rem; }
-  #kssref-base-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
+  #kssref-architecture-backgrounds-transparent div[class*='bg'] > div[class*='bg'] {
     margin: 3rem;
     padding: 6rem; }
 
-#kssref-base-backgrounds-gradient div[class*='bg'] {
+#kssref-architecture-backgrounds-gradient div[class*='bg'] {
   margin: 3rem;
   padding: 4rem; }
 
diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss
index 1453c41..4f1275f 100644
--- a/doc/styleguide/kss-assets/kss.scss
+++ b/doc/styleguide/kss-assets/kss.scss
@@ -865,6 +865,20 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
       padding: 0 10px;
     }
   }
+
+  .kss__demos {
+    list-style: none;
+
+    li {
+      margin-left: 0;
+    }
+
+    a {
+      color: $kss-colors-link-active;
+      font-size: $kss-font-size / 1.2;
+      font-weight: bold;
+    }
+  }
 }
 
 .kss-container {
@@ -924,7 +938,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds {
+#kssref-architecture-backgrounds {
   & span[class*='bg'] {
     display: inline-block;
     margin-left: -4px;
@@ -932,7 +946,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-transparent {
+#kssref-architecture-backgrounds-transparent {
   & div[class*='bg'] {
     margin: 0;
     padding: 2rem;
@@ -944,7 +958,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
   }
 }
 
-#kssref-base-backgrounds-gradient {
+#kssref-architecture-backgrounds-gradient {
   & div[class*='bg'] {
     margin: 3rem;
     padding: 4rem;
diff --git a/doc/styleguide/section-architecture.html b/doc/styleguide/section-architecture.html
index 0101007..0212909 100644
--- a/doc/styleguide/section-architecture.html
+++ b/doc/styleguide/section-architecture.html
@@ -261,6 +261,7 @@
 
 
 
+
       </div>
       <div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 ">
 
@@ -274,6 +275,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -359,6 +361,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -549,6 +552,7 @@
 
 
 
+
       </div>
       <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 ">
 
@@ -566,6 +570,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -631,6 +636,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -676,6 +682,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -721,6 +728,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -775,6 +783,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -816,6 +825,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -857,6 +867,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -898,6 +909,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -937,6 +949,7 @@
 
 
 
+
       </div>
       <div id="kssref-architecture-forms-user" class="kss-section kss-section--depth-3 ">
 
@@ -950,6 +963,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -998,6 +1012,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1082,6 +1097,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1123,6 +1139,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1198,6 +1215,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1235,6 +1253,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1276,6 +1295,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1313,6 +1333,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1354,6 +1375,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1444,6 +1466,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1493,6 +1516,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1540,6 +1564,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1585,6 +1610,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1626,6 +1652,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1667,6 +1694,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1708,6 +1736,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1822,6 +1851,7 @@ Auto-fill &amp; Equal height</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1869,6 +1899,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1910,6 +1941,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1966,6 +1998,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -2026,6 +2059,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2067,6 +2101,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2104,6 +2139,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2199,6 +2235,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -2236,6 +2273,7 @@ All HTML elements will have those styles</p>
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/section-contents.html b/doc/styleguide/section-contents.html
index b2d06a6..e1e7120 100644
--- a/doc/styleguide/section-contents.html
+++ b/doc/styleguide/section-contents.html
@@ -136,6 +136,7 @@
 
 
 
+
       </div>
       <div id="kssref-contents-activity" class="kss-section kss-section--depth-2 ">
 
@@ -153,6 +154,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -278,6 +280,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -401,6 +404,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -521,6 +525,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -669,6 +674,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -778,6 +784,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -875,6 +882,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -977,6 +985,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Examples
@@ -1124,6 +1133,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1179,6 +1189,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1266,6 +1277,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -1345,6 +1357,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/section-landings.html b/doc/styleguide/section-landings.html
index ccffb39..36ce0bf 100644
--- a/doc/styleguide/section-landings.html
+++ b/doc/styleguide/section-landings.html
@@ -111,6 +111,7 @@
 
 
 
+
       </div>
       <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 ">
 
@@ -128,6 +129,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -179,6 +181,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -216,6 +219,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -269,6 +273,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -322,6 +327,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -363,6 +369,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -404,6 +411,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html
index 2bdc6a3..cd94384 100644
--- a/doc/styleguide/section-media.html
+++ b/doc/styleguide/section-media.html
@@ -121,6 +121,7 @@
 
 
 
+
       </div>
       <div id="kssref-media-avatars" class="kss-section kss-section--depth-2 ">
 
@@ -138,6 +139,18 @@
 
         </div>
 
+          <div class="kss-modifier__heading kss-style">
+            Demos
+          </div>
+          <ul class="kss__demos">
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;83" title="Quotes - Components" target="_blank">Quotes - Components</a>
+              </li>
+              <li>
+                <a href="https://webslides.tv/demos/components#slide&#x3D;112" title="Avatars - Components" target="_blank">Avatars - Components</a>
+              </li>
+          </ul>
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -145,12 +158,12 @@
 
 
             <div class="kss-modifier__example">
-              <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
-<img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+              <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
+<img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
               <div class="kss-modifier__example-footer"></div>
             </div>
 
@@ -160,12 +173,12 @@
               <summary>
                   Markup
               </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
-&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-7.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-40&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-48&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-56&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-64&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-72&quot; /&gt;
+&lt;img src&#x3D;&quot;http://lorempixel.com/output/people-q-c-200-200-9.jpg&quot; class&#x3D;&quot;avatar-80&quot; /&gt;</code></pre>
             </details>
 
           <div class="kss-source kss-style">
@@ -187,6 +200,7 @@
 
 
 
+
       </div>
       <div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 ">
 
@@ -200,6 +214,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -241,6 +256,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -298,6 +314,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -341,6 +358,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -388,6 +406,7 @@
 
 
 
+
       </div>
       <div id="kssref-media-fullscreen-embed" class="kss-section kss-section--depth-3 ">
 
@@ -406,6 +425,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
@@ -459,6 +479,7 @@
 
         </div>
 
+
           <div class="kss-modifier__wrapper">
             <div class="kss-modifier__heading kss-style">
               Example
diff --git a/kss-config.json b/kss-config.json
index 0de2f42..8898920 100644
--- a/kss-config.json
+++ b/kss-config.json
@@ -11,6 +11,14 @@
     "../../static/css/webslides.css"
   ],
 
+  "custom": [
+    "Demos"
+  ],
+
+  "extend": [
+    "doc/kss/templates/default/kss-extend"
+  ],
+
   "mainmenu": [
     {"title" : "WebSlides", "url" : "../../index.html"},
     {"title" : "Documentation", "url" : "./"},
diff --git a/src/scss/modules/_avatars.scss b/src/scss/modules/_avatars.scss
index ea6a3ec..b934a7a 100644
--- a/src/scss/modules/_avatars.scss
+++ b/src/scss/modules/_avatars.scss
@@ -7,12 +7,16 @@
 // You'll love this
 //
 // Markup:
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-40" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-48" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-56" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-64" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-72" />
-// <img src="http://lorempixel.com/output/people-q-c-200-200-7.jpg" class="avatar-80" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-40" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-48" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-56" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-64" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-72" />
+// <img src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" class="avatar-80" />
+//
+// Demos:
+// [Quotes - Components](https://webslides.tv/demos/components#slide=83)
+// [Avatars - Components](https://webslides.tv/demos/components#slide=112)
 //
 // Styleguide Media.Avatars
 cite img,