From 69472ef94be53c5c219e119fd8ef7cc602be0f96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= <displaynone@gmail.com>
Date: Tue, 3 Oct 2017 20:48:25 +0200
Subject: [PATCH] kss - Fixing menu links

---
 doc/kss/templates/default/index.hbs           |    4 +-
 .../default/kss-assets/arrow_down.svg         |   74 +
 .../templates/default/kss-assets/arrow_up.svg |   74 +
 doc/kss/templates/default/kss-assets/kss.css  |   22 +-
 doc/kss/templates/default/kss-assets/kss.scss |   27 +-
 doc/styleguide/index.html                     |   41 +-
 doc/styleguide/item-architecture-forms.html   |  113 -
 doc/styleguide/item-architecture-radius.html  |   41 +-
 doc/styleguide/item-architecture-tables.html  |  193 --
 doc/styleguide/item-architecture-try.html     |   41 +-
 doc/styleguide/item-architecture.html         |  216 +-
 doc/styleguide/item-contents-resume.html      |   43 +-
 doc/styleguide/item-contents.html             |   98 +-
 ...-forms-user.html => item-forms-login.html} |   49 +-
 doc/styleguide/item-forms.html                |  145 ++
 ... item-landings-and-portfolio-badgets.html} |   45 +-
 ... item-landings-and-portfolio-buttons.html} |   45 +-
 ...=> item-landings-and-portfolio-cards.html} |   45 +-
 ...tem-landings-and-portfolio-cta-cover.html} |   47 +-
 ...l => item-landings-and-portfolio-cta.html} |   45 +-
 ...> item-landings-and-portfolio-quotes.html} |   51 +-
 ...l => item-landings-and-portfolio-toc.html} |   45 +-
 ....html => item-landings-and-portfolio.html} |   81 +-
 doc/styleguide/item-landings-cites.html       |  135 -
 ...gnment.html => item-layout-alignment.html} |   45 +-
 ....html => item-layout-background-anim.html} |   45 +-
 ...html => item-layout-background-video.html} |   45 +-
 ...round.html => item-layout-background.html} |   45 +-
 ... => item-layout-backgrounds-gradient.html} |   45 +-
 ... item-layout-backgrounds-transparent.html} |   45 +-
 ...unds.html => item-layout-backgrounds.html} |   45 +-
 ...ecture-grid.html => item-layout-grid.html} |   45 +-
 doc/styleguide/item-layout-navbars.html       |  272 +++
 ...ture-sizes.html => item-layout-sizes.html} |   47 +-
 ...html => item-layout-slide-navigation.html} |  104 +-
 ...om.html => item-layout-slides-bottom.html} |   45 +-
 .../item-layout-slides-fullscreen.html        |  168 ++
 ...s-top.html => item-layout-slides-top.html} |   45 +-
 ...re-slides.html => item-layout-slides.html} |   45 +-
 doc/styleguide/item-layout.html               |  220 ++
 ...ws.html => item-longforms-interviews.html} |   45 +-
 ...ings-longform.html => item-longforms.html} |   56 +-
 doc/styleguide/item-media-avatars.html        |   41 +-
 doc/styleguide/item-media-background.html     |  113 -
 doc/styleguide/item-media-embed.html          |   41 +-
 .../item-media-fullscreen-embed.html          |   41 +-
 doc/styleguide/item-media-fullscreen.html     |   41 +-
 doc/styleguide/item-media-screenshots.html    |   41 +-
 doc/styleguide/item-media.html                |   61 +-
 ...=> item-multipurpose-blocks-activity.html} |   45 +-
 ... => item-multipurpose-blocks-clients.html} |   45 +-
 ...=> item-multipurpose-blocks-features.html} |   45 +-
 ...-multipurpose-blocks-gallery-overlay.html} |   45 +-
 ... => item-multipurpose-blocks-gallery.html} |   45 +-
 ... => item-multipurpose-blocks-metrics.html} |   45 +-
 ...ml => item-multipurpose-blocks-plans.html} |   45 +-
 ... => item-multipurpose-blocks-reasons.html} |   45 +-
 ...ml => item-multipurpose-blocks-specs.html} |   45 +-
 ...ml => item-multipurpose-blocks-steps.html} |   45 +-
 ...cks.html => item-multipurpose-blocks.html} |  103 +-
 ...umns.html => item-typography-columns.html} |   45 +-
 ...text.html => item-typography-context.html} |   45 +-
 ...re-data.html => item-typography-data.html} |   45 +-
 ...-emoji.html => item-typography-emoji.html} |   45 +-
 ...re-info.html => item-typography-info.html} |   45 +-
 ...-intro.html => item-typography-intro.html} |   45 +-
 ...-label.html => item-typography-label.html} |   45 +-
 ...ngs.html => item-typography-landings.html} |   45 +-
 ...se.html => item-typography-lowercase.html} |   45 +-
 ...e.html => item-typography-pull_quote.html} |   47 +-
 ...or.html => item-typography-separator.html} |   45 +-
 ...-serif.html => item-typography-serif.html} |   45 +-
 ...hadow.html => item-typography-shadow.html} |   45 +-
 ...tle.html => item-typography-subtitle.html} |   45 +-
 ...bols.html => item-typography-symbols.html} |   45 +-
 ...se.html => item-typography-uppercase.html} |   45 +-
 doc/styleguide/item-typography.html           |  220 ++
 doc/styleguide/kss-assets/arrow_down.svg      |   74 +
 doc/styleguide/kss-assets/arrow_up.svg        |   74 +
 doc/styleguide/kss-assets/kss.css             |   22 +-
 doc/styleguide/kss-assets/kss.scss            |   27 +-
 doc/styleguide/section-architecture.html      | 2168 +----------------
 doc/styleguide/section-contents.html          | 1311 +---------
 doc/styleguide/section-forms.html             |  189 ++
 ...ml => section-landings-and-portfolio.html} |  284 ++-
 doc/styleguide/section-layout.html            | 1370 +++++++++++
 doc/styleguide/section-longforms.html         |  247 ++
 doc/styleguide/section-media.html             |  217 +-
 .../section-multipurpose-blocks.html          | 1385 +++++++++++
 doc/styleguide/section-typography.html        |  890 +++++++
 kss-config.json                               |    6 +-
 src/scss/_base.scss                           |    8 +-
 src/scss/_color.scss                          |    6 +-
 src/scss/_typography.scss                     |   34 +-
 src/scss/modules/_badges.scss                 |    2 +-
 src/scss/modules/_button.scss                 |    2 +-
 src/scss/modules/_cards.scss                  |    2 +-
 src/scss/modules/_flexblock-activity.scss     |    2 +-
 src/scss/modules/_flexblock-clients.scss      |    2 +-
 src/scss/modules/_flexblock-features.scss     |    2 +-
 src/scss/modules/_flexblock-gallery.scss      |    4 +-
 src/scss/modules/_flexblock-metrics.scss      |    2 +-
 src/scss/modules/_flexblock-plans.scss        |    2 +-
 src/scss/modules/_flexblock-reasons.scss      |    2 +-
 src/scss/modules/_flexblock-specs.scss        |    2 +-
 src/scss/modules/_flexblock-steps.scss        |    2 +-
 src/scss/modules/_flexblock.scss              |    4 +-
 src/scss/modules/_form.scss                   |    2 +-
 src/scss/modules/_grid.scss                   |    2 +-
 src/scss/modules/_longform.scss               |    2 +-
 src/scss/modules/_navigation.scss             |    4 +-
 src/scss/modules/_promos.scss                 |    6 +-
 src/scss/modules/_quotes.scss                 |   12 +-
 src/scss/modules/_slides-bg.scss              |    6 +-
 src/scss/modules/_slides-navigation.scss      |    2 +-
 src/scss/modules/_slides.scss                 |   10 +-
 src/scss/modules/_tables.scss                 |   35 -
 src/scss/modules/_toc.scss                    |    2 +-
 src/scss/modules/_work.scss                   |    2 +-
 119 files changed, 8087 insertions(+), 5341 deletions(-)
 create mode 100644 doc/kss/templates/default/kss-assets/arrow_down.svg
 create mode 100644 doc/kss/templates/default/kss-assets/arrow_up.svg
 delete mode 100644 doc/styleguide/item-architecture-forms.html
 delete mode 100644 doc/styleguide/item-architecture-tables.html
 rename doc/styleguide/{item-architecture-forms-user.html => item-forms-login.html} (65%)
 create mode 100644 doc/styleguide/item-forms.html
 rename doc/styleguide/{item-media-badgets.html => item-landings-and-portfolio-badgets.html} (66%)
 rename doc/styleguide/{item-architecture-buttons.html => item-landings-and-portfolio-buttons.html} (68%)
 rename doc/styleguide/{item-landings-cards.html => item-landings-and-portfolio-cards.html} (71%)
 rename doc/styleguide/{item-landings-cta-cover.html => item-landings-and-portfolio-cta-cover.html} (70%)
 rename doc/styleguide/{item-landings-cta.html => item-landings-and-portfolio-cta.html} (68%)
 rename doc/styleguide/{item-landings-quotes.html => item-landings-and-portfolio-quotes.html} (61%)
 rename doc/styleguide/{item-landings-toc.html => item-landings-and-portfolio-toc.html} (75%)
 rename doc/styleguide/{item-landings.html => item-landings-and-portfolio.html} (60%)
 delete mode 100644 doc/styleguide/item-landings-cites.html
 rename doc/styleguide/{item-architecture-alignment.html => item-layout-alignment.html} (80%)
 rename doc/styleguide/{item-media-background-anim.html => item-layout-background-anim.html} (66%)
 rename doc/styleguide/{item-media-background-video.html => item-layout-background-video.html} (69%)
 rename doc/styleguide/{item-architecture-background.html => item-layout-background.html} (84%)
 rename doc/styleguide/{item-architecture-backgrounds-gradient.html => item-layout-backgrounds-gradient.html} (66%)
 rename doc/styleguide/{item-architecture-backgrounds-transparent.html => item-layout-backgrounds-transparent.html} (67%)
 rename doc/styleguide/{item-architecture-backgrounds.html => item-layout-backgrounds.html} (73%)
 rename doc/styleguide/{item-architecture-grid.html => item-layout-grid.html} (78%)
 create mode 100644 doc/styleguide/item-layout-navbars.html
 rename doc/styleguide/{item-architecture-sizes.html => item-layout-sizes.html} (77%)
 rename doc/styleguide/{item-architecture-navigation.html => item-layout-slide-navigation.html} (60%)
 rename doc/styleguide/{item-architecture-slides-bottom.html => item-layout-slides-bottom.html} (68%)
 create mode 100644 doc/styleguide/item-layout-slides-fullscreen.html
 rename doc/styleguide/{item-architecture-slides-top.html => item-layout-slides-top.html} (68%)
 rename doc/styleguide/{item-architecture-slides.html => item-layout-slides.html} (66%)
 create mode 100644 doc/styleguide/item-layout.html
 rename doc/styleguide/{item-architecture-interviews.html => item-longforms-interviews.html} (70%)
 rename doc/styleguide/{item-landings-longform.html => item-longforms.html} (60%)
 delete mode 100644 doc/styleguide/item-media-background.html
 rename doc/styleguide/{item-contents-activity.html => item-multipurpose-blocks-activity.html} (76%)
 rename doc/styleguide/{item-contents-clients.html => item-multipurpose-blocks-clients.html} (77%)
 rename doc/styleguide/{item-contents-features.html => item-multipurpose-blocks-features.html} (73%)
 rename doc/styleguide/{item-contents-gallery-overlay.html => item-multipurpose-blocks-gallery-overlay.html} (73%)
 rename doc/styleguide/{item-contents-gallery.html => item-multipurpose-blocks-gallery.html} (74%)
 rename doc/styleguide/{item-contents-metrics.html => item-multipurpose-blocks-metrics.html} (71%)
 rename doc/styleguide/{item-contents-plans.html => item-multipurpose-blocks-plans.html} (79%)
 rename doc/styleguide/{item-contents-reasons.html => item-multipurpose-blocks-reasons.html} (70%)
 rename doc/styleguide/{item-contents-specs.html => item-multipurpose-blocks-specs.html} (70%)
 rename doc/styleguide/{item-contents-steps.html => item-multipurpose-blocks-steps.html} (72%)
 rename doc/styleguide/{item-contents-flexblocks.html => item-multipurpose-blocks.html} (51%)
 rename doc/styleguide/{item-architecture-columns.html => item-typography-columns.html} (66%)
 rename doc/styleguide/{item-architecture-context.html => item-typography-context.html} (65%)
 rename doc/styleguide/{item-architecture-data.html => item-typography-data.html} (65%)
 rename doc/styleguide/{item-architecture-emoji.html => item-typography-emoji.html} (65%)
 rename doc/styleguide/{item-architecture-info.html => item-typography-info.html} (66%)
 rename doc/styleguide/{item-architecture-intro.html => item-typography-intro.html} (65%)
 rename doc/styleguide/{item-architecture-label.html => item-typography-label.html} (65%)
 rename doc/styleguide/{item-architecture-landings.html => item-typography-landings.html} (65%)
 rename doc/styleguide/{item-architecture-lowercase.html => item-typography-lowercase.html} (65%)
 rename doc/styleguide/{item-architecture-pull_quote.html => item-typography-pull_quote.html} (70%)
 rename doc/styleguide/{item-architecture-separator.html => item-typography-separator.html} (65%)
 rename doc/styleguide/{item-architecture-serif.html => item-typography-serif.html} (65%)
 rename doc/styleguide/{item-architecture-shadow.html => item-typography-shadow.html} (71%)
 rename doc/styleguide/{item-architecture-subtitle.html => item-typography-subtitle.html} (66%)
 rename doc/styleguide/{item-architecture-symbols.html => item-typography-symbols.html} (65%)
 rename doc/styleguide/{item-architecture-uppercase.html => item-typography-uppercase.html} (65%)
 create mode 100644 doc/styleguide/item-typography.html
 create mode 100644 doc/styleguide/kss-assets/arrow_down.svg
 create mode 100644 doc/styleguide/kss-assets/arrow_up.svg
 create mode 100644 doc/styleguide/section-forms.html
 rename doc/styleguide/{section-landings.html => section-landings-and-portfolio.html} (74%)
 create mode 100644 doc/styleguide/section-layout.html
 create mode 100644 doc/styleguide/section-longforms.html
 create mode 100644 doc/styleguide/section-multipurpose-blocks.html
 create mode 100644 doc/styleguide/section-typography.html

diff --git a/doc/kss/templates/default/index.hbs b/doc/kss/templates/default/index.hbs
index 6850d4b..e02d323 100644
--- a/doc/kss/templates/default/index.hbs
+++ b/doc/kss/templates/default/index.hbs
@@ -17,7 +17,7 @@
   <nav class="kss-header-nav">
     <ul>
       {{#each options.mainmenu}}
-        <li><a href="{{url}}" target="_blank">{{title}}</a></li>
+        <li><a href="{{url}}" target="_blank" class="{{class}}">{{title}}</a></li>
       {{/each}}
     </ul>
   </nav>
@@ -36,7 +36,7 @@
         </li>
       {{#each menu}}
         <li class="kss-nav__menu-item {{#if children}}kss-nav-has-children{{/if}}">
-          <a class="kss-nav__menu-link" href="section-{{referenceURI}}.html">
+          <a class="kss-nav__menu-link {{#if isActive}}kss-nav__menu-link-active{{/if}}" href="section-{{referenceURI}}.html">
             <span class="kss-nav__name">{{header}}</span>
           </a>
           {{#if isActive}}
diff --git a/doc/kss/templates/default/kss-assets/arrow_down.svg b/doc/kss/templates/default/kss-assets/arrow_down.svg
new file mode 100644
index 0000000..01aa8c9
--- /dev/null
+++ b/doc/kss/templates/default/kss-assets/arrow_down.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="9.9999971"
+   height="5.5346432"
+   viewBox="0 0 9.9999977 5.5346432"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow_down.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="79.100028"
+     inkscape:cx="4.9999972"
+     inkscape:cy="2.7673237"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4147"
+       originx="-191.71574"
+       originy="-661.71576" />
+  </sodipodi:namedview>
+  <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
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.71573,-385.11179)">
+    <path
+       style="fill:#5f6971;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 192.01499,386.13349 3.97364,3.97363 c 0.72248,0.72248 0.72248,0.72248 1.44495,-0.0206 l 3.99944,-3.92719 c 0.69668,-0.74828 -0.0258,-1.47076 -0.74828,-0.74828 l -3.94783,3.97363 -3.99944,-3.97363 c -0.72248,-0.72248 -1.44496,0 -0.72248,0.72248 z"
+       id="path4149"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/doc/kss/templates/default/kss-assets/arrow_up.svg b/doc/kss/templates/default/kss-assets/arrow_up.svg
new file mode 100644
index 0000000..a552ff9
--- /dev/null
+++ b/doc/kss/templates/default/kss-assets/arrow_up.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="9.9999971"
+   height="5.5346432"
+   viewBox="0 0 9.9999977 5.5346432"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow_up.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="79.100028"
+     inkscape:cx="4.9999972"
+     inkscape:cy="2.7673237"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4147"
+       originx="-191.71574"
+       originy="-661.71576" />
+  </sodipodi:namedview>
+  <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
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.71573,-385.11179)">
+    <path
+       style="fill:#5f6971;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 192.01499,389.62473 3.97364,-3.97363 c 0.72248,-0.72248 0.72248,-0.72248 1.44495,0.0206 l 3.99944,3.92719 c 0.69668,0.74828 -0.0258,1.47076 -0.74828,0.74828 l -3.94783,-3.97363 -3.99944,3.97363 c -0.72248,0.72248 -1.44496,0 -0.72248,-0.72248 z"
+       id="path4149"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css
index f310e70..706207f 100644
--- a/doc/kss/templates/default/kss-assets/kss.css
+++ b/doc/kss/templates/default/kss-assets/kss.css
@@ -213,9 +213,9 @@
     #kss-node .kss-nav li {
       margin-left: 3.2rem; }
     #kss-node .kss-nav .kss-nav-has-children > a::before {
-      content: url("./images/down_arrow.svg"); }
+      content: url("./arrow_down.svg"); }
     #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before {
-      content: url("./images/up_arrow.svg"); }
+      content: url("./arrow_up.svg"); }
   #kss-node .kss-nav__menu {
     list-style-type: none;
     margin-bottom: 12px;
@@ -256,7 +256,8 @@
     #kss-node .kss-nav__ref:after {
       content: ' '; }
   #kss-node .kss-nav__ref-child {
-    font-weight: normal; }
+    font-weight: normal;
+    padding-left: 1.2rem; }
   #kss-node .kss-section {
     padding-bottom: 2.4rem;
     padding-top: 2.4rem; }
@@ -443,6 +444,15 @@
     z-index: 0; }
     #kss-node .kss-modifier__example:last-child {
       margin-bottom: 0; }
+    #kss-node .kss-modifier__example .fullscreen {
+      border: 2px solid #e7e7e9;
+      border-radius: 6px;
+      padding-bottom: 50%; }
+      #kss-node .kss-modifier__example .fullscreen::before {
+        background-color: #f3f3f5;
+        content: '';
+        display: block;
+        height: 20px; }
   #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
   #kss-node.kss-guides-mode .kss-modifier__example-footer:before,
   #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
@@ -495,9 +505,9 @@
     margin: 24px 0;
     padding: 20px; }
     #kss-node .kss-markup[open] summary {
-      background: url("./images/up_arrow.svg") no-repeat right center; }
+      background: url("./arrow_up.svg") no-repeat right center; }
     #kss-node .kss-markup summary {
-      background: url("./images/down_arrow.svg") no-repeat right center;
+      background: url("./arrow_down.svg") no-repeat right center;
       cursor: pointer; }
     #kss-node .kss-markup pre {
       background: #1d1f20;
@@ -545,6 +555,8 @@
       color: #d1783e;
       font-size: 13.33333px;
       font-weight: bold; }
+  #kss-node .fullscreen > .embed {
+    position: relative; }
 
 .kss-container {
   display: grid;
diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss
index 4f1275f..cce200e 100644
--- a/doc/kss/templates/default/kss-assets/kss.scss
+++ b/doc/kss/templates/default/kss-assets/kss.scss
@@ -365,11 +365,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     }
 
     .kss-nav-has-children > a::before {
-      content: url('./images/down_arrow.svg');
+      content: url('./arrow_down.svg');
     }
 
     .kss-nav-has-children > a.kss-nav__menu-link-active::before {
-      content: url('./images/up_arrow.svg');
+      content: url('./arrow_up.svg');
     }
   }
 
@@ -435,6 +435,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
 
   .kss-nav__ref-child {
     font-weight: normal;
+    padding-left: 1.2rem;
   }
 
   // ------------------------------------------------------------------------------
@@ -702,6 +703,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     margin-bottom: ($kss-vertical-rhythm / 2);
   }
 
+
   .is-fullscreen .kss-modifier__description {
     margin-right: 20px;
   }
@@ -716,6 +718,19 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     &:last-child {
       margin-bottom: 0;
     }
+
+    .fullscreen {
+      border: 2px solid $kss-colors-subheader-border;
+      border-radius: 6px;
+      padding-bottom: 50%;
+
+      &::before {
+        background-color: $kss-colors-subheader-bg;
+        content: '';
+        display: block;
+        height: 20px;
+      }
+    }
   }
 
   &.kss-guides-mode .kss-modifier__example,
@@ -801,11 +816,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     padding: 20px;
 
     &[open] summary {
-      background: url('./images/up_arrow.svg') no-repeat right center;
+      background: url('./arrow_up.svg') no-repeat right center;
     }
 
     & summary {
-      background: url('./images/down_arrow.svg') no-repeat right center;
+      background: url('./arrow_down.svg') no-repeat right center;
       cursor: pointer;
     }
 
@@ -879,6 +894,10 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
       font-weight: bold;
     }
   }
+
+  .fullscreen > .embed {
+    position: relative;
+  }
 }
 
 .kss-container {
diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html
index 15077f1..022fdbe 100644
--- a/doc/styleguide/index.html
+++ b/doc/styleguide/index.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-architecture-forms.html b/doc/styleguide/item-architecture-forms.html
deleted file mode 100644
index 07f3da8..0000000
--- a/doc/styleguide/item-architecture-forms.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides - Documentation 1.5.0</title>
-
-  <meta name="description" content="">
-  <meta name="generator" content="kss-node">
-  <meta name="viewport" content="width=device-width">
-
-  <link rel="stylesheet" href="kss-assets/kss.css">
-  <link rel="stylesheet" href="../../static/css/webslides.css">
-
-</head>
-<body id="kss-node" class="kss-fullscreen-mode">
-<header class="kss-header">
-  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
-  <nav class="kss-header-nav">
-    <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
-    </ul>
-  </nav>
-</header>
-<div class="kss-sub-header">
-  <p>WebSlides - Documentation 1.5.0</p>
-</div>
-<div class="kss-container">
-  <div class="kss-sidebar kss-style">
-    <nav class="kss-nav">
-      <ul class="kss-nav__menu">
-        <li class="kss-nav__menu-item">
-          <a class="kss-nav__menu-link " href="./">
-            <span class="kss-nav__name">Introduction</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
-            <span class="kss-nav__name">Architecture</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
-            <span class="kss-nav__name">Contents</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
-            <span class="kss-nav__name">Media</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-architecture-forms" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-forms">
-              Architecture.Forms
-            </a>
-          </h2>
-
-
-        </div>
-
-
-
-
-      </div>
-  </div>
-</div>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
-  prettyPrint();
-  var spy = new ScrollSpy('#kss-node', {
-    nav: '.kss-nav__menu-child > li > a',
-    className: 'is-in-viewport'
-  });
-  var kssFullScreen = new KssFullScreen({
-    idPrefix: 'kss-fullscreen-',
-    bodyClass: 'kss-fullscreen-mode',
-    elementClass: 'is-fullscreen'
-  });
-  var kssGuides = new KssGuides({
-    bodyClass: 'kss-guides-mode'
-  });
-  var kssMarkup = new KssMarkup({
-    bodyClass: 'kss-markup-mode',
-    detailsClass: 'kss-markup'
-  });
-</script>
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/doc/styleguide/item-architecture-radius.html b/doc/styleguide/item-architecture-radius.html
index 17fdaca..826e94f 100644
--- a/doc/styleguide/item-architecture-radius.html
+++ b/doc/styleguide/item-architecture-radius.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-architecture-tables.html b/doc/styleguide/item-architecture-tables.html
deleted file mode 100644
index a082dc5..0000000
--- a/doc/styleguide/item-architecture-tables.html
+++ /dev/null
@@ -1,193 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides - Documentation 1.5.0</title>
-
-  <meta name="description" content="">
-  <meta name="generator" content="kss-node">
-  <meta name="viewport" content="width=device-width">
-
-  <link rel="stylesheet" href="kss-assets/kss.css">
-  <link rel="stylesheet" href="../../static/css/webslides.css">
-
-</head>
-<body id="kss-node" class="kss-fullscreen-mode">
-<header class="kss-header">
-  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
-  <nav class="kss-header-nav">
-    <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
-    </ul>
-  </nav>
-</header>
-<div class="kss-sub-header">
-  <p>WebSlides - Documentation 1.5.0</p>
-</div>
-<div class="kss-container">
-  <div class="kss-sidebar kss-style">
-    <nav class="kss-nav">
-      <ul class="kss-nav__menu">
-        <li class="kss-nav__menu-item">
-          <a class="kss-nav__menu-link " href="./">
-            <span class="kss-nav__name">Introduction</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
-            <span class="kss-nav__name">Architecture</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
-            <span class="kss-nav__name">Contents</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
-            <span class="kss-nav__name">Media</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-architecture-tables" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-tables">
-              Tables
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <table>
-  <thead>
-   <tr>
-     <th>Plans</th>
-     <th>Good</th>
-     <th>Better</th>
-     <th>Awesome</th>
-   </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Price</td>
-      <td>Free</td>
-      <td>$6</td>
-      <td>$10</td>
-    </tr>
-    <tr>
-      <td>Access to exclusive content</td>
-      <td>No</td>
-      <td>No</td>
-      <td>Yes</td>
-    </tr>
-    <tr>
-      <td>Screens you can watch on at the same time</td>
-      <td>1</td>
-      <td>2</td>
-      <td>Unlimited</td>
-    </tr>
-  </tbody>
-</table>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table&gt;
-  &lt;thead&gt;
-   &lt;tr&gt;
-     &lt;th&gt;Plans&lt;/th&gt;
-     &lt;th&gt;Good&lt;/th&gt;
-     &lt;th&gt;Better&lt;/th&gt;
-     &lt;th&gt;Awesome&lt;/th&gt;
-   &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Price&lt;/td&gt;
-      &lt;td&gt;Free&lt;/td&gt;
-      &lt;td&gt;$6&lt;/td&gt;
-      &lt;td&gt;$10&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Access to exclusive content&lt;/td&gt;
-      &lt;td&gt;No&lt;/td&gt;
-      &lt;td&gt;No&lt;/td&gt;
-      &lt;td&gt;Yes&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Screens you can watch on at the same time&lt;/td&gt;
-      &lt;td&gt;1&lt;/td&gt;
-      &lt;td&gt;2&lt;/td&gt;
-      &lt;td&gt;Unlimited&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_tables.scss</code>, line 1
-          </div>
-
-      </div>
-  </div>
-</div>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
-  prettyPrint();
-  var spy = new ScrollSpy('#kss-node', {
-    nav: '.kss-nav__menu-child > li > a',
-    className: 'is-in-viewport'
-  });
-  var kssFullScreen = new KssFullScreen({
-    idPrefix: 'kss-fullscreen-',
-    bodyClass: 'kss-fullscreen-mode',
-    elementClass: 'is-fullscreen'
-  });
-  var kssGuides = new KssGuides({
-    bodyClass: 'kss-guides-mode'
-  });
-  var kssMarkup = new KssMarkup({
-    bodyClass: 'kss-markup-mode',
-    detailsClass: 'kss-markup'
-  });
-</script>
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/doc/styleguide/item-architecture-try.html b/doc/styleguide/item-architecture-try.html
index 03cfb5a..13fea05 100644
--- a/doc/styleguide/item-architecture-try.html
+++ b/doc/styleguide/item-architecture-try.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-architecture.html b/doc/styleguide/item-architecture.html
index f69090b..b3ade20 100644
--- a/doc/styleguide/item-architecture.html
+++ b/doc/styleguide/item-architecture.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,212 +36,62 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
               <ul class="kss-nav__menu-child">
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-alignment">
-                    <span class="kss-nav__name">Align content</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-background">
-                    <span class="kss-nav__name">Backgrounds</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
-                    <span class="kss-nav__name">Architecture.backgrounds</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
-                    <span class="kss-nav__name">Backgrounds</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-gradient">
-                    <span class="kss-nav__name">Backgrounds - Gradient</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-transparent">
-                    <span class="kss-nav__name">Backgrounds - Transparent</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-buttons">
-                    <span class="kss-nav__name">Buttons</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-columns">
-                    <span class="kss-nav__name">Columns</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-context">
-                    <span class="kss-nav__name">Context</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-data">
-                    <span class="kss-nav__name">Data</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-emoji">
-                    <span class="kss-nav__name">Emoji</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-forms">
-                    <span class="kss-nav__name">Architecture.Forms</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-forms-user">
-                    <span class="kss-nav__name">Login form</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-grid">
-                    <span class="kss-nav__name">Grid</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-info">
-                    <span class="kss-nav__name">Info Messages</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-interviews">
-                    <span class="kss-nav__name">Interviews</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-intro">
-                    <span class="kss-nav__name">Intro</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-label">
-                    <span class="kss-nav__name">Label</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-landings">
-                    <span class="kss-nav__name">Landings</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-lowercase">
-                    <span class="kss-nav__name">Lowercase</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
-                    <span class="kss-nav__name">Navigation</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
-                    <span class="kss-nav__name">Slides navigation</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-pull_quote">
-                    <span class="kss-nav__name">Pull Quote</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-radius">
                     <span class="kss-nav__name">Radius</span>
                   </a>
                 </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-separator">
-                    <span class="kss-nav__name">Separator</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-serif">
-                    <span class="kss-nav__name">Serif</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-shadow">
-                    <span class="kss-nav__name">Shadows</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-sizes">
-                    <span class="kss-nav__name">Resizing</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
-                    <span class="kss-nav__name">fullscreen</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
-                    <span class="kss-nav__name">Slides</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-bottom">
-                    <span class="kss-nav__name">Align bottom</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-top">
-                    <span class="kss-nav__name">Align top</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-subtitle">
-                    <span class="kss-nav__name">Subtitule</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-symbols">
-                    <span class="kss-nav__name">Symbols</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-tables">
-                    <span class="kss-nav__name">Tables</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-try">
                     <span class="kss-nav__name">Try</span>
                   </a>
                 </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-uppercase">
-                    <span class="kss-nav__name">Uppercase</span>
-                  </a>
-                </li>
               </ul>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-contents-resume.html b/doc/styleguide/item-contents-resume.html
index 31dac4a..6eb377d 100644
--- a/doc/styleguide/item-contents-resume.html
+++ b/doc/styleguide/item-contents-resume.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
@@ -65,7 +90,7 @@
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
             <a class="kss-title__permalink" href="#kssref-contents-resume">
-              Work / Resumé / CV
+              CV / Resumé
             </a>
           </h2>
 
diff --git a/doc/styleguide/item-contents.html b/doc/styleguide/item-contents.html
index 25422b6..2236d09 100644
--- a/doc/styleguide/item-contents.html
+++ b/doc/styleguide/item-contents.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,87 +36,57 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
               <ul class="kss-nav__menu-child">
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-activity">
-                    <span class="kss-nav__name"> CVs, News ad Activity</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-clients">
-                    <span class="kss-nav__name">Clients</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-features">
-                    <span class="kss-nav__name">Features</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-flexblocks">
-                    <span class="kss-nav__name">Flexblocks</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-gallery">
-                    <span class="kss-nav__name">Galleries (portfolios, teams...)</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-contents.html#kssref-contents-gallery-overlay">
-                    <span class="kss-nav__name">Gallery + Overflow</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-metrics">
-                    <span class="kss-nav__name">Metrics</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-plans">
-                    <span class="kss-nav__name">Plans / Pricing</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-reasons">
-                    <span class="kss-nav__name">Reasons</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-resume">
-                    <span class="kss-nav__name">Work / Resumé / CV</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-specs">
-                    <span class="kss-nav__name">Specs</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-steps">
-                    <span class="kss-nav__name"> Steps</span>
+                    <span class="kss-nav__name">CV / Resumé</span>
                   </a>
                 </li>
               </ul>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-architecture-forms-user.html b/doc/styleguide/item-forms-login.html
similarity index 65%
rename from doc/styleguide/item-architecture-forms-user.html
rename to doc/styleguide/item-forms-login.html
index 639de60..9bb89cf 100644
--- a/doc/styleguide/item-architecture-forms-user.html
+++ b/doc/styleguide/item-forms-login.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,38 +36,63 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-forms-user" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-forms-login" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-forms-user">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-forms-login">
               Login form
             </a>
-          </h3>
+          </h2>
 
 
         </div>
diff --git a/doc/styleguide/item-forms.html b/doc/styleguide/item-forms.html
new file mode 100644
index 0000000..5cf0964
--- /dev/null
+++ b/doc/styleguide/item-forms.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-login">
+                    <span class="kss-nav__name">Login form</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-forms" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-forms">
+              Forms
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/item-media-badgets.html b/doc/styleguide/item-landings-and-portfolio-badgets.html
similarity index 66%
rename from doc/styleguide/item-media-badgets.html
rename to doc/styleguide/item-landings-and-portfolio-badgets.html
index 8058181..45a3e12 100644
--- a/doc/styleguide/item-media-badgets.html
+++ b/doc/styleguide/item-landings-and-portfolio-badgets.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-media-badgets" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-badgets" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-media-badgets">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-badgets">
               Badges
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-buttons.html b/doc/styleguide/item-landings-and-portfolio-buttons.html
similarity index 68%
rename from doc/styleguide/item-architecture-buttons.html
rename to doc/styleguide/item-landings-and-portfolio-buttons.html
index 546f291..deaf293 100644
--- a/doc/styleguide/item-architecture-buttons.html
+++ b/doc/styleguide/item-landings-and-portfolio-buttons.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-buttons" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-buttons" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-buttons">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-buttons">
               Buttons
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings-cards.html b/doc/styleguide/item-landings-and-portfolio-cards.html
similarity index 71%
rename from doc/styleguide/item-landings-cards.html
rename to doc/styleguide/item-landings-and-portfolio-cards.html
index 60bc856..7caeec3 100644
--- a/doc/styleguide/item-landings-cards.html
+++ b/doc/styleguide/item-landings-and-portfolio-cards.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-cards" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cards">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cards">
               Cards
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings-cta-cover.html b/doc/styleguide/item-landings-and-portfolio-cta-cover.html
similarity index 70%
rename from doc/styleguide/item-landings-cta-cover.html
rename to doc/styleguide/item-landings-and-portfolio-cta-cover.html
index 417a52c..da9e522 100644
--- a/doc/styleguide/item-landings-cta-cover.html
+++ b/doc/styleguide/item-landings-and-portfolio-cta-cover.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,36 +36,61 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings-cta-cover" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-cta-cover" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cta-cover">
-              Headings
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cta-cover">
+              Covers
             </a>
           </h2>
 
diff --git a/doc/styleguide/item-landings-cta.html b/doc/styleguide/item-landings-and-portfolio-cta.html
similarity index 68%
rename from doc/styleguide/item-landings-cta.html
rename to doc/styleguide/item-landings-and-portfolio-cta.html
index 6421231..0660c21 100644
--- a/doc/styleguide/item-landings-cta.html
+++ b/doc/styleguide/item-landings-and-portfolio-cta.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings-cta" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-cta" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cta">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cta">
               Call to action
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings-quotes.html b/doc/styleguide/item-landings-and-portfolio-quotes.html
similarity index 61%
rename from doc/styleguide/item-landings-quotes.html
rename to doc/styleguide/item-landings-and-portfolio-quotes.html
index 4d56248..de56279 100644
--- a/doc/styleguide/item-landings-quotes.html
+++ b/doc/styleguide/item-landings-and-portfolio-quotes.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,36 +36,61 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings-quotes" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-quotes" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-quotes">
-              Quotes
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-quotes">
+              Quotes &amp; Cites
             </a>
           </h2>
 
@@ -83,6 +108,7 @@
               <blockquote>
   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
 </blockquote>
+<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
               <div class="kss-modifier__example-footer"></div>
             </div>
 
@@ -94,7 +120,8 @@
               </summary>
               <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote&gt;
   &lt;p&gt;&quot;I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides.&quot;&lt;/p&gt;
-&lt;/blockquote&gt;</code></pre>
+&lt;/blockquote&gt;
+&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
             </details>
 
           <div class="kss-source kss-style">
diff --git a/doc/styleguide/item-landings-toc.html b/doc/styleguide/item-landings-and-portfolio-toc.html
similarity index 75%
rename from doc/styleguide/item-landings-toc.html
rename to doc/styleguide/item-landings-and-portfolio-toc.html
index 6ae6329..ca68288 100644
--- a/doc/styleguide/item-landings-toc.html
+++ b/doc/styleguide/item-landings-and-portfolio-toc.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings-toc" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-landings-and-portfolio-toc" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-toc">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-toc">
               Table of contents
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings.html b/doc/styleguide/item-landings-and-portfolio.html
similarity index 60%
rename from doc/styleguide/item-landings.html
rename to doc/styleguide/item-landings-and-portfolio.html
index 6681129..1dc2c71 100644
--- a/doc/styleguide/item-landings.html
+++ b/doc/styleguide/item-landings-and-portfolio.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,73 +36,98 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
           </a>
               <ul class="kss-nav__menu-child">
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cards">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-badgets">
+                    <span class="kss-nav__name">Badges</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-buttons">
+                    <span class="kss-nav__name">Buttons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cards">
                     <span class="kss-nav__name">Cards</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cites">
-                    <span class="kss-nav__name">Cites</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cta">
                     <span class="kss-nav__name">Call to action</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta-cover">
-                    <span class="kss-nav__name">Headings</span>
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cta-cover">
+                    <span class="kss-nav__name">Covers</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-longform">
-                    <span class="kss-nav__name">Longform</span>
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-quotes">
+                    <span class="kss-nav__name">Quotes &amp; Cites</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-quotes">
-                    <span class="kss-nav__name">Quotes</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-toc">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-toc">
                     <span class="kss-nav__name">Table of contents</span>
                   </a>
                 </li>
               </ul>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings" class="kss-section kss-section--depth-1 is-fullscreen">
+      <div id="kssref-landings-and-portfolio" class="kss-section kss-section--depth-1 is-fullscreen">
 
         <div class="kss-style">
           <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-landings">
-              Landings
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio">
+              Landings and portfolio
             </a>
           </h1>
 
diff --git a/doc/styleguide/item-landings-cites.html b/doc/styleguide/item-landings-cites.html
deleted file mode 100644
index a971436..0000000
--- a/doc/styleguide/item-landings-cites.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides - Documentation 1.5.0</title>
-
-  <meta name="description" content="">
-  <meta name="generator" content="kss-node">
-  <meta name="viewport" content="width=device-width">
-
-  <link rel="stylesheet" href="kss-assets/kss.css">
-  <link rel="stylesheet" href="../../static/css/webslides.css">
-
-</head>
-<body id="kss-node" class="kss-fullscreen-mode">
-<header class="kss-header">
-  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
-  <nav class="kss-header-nav">
-    <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
-    </ul>
-  </nav>
-</header>
-<div class="kss-sub-header">
-  <p>WebSlides - Documentation 1.5.0</p>
-</div>
-<div class="kss-container">
-  <div class="kss-sidebar kss-style">
-    <nav class="kss-nav">
-      <ul class="kss-nav__menu">
-        <li class="kss-nav__menu-item">
-          <a class="kss-nav__menu-link " href="./">
-            <span class="kss-nav__name">Introduction</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
-            <span class="kss-nav__name">Architecture</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
-            <span class="kss-nav__name">Contents</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
-            <span class="kss-nav__name">Media</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-landings-cites" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cites">
-              Cites
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_quotes.scss</code>, line 28
-          </div>
-
-      </div>
-  </div>
-</div>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
-  prettyPrint();
-  var spy = new ScrollSpy('#kss-node', {
-    nav: '.kss-nav__menu-child > li > a',
-    className: 'is-in-viewport'
-  });
-  var kssFullScreen = new KssFullScreen({
-    idPrefix: 'kss-fullscreen-',
-    bodyClass: 'kss-fullscreen-mode',
-    elementClass: 'is-fullscreen'
-  });
-  var kssGuides = new KssGuides({
-    bodyClass: 'kss-guides-mode'
-  });
-  var kssMarkup = new KssMarkup({
-    bodyClass: 'kss-markup-mode',
-    detailsClass: 'kss-markup'
-  });
-</script>
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/doc/styleguide/item-architecture-alignment.html b/doc/styleguide/item-layout-alignment.html
similarity index 80%
rename from doc/styleguide/item-architecture-alignment.html
rename to doc/styleguide/item-layout-alignment.html
index 16e229b..85baf27 100644
--- a/doc/styleguide/item-architecture-alignment.html
+++ b/doc/styleguide/item-layout-alignment.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-alignment" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-alignment">
+            <a class="kss-title__permalink" href="#kssref-layout-alignment">
               Align content
             </a>
           </h2>
diff --git a/doc/styleguide/item-media-background-anim.html b/doc/styleguide/item-layout-background-anim.html
similarity index 66%
rename from doc/styleguide/item-media-background-anim.html
rename to doc/styleguide/item-layout-background-anim.html
index d7f6e76..2111c90 100644
--- a/doc/styleguide/item-media-background-anim.html
+++ b/doc/styleguide/item-layout-background-anim.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-layout-background-anim" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-media-background-anim">
+            <a class="kss-title__permalink" href="#kssref-layout-background-anim">
               Animated
             </a>
           </h3>
diff --git a/doc/styleguide/item-media-background-video.html b/doc/styleguide/item-layout-background-video.html
similarity index 69%
rename from doc/styleguide/item-media-background-video.html
rename to doc/styleguide/item-layout-background-video.html
index 221c790..140f83a 100644
--- a/doc/styleguide/item-media-background-video.html
+++ b/doc/styleguide/item-layout-background-video.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-media-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-layout-background-video" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-media-background-video">
+            <a class="kss-title__permalink" href="#kssref-layout-background-video">
               Video
             </a>
           </h3>
diff --git a/doc/styleguide/item-architecture-background.html b/doc/styleguide/item-layout-background.html
similarity index 84%
rename from doc/styleguide/item-architecture-background.html
rename to doc/styleguide/item-layout-background.html
index 593aef4..2e182b8 100644
--- a/doc/styleguide/item-architecture-background.html
+++ b/doc/styleguide/item-layout-background.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-background" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-background" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-background">
+            <a class="kss-title__permalink" href="#kssref-layout-background">
               Backgrounds
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-backgrounds-gradient.html b/doc/styleguide/item-layout-backgrounds-gradient.html
similarity index 66%
rename from doc/styleguide/item-architecture-backgrounds-gradient.html
rename to doc/styleguide/item-layout-backgrounds-gradient.html
index bb4d87a..4569839 100644
--- a/doc/styleguide/item-architecture-backgrounds-gradient.html
+++ b/doc/styleguide/item-layout-backgrounds-gradient.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-backgrounds-gradient" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-layout-backgrounds-gradient" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-gradient">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds-gradient">
               Backgrounds - Gradient
             </a>
           </h3>
diff --git a/doc/styleguide/item-architecture-backgrounds-transparent.html b/doc/styleguide/item-layout-backgrounds-transparent.html
similarity index 67%
rename from doc/styleguide/item-architecture-backgrounds-transparent.html
rename to doc/styleguide/item-layout-backgrounds-transparent.html
index d730368..2a797d4 100644
--- a/doc/styleguide/item-architecture-backgrounds-transparent.html
+++ b/doc/styleguide/item-layout-backgrounds-transparent.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-backgrounds-transparent" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-layout-backgrounds-transparent" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-transparent">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds-transparent">
               Backgrounds - Transparent
             </a>
           </h3>
diff --git a/doc/styleguide/item-architecture-backgrounds.html b/doc/styleguide/item-layout-backgrounds.html
similarity index 73%
rename from doc/styleguide/item-architecture-backgrounds.html
rename to doc/styleguide/item-layout-backgrounds.html
index 130baa8..9357b1d 100644
--- a/doc/styleguide/item-architecture-backgrounds.html
+++ b/doc/styleguide/item-layout-backgrounds.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-backgrounds" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds">
               Backgrounds
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-grid.html b/doc/styleguide/item-layout-grid.html
similarity index 78%
rename from doc/styleguide/item-architecture-grid.html
rename to doc/styleguide/item-layout-grid.html
index a345593..d3bc9ec 100644
--- a/doc/styleguide/item-architecture-grid.html
+++ b/doc/styleguide/item-layout-grid.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-grid" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-grid" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-grid">
+            <a class="kss-title__permalink" href="#kssref-layout-grid">
               Grid
             </a>
           </h2>
diff --git a/doc/styleguide/item-layout-navbars.html b/doc/styleguide/item-layout-navbars.html
new file mode 100644
index 0000000..4c99f52
--- /dev/null
+++ b/doc/styleguide/item-layout-navbars.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-navbars" class="kss-section kss-section--depth-2 is-fullscreen">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-navbars">
+              Navbars
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Responsive Media (videos, iframe...)</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <nav role="navigation" class="">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .navbar
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Navigation bar
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="navbar">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .aligncenter
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center alignment
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="aligncenter">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .alignright
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right alignment
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="alignright">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav role&#x3D;&quot;navigation&quot; class&#x3D;&quot;[modifier class]&quot;&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;Clients&lt;/a&gt;&lt;/li&gt;
+    &lt;li class&#x3D;&quot;facebook&quot;&gt;
+      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://facebook.com/webslides&quot; title&#x3D;&quot;Facebook&quot;&gt;
+        Facebook
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class&#x3D;&quot;twitter&quot;&gt;
+      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://twitter.com/webslides&quot; title&#x3D;&quot;Twitter&quot;&gt;
+        @WebSlides
+      &lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_navigation.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/item-architecture-sizes.html b/doc/styleguide/item-layout-sizes.html
similarity index 77%
rename from doc/styleguide/item-architecture-sizes.html
rename to doc/styleguide/item-layout-sizes.html
index c050900..df6db8c 100644
--- a/doc/styleguide/item-architecture-sizes.html
+++ b/doc/styleguide/item-layout-sizes.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,36 +36,61 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-sizes" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-sizes" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-sizes">
-              Resizing
+            <a class="kss-title__permalink" href="#kssref-layout-sizes">
+              Sizes
             </a>
           </h2>
 
diff --git a/doc/styleguide/item-architecture-navigation.html b/doc/styleguide/item-layout-slide-navigation.html
similarity index 60%
rename from doc/styleguide/item-architecture-navigation.html
rename to doc/styleguide/item-layout-slide-navigation.html
index 9f487bd..5726d68 100644
--- a/doc/styleguide/item-architecture-navigation.html
+++ b/doc/styleguide/item-layout-slide-navigation.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-slide-navigation" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-navigation">
+            <a class="kss-title__permalink" href="#kssref-layout-slide-navigation">
               Slides navigation
             </a>
           </h2>
@@ -138,65 +163,6 @@
 
 
 
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
-/a>
-  <a id="previous" href="#" title="Arrow Keys">←</a>
-  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
-  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
-  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
-  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_navigation.scss</code>, line 1
-          </div>
-
-      </div>
-  </div>
-</div>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
-  prettyPrint();
-  var spy = new ScrollSpy('#kss-node', {
-    nav: '.kss-nav__menu-child > li > a',
-    className: 'is-in-viewport'
-  });
-  var kssFullScreen = new KssFullScreen({
-    idPrefix: 'kss-fullscreen-',
-    bodyClass: 'kss-fullscreen-mode',
-    elementClass: 'is-fullscreen'
-  });
-  var kssGuides = new KssGuides({
-    bodyClass: 'kss-guides-mode'
-  });
-  var kssMarkup = new KssMarkup({
-    bodyClass: 'kss-markup-mode',
-    detailsClass: 'kss-markup'
-  });
-</script>
-
-
-
 <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
 </body>
 </html>
diff --git a/doc/styleguide/item-architecture-slides-bottom.html b/doc/styleguide/item-layout-slides-bottom.html
similarity index 68%
rename from doc/styleguide/item-architecture-slides-bottom.html
rename to doc/styleguide/item-layout-slides-bottom.html
index 479f304..3d4967d 100644
--- a/doc/styleguide/item-architecture-slides-bottom.html
+++ b/doc/styleguide/item-layout-slides-bottom.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-slides-bottom" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-layout-slides-bottom" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides-bottom">
+            <a class="kss-title__permalink" href="#kssref-layout-slides-bottom">
               Align bottom
             </a>
           </h3>
diff --git a/doc/styleguide/item-layout-slides-fullscreen.html b/doc/styleguide/item-layout-slides-fullscreen.html
new file mode 100644
index 0000000..94d6ec4
--- /dev/null
+++ b/doc/styleguide/item-layout-slides-fullscreen.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout-slides-fullscreen" class="kss-section kss-section--depth-3 is-fullscreen">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-slides-fullscreen">
+              Fullscreen
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Slide with no padding (full card, .embed youtube video...)</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="fullscreen">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;fullscreen&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 43
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/item-architecture-slides-top.html b/doc/styleguide/item-layout-slides-top.html
similarity index 68%
rename from doc/styleguide/item-architecture-slides-top.html
rename to doc/styleguide/item-layout-slides-top.html
index a62b923..8c57f95 100644
--- a/doc/styleguide/item-architecture-slides-top.html
+++ b/doc/styleguide/item-layout-slides-top.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-slides-top" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-layout-slides-top" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides-top">
+            <a class="kss-title__permalink" href="#kssref-layout-slides-top">
               Align top
             </a>
           </h3>
diff --git a/doc/styleguide/item-architecture-slides.html b/doc/styleguide/item-layout-slides.html
similarity index 66%
rename from doc/styleguide/item-architecture-slides.html
rename to doc/styleguide/item-layout-slides.html
index a1628b5..9e22b49 100644
--- a/doc/styleguide/item-architecture-slides.html
+++ b/doc/styleguide/item-layout-slides.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-slides" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-layout-slides" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides">
+            <a class="kss-title__permalink" href="#kssref-layout-slides">
               Slides
             </a>
           </h2>
diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html
new file mode 100644
index 0000000..e7d814a
--- /dev/null
+++ b/doc/styleguide/item-layout.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-alignment">
+                    <span class="kss-nav__name">Align content</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-background">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-background-anim">
+                    <span class="kss-nav__name">Animated</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-background-video">
+                    <span class="kss-nav__name">Video</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-backgrounds">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-backgrounds">
+                    <span class="kss-nav__name">Layout.backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-backgrounds-gradient">
+                    <span class="kss-nav__name">Backgrounds - Gradient</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-backgrounds-transparent">
+                    <span class="kss-nav__name">Backgrounds - Transparent</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-grid">
+                    <span class="kss-nav__name">Grid</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-navbars">
+                    <span class="kss-nav__name">Navbars</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-sizes">
+                    <span class="kss-nav__name">Sizes</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slide-navigation">
+                    <span class="kss-nav__name">Slides navigation</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slides">
+                    <span class="kss-nav__name">Slides</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-bottom">
+                    <span class="kss-nav__name">Align bottom</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-fullscreen">
+                    <span class="kss-nav__name">Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-top">
+                    <span class="kss-nav__name">Align top</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-layout">
+              Layout
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/item-architecture-interviews.html b/doc/styleguide/item-longforms-interviews.html
similarity index 70%
rename from doc/styleguide/item-architecture-interviews.html
rename to doc/styleguide/item-longforms-interviews.html
index 5ed4268..359670f 100644
--- a/doc/styleguide/item-architecture-interviews.html
+++ b/doc/styleguide/item-longforms-interviews.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-interviews" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-longforms-interviews" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-interviews">
+            <a class="kss-title__permalink" href="#kssref-longforms-interviews">
               Interviews
             </a>
           </h2>
diff --git a/doc/styleguide/item-landings-longform.html b/doc/styleguide/item-longforms.html
similarity index 60%
rename from doc/styleguide/item-landings-longform.html
rename to doc/styleguide/item-longforms.html
index 9b4ca37..eacb3c2 100644
--- a/doc/styleguide/item-landings-longform.html
+++ b/doc/styleguide/item-longforms.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,38 +36,70 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-longforms.html#kssref-longforms-interviews">
+                    <span class="kss-nav__name">Interviews</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings-longform" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-longforms" class="kss-section kss-section--depth-1 is-fullscreen">
 
         <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-longform">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-longforms">
               Longform
             </a>
-          </h2>
+          </h1>
 
 
         </div>
diff --git a/doc/styleguide/item-media-avatars.html b/doc/styleguide/item-media-avatars.html
index 2c5619a..d560018 100644
--- a/doc/styleguide/item-media-avatars.html
+++ b/doc/styleguide/item-media-avatars.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-media-background.html b/doc/styleguide/item-media-background.html
deleted file mode 100644
index a80a78d..0000000
--- a/doc/styleguide/item-media-background.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WebSlides - Documentation 1.5.0</title>
-
-  <meta name="description" content="">
-  <meta name="generator" content="kss-node">
-  <meta name="viewport" content="width=device-width">
-
-  <link rel="stylesheet" href="kss-assets/kss.css">
-  <link rel="stylesheet" href="../../static/css/webslides.css">
-
-</head>
-<body id="kss-node" class="kss-fullscreen-mode">
-<header class="kss-header">
-  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
-  <nav class="kss-header-nav">
-    <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
-    </ul>
-  </nav>
-</header>
-<div class="kss-sub-header">
-  <p>WebSlides - Documentation 1.5.0</p>
-</div>
-<div class="kss-container">
-  <div class="kss-sidebar kss-style">
-    <nav class="kss-nav">
-      <ul class="kss-nav__menu">
-        <li class="kss-nav__menu-item">
-          <a class="kss-nav__menu-link " href="./">
-            <span class="kss-nav__name">Introduction</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
-            <span class="kss-nav__name">Architecture</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
-            <span class="kss-nav__name">Contents</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
-          </a>
-        </li>
-        <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
-            <span class="kss-nav__name">Media</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div role="main" class="kss-main">
-
-      <div id="kssref-media-background" class="kss-section kss-section--depth-2 is-fullscreen">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-media-background">
-              Media.Background
-            </a>
-          </h2>
-
-
-        </div>
-
-
-
-
-      </div>
-  </div>
-</div>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
-  prettyPrint();
-  var spy = new ScrollSpy('#kss-node', {
-    nav: '.kss-nav__menu-child > li > a',
-    className: 'is-in-viewport'
-  });
-  var kssFullScreen = new KssFullScreen({
-    idPrefix: 'kss-fullscreen-',
-    bodyClass: 'kss-fullscreen-mode',
-    elementClass: 'is-fullscreen'
-  });
-  var kssGuides = new KssGuides({
-    bodyClass: 'kss-guides-mode'
-  });
-  var kssMarkup = new KssMarkup({
-    bodyClass: 'kss-markup-mode',
-    detailsClass: 'kss-markup'
-  });
-</script>
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html
index 3f9e17a..fea7518 100644
--- a/doc/styleguide/item-media-embed.html
+++ b/doc/styleguide/item-media-embed.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-media-fullscreen-embed.html b/doc/styleguide/item-media-fullscreen-embed.html
index 7145354..df42dfa 100644
--- a/doc/styleguide/item-media-fullscreen-embed.html
+++ b/doc/styleguide/item-media-fullscreen-embed.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-media-fullscreen.html b/doc/styleguide/item-media-fullscreen.html
index cfd71fd..280fad5 100644
--- a/doc/styleguide/item-media-fullscreen.html
+++ b/doc/styleguide/item-media-fullscreen.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-media-screenshots.html b/doc/styleguide/item-media-screenshots.html
index 4c1727c..4ef0bb9 100644
--- a/doc/styleguide/item-media-screenshots.html
+++ b/doc/styleguide/item-media-screenshots.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,25 +36,50 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html
index 1e45590..4bc54a8 100644
--- a/doc/styleguide/item-media.html
+++ b/doc/styleguide/item-media.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,22 +36,37 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
               <ul class="kss-nav__menu-child">
@@ -60,26 +75,6 @@
                     <span class="kss-nav__name">Avatars</span>
                   </a>
                 </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-background">
-                    <span class="kss-nav__name">Media.Background</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-anim">
-                    <span class="kss-nav__name">Animated</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-video">
-                    <span class="kss-nav__name">Video</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-badgets">
-                    <span class="kss-nav__name">Badges</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-embed">
                     <span class="kss-nav__name">Embed</span>
@@ -102,6 +97,16 @@
                 </li>
               </ul>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/doc/styleguide/item-contents-activity.html b/doc/styleguide/item-multipurpose-blocks-activity.html
similarity index 76%
rename from doc/styleguide/item-contents-activity.html
rename to doc/styleguide/item-multipurpose-blocks-activity.html
index bad61bd..647c510 100644
--- a/doc/styleguide/item-contents-activity.html
+++ b/doc/styleguide/item-multipurpose-blocks-activity.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-activity" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-activity" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-activity">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-activity">
                CVs, News ad Activity
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-clients.html b/doc/styleguide/item-multipurpose-blocks-clients.html
similarity index 77%
rename from doc/styleguide/item-contents-clients.html
rename to doc/styleguide/item-multipurpose-blocks-clients.html
index c260ddd..600c7f3 100644
--- a/doc/styleguide/item-contents-clients.html
+++ b/doc/styleguide/item-multipurpose-blocks-clients.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-clients" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-clients" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-clients">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-clients">
               Clients
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-features.html b/doc/styleguide/item-multipurpose-blocks-features.html
similarity index 73%
rename from doc/styleguide/item-contents-features.html
rename to doc/styleguide/item-multipurpose-blocks-features.html
index 84ed8da..d85849f 100644
--- a/doc/styleguide/item-contents-features.html
+++ b/doc/styleguide/item-multipurpose-blocks-features.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-features" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-features" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-features">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-features">
               Features
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-gallery-overlay.html b/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html
similarity index 73%
rename from doc/styleguide/item-contents-gallery-overlay.html
rename to doc/styleguide/item-multipurpose-blocks-gallery-overlay.html
index 6b32cd8..209e5f2 100644
--- a/doc/styleguide/item-contents-gallery-overlay.html
+++ b/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-gallery-overlay" class="kss-section kss-section--depth-3 is-fullscreen">
 
         <div class="kss-style">
           <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-contents-gallery-overlay">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-gallery-overlay">
               Gallery + Overflow
             </a>
           </h3>
diff --git a/doc/styleguide/item-contents-gallery.html b/doc/styleguide/item-multipurpose-blocks-gallery.html
similarity index 74%
rename from doc/styleguide/item-contents-gallery.html
rename to doc/styleguide/item-multipurpose-blocks-gallery.html
index 21c4336..0690e91 100644
--- a/doc/styleguide/item-contents-gallery.html
+++ b/doc/styleguide/item-multipurpose-blocks-gallery.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-gallery" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-gallery">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-gallery">
               Galleries (portfolios, teams...)
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-metrics.html b/doc/styleguide/item-multipurpose-blocks-metrics.html
similarity index 71%
rename from doc/styleguide/item-contents-metrics.html
rename to doc/styleguide/item-multipurpose-blocks-metrics.html
index 13be64a..155aa66 100644
--- a/doc/styleguide/item-contents-metrics.html
+++ b/doc/styleguide/item-multipurpose-blocks-metrics.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-metrics" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-metrics">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-metrics">
               Metrics
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-plans.html b/doc/styleguide/item-multipurpose-blocks-plans.html
similarity index 79%
rename from doc/styleguide/item-contents-plans.html
rename to doc/styleguide/item-multipurpose-blocks-plans.html
index 5504e00..449bbfa 100644
--- a/doc/styleguide/item-contents-plans.html
+++ b/doc/styleguide/item-multipurpose-blocks-plans.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-plans" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-plans" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-plans">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-plans">
               Plans / Pricing
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-reasons.html b/doc/styleguide/item-multipurpose-blocks-reasons.html
similarity index 70%
rename from doc/styleguide/item-contents-reasons.html
rename to doc/styleguide/item-multipurpose-blocks-reasons.html
index 4e439c1..93b960c 100644
--- a/doc/styleguide/item-contents-reasons.html
+++ b/doc/styleguide/item-multipurpose-blocks-reasons.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-reasons" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-reasons" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-reasons">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-reasons">
               Reasons
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-specs.html b/doc/styleguide/item-multipurpose-blocks-specs.html
similarity index 70%
rename from doc/styleguide/item-contents-specs.html
rename to doc/styleguide/item-multipurpose-blocks-specs.html
index 9fec135..d3d0824 100644
--- a/doc/styleguide/item-contents-specs.html
+++ b/doc/styleguide/item-multipurpose-blocks-specs.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-specs" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-specs" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-specs">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-specs">
               Specs
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-steps.html b/doc/styleguide/item-multipurpose-blocks-steps.html
similarity index 72%
rename from doc/styleguide/item-contents-steps.html
rename to doc/styleguide/item-multipurpose-blocks-steps.html
index e2c2864..77e14e3 100644
--- a/doc/styleguide/item-contents-steps.html
+++ b/doc/styleguide/item-multipurpose-blocks-steps.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-steps" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks-steps" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-steps">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-steps">
                Steps
             </a>
           </h2>
diff --git a/doc/styleguide/item-contents-flexblocks.html b/doc/styleguide/item-multipurpose-blocks.html
similarity index 51%
rename from doc/styleguide/item-contents-flexblocks.html
rename to doc/styleguide/item-multipurpose-blocks.html
index da7e6e3..65b5908 100644
--- a/doc/styleguide/item-contents-flexblocks.html
+++ b/doc/styleguide/item-multipurpose-blocks.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,38 +36,115 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-activity">
+                    <span class="kss-nav__name"> CVs, News ad Activity</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-clients">
+                    <span class="kss-nav__name">Clients</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-features">
+                    <span class="kss-nav__name">Features</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-gallery">
+                    <span class="kss-nav__name">Galleries (portfolios, teams...)</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-gallery-overlay">
+                    <span class="kss-nav__name">Gallery + Overflow</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-metrics">
+                    <span class="kss-nav__name">Metrics</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-plans">
+                    <span class="kss-nav__name">Plans / Pricing</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-reasons">
+                    <span class="kss-nav__name">Reasons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-specs">
+                    <span class="kss-nav__name">Specs</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-steps">
+                    <span class="kss-nav__name"> Steps</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-contents-flexblocks" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-multipurpose-blocks" class="kss-section kss-section--depth-1 is-fullscreen">
 
         <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-flexblocks">
-              Flexblocks
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks">
+              Multipurpose blocks
             </a>
-          </h2>
+          </h1>
 
             <div class="kss-description">
               <p>Auto-fill &amp; Equal height columns</p>
diff --git a/doc/styleguide/item-architecture-columns.html b/doc/styleguide/item-typography-columns.html
similarity index 66%
rename from doc/styleguide/item-architecture-columns.html
rename to doc/styleguide/item-typography-columns.html
index c101815..ac802d3 100644
--- a/doc/styleguide/item-architecture-columns.html
+++ b/doc/styleguide/item-typography-columns.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-columns" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-columns" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-columns">
+            <a class="kss-title__permalink" href="#kssref-typography-columns">
               Columns
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-context.html b/doc/styleguide/item-typography-context.html
similarity index 65%
rename from doc/styleguide/item-architecture-context.html
rename to doc/styleguide/item-typography-context.html
index 4d7097e..b97361f 100644
--- a/doc/styleguide/item-architecture-context.html
+++ b/doc/styleguide/item-typography-context.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-context" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-context" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-context">
+            <a class="kss-title__permalink" href="#kssref-typography-context">
               Context
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-data.html b/doc/styleguide/item-typography-data.html
similarity index 65%
rename from doc/styleguide/item-architecture-data.html
rename to doc/styleguide/item-typography-data.html
index ab94cf4..5443d3d 100644
--- a/doc/styleguide/item-architecture-data.html
+++ b/doc/styleguide/item-typography-data.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-data" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-data" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-data">
+            <a class="kss-title__permalink" href="#kssref-typography-data">
               Data
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-emoji.html b/doc/styleguide/item-typography-emoji.html
similarity index 65%
rename from doc/styleguide/item-architecture-emoji.html
rename to doc/styleguide/item-typography-emoji.html
index 52587c7..c0158e6 100644
--- a/doc/styleguide/item-architecture-emoji.html
+++ b/doc/styleguide/item-typography-emoji.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-emoji" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-emoji" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-emoji">
+            <a class="kss-title__permalink" href="#kssref-typography-emoji">
               Emoji
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-info.html b/doc/styleguide/item-typography-info.html
similarity index 66%
rename from doc/styleguide/item-architecture-info.html
rename to doc/styleguide/item-typography-info.html
index 4f891bd..f5a5486 100644
--- a/doc/styleguide/item-architecture-info.html
+++ b/doc/styleguide/item-typography-info.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-info" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-info" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-info">
+            <a class="kss-title__permalink" href="#kssref-typography-info">
               Info Messages
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-intro.html b/doc/styleguide/item-typography-intro.html
similarity index 65%
rename from doc/styleguide/item-architecture-intro.html
rename to doc/styleguide/item-typography-intro.html
index fc5af1b..a4af75b 100644
--- a/doc/styleguide/item-architecture-intro.html
+++ b/doc/styleguide/item-typography-intro.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-intro" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-intro" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-intro">
+            <a class="kss-title__permalink" href="#kssref-typography-intro">
               Intro
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-label.html b/doc/styleguide/item-typography-label.html
similarity index 65%
rename from doc/styleguide/item-architecture-label.html
rename to doc/styleguide/item-typography-label.html
index 09e20c0..6eafcb7 100644
--- a/doc/styleguide/item-architecture-label.html
+++ b/doc/styleguide/item-typography-label.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-label" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-label" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-label">
+            <a class="kss-title__permalink" href="#kssref-typography-label">
               Label
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-landings.html b/doc/styleguide/item-typography-landings.html
similarity index 65%
rename from doc/styleguide/item-architecture-landings.html
rename to doc/styleguide/item-typography-landings.html
index f6cb17a..3b4b96c 100644
--- a/doc/styleguide/item-architecture-landings.html
+++ b/doc/styleguide/item-typography-landings.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-landings" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-landings" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-landings">
+            <a class="kss-title__permalink" href="#kssref-typography-landings">
               Landings
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-lowercase.html b/doc/styleguide/item-typography-lowercase.html
similarity index 65%
rename from doc/styleguide/item-architecture-lowercase.html
rename to doc/styleguide/item-typography-lowercase.html
index 97c5423..144e381 100644
--- a/doc/styleguide/item-architecture-lowercase.html
+++ b/doc/styleguide/item-typography-lowercase.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-lowercase" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-lowercase">
+            <a class="kss-title__permalink" href="#kssref-typography-lowercase">
               Lowercase
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-pull_quote.html b/doc/styleguide/item-typography-pull_quote.html
similarity index 70%
rename from doc/styleguide/item-architecture-pull_quote.html
rename to doc/styleguide/item-typography-pull_quote.html
index 5955e9b..4d66611 100644
--- a/doc/styleguide/item-architecture-pull_quote.html
+++ b/doc/styleguide/item-typography-pull_quote.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,36 +36,61 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-pull_quote" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-pull_quote">
-              Pull Quote
+            <a class="kss-title__permalink" href="#kssref-typography-pull_quote">
+              Pulls
             </a>
           </h2>
 
diff --git a/doc/styleguide/item-architecture-separator.html b/doc/styleguide/item-typography-separator.html
similarity index 65%
rename from doc/styleguide/item-architecture-separator.html
rename to doc/styleguide/item-typography-separator.html
index 1b7f6b8..21cd3fb 100644
--- a/doc/styleguide/item-architecture-separator.html
+++ b/doc/styleguide/item-typography-separator.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-separator" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-separator" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-separator">
+            <a class="kss-title__permalink" href="#kssref-typography-separator">
               Separator
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-serif.html b/doc/styleguide/item-typography-serif.html
similarity index 65%
rename from doc/styleguide/item-architecture-serif.html
rename to doc/styleguide/item-typography-serif.html
index 0a0d665..f0f58a6 100644
--- a/doc/styleguide/item-architecture-serif.html
+++ b/doc/styleguide/item-typography-serif.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-serif" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-serif" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-serif">
+            <a class="kss-title__permalink" href="#kssref-typography-serif">
               Serif
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-shadow.html b/doc/styleguide/item-typography-shadow.html
similarity index 71%
rename from doc/styleguide/item-architecture-shadow.html
rename to doc/styleguide/item-typography-shadow.html
index ac95150..7009e35 100644
--- a/doc/styleguide/item-architecture-shadow.html
+++ b/doc/styleguide/item-typography-shadow.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-shadow" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-shadow" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-shadow">
+            <a class="kss-title__permalink" href="#kssref-typography-shadow">
               Shadows
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-subtitle.html b/doc/styleguide/item-typography-subtitle.html
similarity index 66%
rename from doc/styleguide/item-architecture-subtitle.html
rename to doc/styleguide/item-typography-subtitle.html
index a38247a..923fbc3 100644
--- a/doc/styleguide/item-architecture-subtitle.html
+++ b/doc/styleguide/item-typography-subtitle.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-subtitle" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-subtitle">
+            <a class="kss-title__permalink" href="#kssref-typography-subtitle">
               Subtitule
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-symbols.html b/doc/styleguide/item-typography-symbols.html
similarity index 65%
rename from doc/styleguide/item-architecture-symbols.html
rename to doc/styleguide/item-typography-symbols.html
index f718ead..f7ad621 100644
--- a/doc/styleguide/item-architecture-symbols.html
+++ b/doc/styleguide/item-typography-symbols.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-symbols" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-symbols" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-symbols">
+            <a class="kss-title__permalink" href="#kssref-typography-symbols">
               Symbols
             </a>
           </h2>
diff --git a/doc/styleguide/item-architecture-uppercase.html b/doc/styleguide/item-typography-uppercase.html
similarity index 65%
rename from doc/styleguide/item-architecture-uppercase.html
rename to doc/styleguide/item-typography-uppercase.html
index 5bf4278..6f7fb85 100644
--- a/doc/styleguide/item-architecture-uppercase.html
+++ b/doc/styleguide/item-typography-uppercase.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,35 +36,60 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-architecture-uppercase" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 is-fullscreen">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-uppercase">
+            <a class="kss-title__permalink" href="#kssref-typography-uppercase">
               Uppercase
             </a>
           </h2>
diff --git a/doc/styleguide/item-typography.html b/doc/styleguide/item-typography.html
new file mode 100644
index 0000000..010871b
--- /dev/null
+++ b/doc/styleguide/item-typography.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-columns">
+                    <span class="kss-nav__name">Columns</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-context">
+                    <span class="kss-nav__name">Context</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-data">
+                    <span class="kss-nav__name">Data</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-emoji">
+                    <span class="kss-nav__name">Emoji</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-info">
+                    <span class="kss-nav__name">Info Messages</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-intro">
+                    <span class="kss-nav__name">Intro</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-label">
+                    <span class="kss-nav__name">Label</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-landings">
+                    <span class="kss-nav__name">Landings</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-lowercase">
+                    <span class="kss-nav__name">Lowercase</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-pull_quote">
+                    <span class="kss-nav__name">Pulls</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-separator">
+                    <span class="kss-nav__name">Separator</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-serif">
+                    <span class="kss-nav__name">Serif</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-shadow">
+                    <span class="kss-nav__name">Shadows</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-subtitle">
+                    <span class="kss-nav__name">Subtitule</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-symbols">
+                    <span class="kss-nav__name">Symbols</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-uppercase">
+                    <span class="kss-nav__name">Uppercase</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography" class="kss-section kss-section--depth-1 is-fullscreen">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-typography">
+              Typography
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/kss-assets/arrow_down.svg b/doc/styleguide/kss-assets/arrow_down.svg
new file mode 100644
index 0000000..01aa8c9
--- /dev/null
+++ b/doc/styleguide/kss-assets/arrow_down.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="9.9999971"
+   height="5.5346432"
+   viewBox="0 0 9.9999977 5.5346432"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow_down.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="79.100028"
+     inkscape:cx="4.9999972"
+     inkscape:cy="2.7673237"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4147"
+       originx="-191.71574"
+       originy="-661.71576" />
+  </sodipodi:namedview>
+  <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
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.71573,-385.11179)">
+    <path
+       style="fill:#5f6971;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 192.01499,386.13349 3.97364,3.97363 c 0.72248,0.72248 0.72248,0.72248 1.44495,-0.0206 l 3.99944,-3.92719 c 0.69668,-0.74828 -0.0258,-1.47076 -0.74828,-0.74828 l -3.94783,3.97363 -3.99944,-3.97363 c -0.72248,-0.72248 -1.44496,0 -0.72248,0.72248 z"
+       id="path4149"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/doc/styleguide/kss-assets/arrow_up.svg b/doc/styleguide/kss-assets/arrow_up.svg
new file mode 100644
index 0000000..a552ff9
--- /dev/null
+++ b/doc/styleguide/kss-assets/arrow_up.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="9.9999971"
+   height="5.5346432"
+   viewBox="0 0 9.9999977 5.5346432"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow_up.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="79.100028"
+     inkscape:cx="4.9999972"
+     inkscape:cy="2.7673237"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:window-width="1301"
+     inkscape:window-height="744"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4147"
+       originx="-191.71574"
+       originy="-661.71576" />
+  </sodipodi:namedview>
+  <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
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.71573,-385.11179)">
+    <path
+       style="fill:#5f6971;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 192.01499,389.62473 3.97364,-3.97363 c 0.72248,-0.72248 0.72248,-0.72248 1.44495,0.0206 l 3.99944,3.92719 c 0.69668,0.74828 -0.0258,1.47076 -0.74828,0.74828 l -3.94783,-3.97363 -3.99944,3.97363 c -0.72248,0.72248 -1.44496,0 -0.72248,-0.72248 z"
+       id="path4149"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css
index f310e70..706207f 100644
--- a/doc/styleguide/kss-assets/kss.css
+++ b/doc/styleguide/kss-assets/kss.css
@@ -213,9 +213,9 @@
     #kss-node .kss-nav li {
       margin-left: 3.2rem; }
     #kss-node .kss-nav .kss-nav-has-children > a::before {
-      content: url("./images/down_arrow.svg"); }
+      content: url("./arrow_down.svg"); }
     #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before {
-      content: url("./images/up_arrow.svg"); }
+      content: url("./arrow_up.svg"); }
   #kss-node .kss-nav__menu {
     list-style-type: none;
     margin-bottom: 12px;
@@ -256,7 +256,8 @@
     #kss-node .kss-nav__ref:after {
       content: ' '; }
   #kss-node .kss-nav__ref-child {
-    font-weight: normal; }
+    font-weight: normal;
+    padding-left: 1.2rem; }
   #kss-node .kss-section {
     padding-bottom: 2.4rem;
     padding-top: 2.4rem; }
@@ -443,6 +444,15 @@
     z-index: 0; }
     #kss-node .kss-modifier__example:last-child {
       margin-bottom: 0; }
+    #kss-node .kss-modifier__example .fullscreen {
+      border: 2px solid #e7e7e9;
+      border-radius: 6px;
+      padding-bottom: 50%; }
+      #kss-node .kss-modifier__example .fullscreen::before {
+        background-color: #f3f3f5;
+        content: '';
+        display: block;
+        height: 20px; }
   #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
   #kss-node.kss-guides-mode .kss-modifier__example-footer:before,
   #kss-node.kss-guides-mode .kss-modifier__example-footer:after {
@@ -495,9 +505,9 @@
     margin: 24px 0;
     padding: 20px; }
     #kss-node .kss-markup[open] summary {
-      background: url("./images/up_arrow.svg") no-repeat right center; }
+      background: url("./arrow_up.svg") no-repeat right center; }
     #kss-node .kss-markup summary {
-      background: url("./images/down_arrow.svg") no-repeat right center;
+      background: url("./arrow_down.svg") no-repeat right center;
       cursor: pointer; }
     #kss-node .kss-markup pre {
       background: #1d1f20;
@@ -545,6 +555,8 @@
       color: #d1783e;
       font-size: 13.33333px;
       font-weight: bold; }
+  #kss-node .fullscreen > .embed {
+    position: relative; }
 
 .kss-container {
   display: grid;
diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss
index 4f1275f..cce200e 100644
--- a/doc/styleguide/kss-assets/kss.scss
+++ b/doc/styleguide/kss-assets/kss.scss
@@ -365,11 +365,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     }
 
     .kss-nav-has-children > a::before {
-      content: url('./images/down_arrow.svg');
+      content: url('./arrow_down.svg');
     }
 
     .kss-nav-has-children > a.kss-nav__menu-link-active::before {
-      content: url('./images/up_arrow.svg');
+      content: url('./arrow_up.svg');
     }
   }
 
@@ -435,6 +435,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
 
   .kss-nav__ref-child {
     font-weight: normal;
+    padding-left: 1.2rem;
   }
 
   // ------------------------------------------------------------------------------
@@ -702,6 +703,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     margin-bottom: ($kss-vertical-rhythm / 2);
   }
 
+
   .is-fullscreen .kss-modifier__description {
     margin-right: 20px;
   }
@@ -716,6 +718,19 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     &:last-child {
       margin-bottom: 0;
     }
+
+    .fullscreen {
+      border: 2px solid $kss-colors-subheader-border;
+      border-radius: 6px;
+      padding-bottom: 50%;
+
+      &::before {
+        background-color: $kss-colors-subheader-bg;
+        content: '';
+        display: block;
+        height: 20px;
+      }
+    }
   }
 
   &.kss-guides-mode .kss-modifier__example,
@@ -801,11 +816,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     padding: 20px;
 
     &[open] summary {
-      background: url('./images/up_arrow.svg') no-repeat right center;
+      background: url('./arrow_up.svg') no-repeat right center;
     }
 
     & summary {
-      background: url('./images/down_arrow.svg') no-repeat right center;
+      background: url('./arrow_down.svg') no-repeat right center;
       cursor: pointer;
     }
 
@@ -879,6 +894,10 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
       font-weight: bold;
     }
   }
+
+  .fullscreen > .embed {
+    position: relative;
+  }
 }
 
 .kss-container {
diff --git a/doc/styleguide/section-architecture.html b/doc/styleguide/section-architecture.html
index 0212909..da8b8c4 100644
--- a/doc/styleguide/section-architecture.html
+++ b/doc/styleguide/section-architecture.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,212 +36,62 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
               <ul class="kss-nav__menu-child">
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-alignment">
-                    <span class="kss-nav__name">Align content</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-background">
-                    <span class="kss-nav__name">Backgrounds</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
-                    <span class="kss-nav__name">Architecture.backgrounds</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-backgrounds">
-                    <span class="kss-nav__name">Backgrounds</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-gradient">
-                    <span class="kss-nav__name">Backgrounds - Gradient</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-backgrounds-transparent">
-                    <span class="kss-nav__name">Backgrounds - Transparent</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-buttons">
-                    <span class="kss-nav__name">Buttons</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-columns">
-                    <span class="kss-nav__name">Columns</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-context">
-                    <span class="kss-nav__name">Context</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-data">
-                    <span class="kss-nav__name">Data</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-emoji">
-                    <span class="kss-nav__name">Emoji</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-forms">
-                    <span class="kss-nav__name">Architecture.Forms</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-forms-user">
-                    <span class="kss-nav__name">Login form</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-grid">
-                    <span class="kss-nav__name">Grid</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-info">
-                    <span class="kss-nav__name">Info Messages</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-interviews">
-                    <span class="kss-nav__name">Interviews</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-intro">
-                    <span class="kss-nav__name">Intro</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-label">
-                    <span class="kss-nav__name">Label</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-landings">
-                    <span class="kss-nav__name">Landings</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-lowercase">
-                    <span class="kss-nav__name">Lowercase</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
-                    <span class="kss-nav__name">Navigation</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-navigation">
-                    <span class="kss-nav__name">Slides navigation</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-pull_quote">
-                    <span class="kss-nav__name">Pull Quote</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-radius">
                     <span class="kss-nav__name">Radius</span>
                   </a>
                 </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-separator">
-                    <span class="kss-nav__name">Separator</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-serif">
-                    <span class="kss-nav__name">Serif</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-shadow">
-                    <span class="kss-nav__name">Shadows</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-sizes">
-                    <span class="kss-nav__name">Resizing</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
-                    <span class="kss-nav__name">fullscreen</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-slides">
-                    <span class="kss-nav__name">Slides</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-bottom">
-                    <span class="kss-nav__name">Align bottom</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-architecture.html#kssref-architecture-slides-top">
-                    <span class="kss-nav__name">Align top</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-subtitle">
-                    <span class="kss-nav__name">Subtitule</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-symbols">
-                    <span class="kss-nav__name">Symbols</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-tables">
-                    <span class="kss-nav__name">Tables</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-try">
                     <span class="kss-nav__name">Try</span>
                   </a>
                 </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-architecture.html#kssref-architecture-uppercase">
-                    <span class="kss-nav__name">Uppercase</span>
-                  </a>
-                </li>
               </ul>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
@@ -262,1291 +112,6 @@
 
 
 
-      </div>
-      <div id="kssref-architecture-alignment" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-alignment">
-              Align content
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <div>
-  <img src="../../../static/images/iphone.png" class="size-50 " />
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .alignright
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Align right.
-              </div>
-              <div class="kss-modifier__example">
-                <div>
-  <img src="../../../static/images/iphone.png" class="size-50 alignright" />
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .alignleft
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Align left.
-              </div>
-              <div class="kss-modifier__example">
-                <div>
-  <img src="../../../static/images/iphone.png" class="size-50 alignleft" />
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .aligncenter
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Align center.
-              </div>
-              <div class="kss-modifier__example">
-                <div>
-  <img src="../../../static/images/iphone.png" class="size-50 aligncenter" />
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
-  &lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;size-50 [modifier class]&quot; /&gt;
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.&lt;/p&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 143
-          </div>
-
-      </div>
-      <div id="kssref-architecture-background" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-background">
-              Backgrounds
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <section>
-  <span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .background
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Center.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-top
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Top.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-bottom
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Bottom.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-center
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Center.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-center-top
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Center top.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-left-top
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Left top.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-right-top
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Right top.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-center-bottom
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Center bottom.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-left-bottom
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Left bottom.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-right-bottom
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Right bottom.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-left
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Left.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .background-right
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Right.
-              </div>
-              <div class="kss-modifier__example">
-                <section>
-  <span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
-  &lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides-bg.scss</code>, line 15
-          </div>
-
-      </div>
-      <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
-              Architecture.backgrounds
-            </a>
-          </h2>
-
-
-        </div>
-
-
-
-
-      </div>
-      <div id="kssref-architecture-backgrounds" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds">
-              Backgrounds
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Colors we use for backgrounds.</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <span class="bg-primary size-20">Primary #44d</span>
-<span class="bg-secondary size-20">Secondary #67d</span>
-<span class="bg-light size-20">Light #f7f9fb</span>
-<span class="bg-black size-20">Black #000</span>
-<span class="bg-black-blue size-20">Black blue #123</span>
-<span class="bg-blue size-20">Blue #346</span>
-<span class="bg-brown size-20">Brown #f9f8f2</span>
-<span class="bg-gray size-20">Gray #d5d9e2</span>
-<span class="bg-green size-20">Green #077</span>
-<span class="bg-purple size-20">Purple #62b</span>
-<span class="bg-red size-20">Red #c23</span>
-<span class="bg-white size-20">White #fff</span>
-<span class="bg-facebook size-20">Facebook #3b5998</span>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
-&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_color.scss</code>, line 107
-          </div>
-
-      </div>
-      <div id="kssref-architecture-backgrounds-gradient" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-gradient">
-              Backgrounds - Gradient
-            </a>
-          </h3>
-
-            <div class="kss-description">
-              <p>Colors we use for backgrounds.</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-                <div class="bg-gradient-h">Horizontal</div>
-  <div class="bg-gradient-v">Vertical</div>
-  <div class="bg-gradient-r">Radial</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">  &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
-  &lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
-  &lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_color.scss</code>, line 193
-          </div>
-
-      </div>
-      <div id="kssref-architecture-backgrounds-transparent" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-backgrounds-transparent">
-              Backgrounds - Transparent
-            </a>
-          </h3>
-
-            <div class="kss-description">
-              <p>Colors we use for backgrounds.</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <div class="bg-red">
-  <div class="bg-trans-dark">Dark</div>
-  <div class="bg-trans-light">Light</div>
-  <div class="bg-trans-gradient">Gradient</div>
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-red&quot;&gt;
-  &lt;div class&#x3D;&quot;bg-trans-dark&quot;&gt;Dark&lt;/div&gt;
-  &lt;div class&#x3D;&quot;bg-trans-light&quot;&gt;Light&lt;/div&gt;
-  &lt;div class&#x3D;&quot;bg-trans-gradient&quot;&gt;Gradient&lt;/div&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_color.scss</code>, line 168
-          </div>
-
-      </div>
-      <div id="kssref-architecture-buttons" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-buttons">
-              Buttons
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <a href="#" class="button ">Download</a>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .radius
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Rounded corners
-              </div>
-              <div class="kss-modifier__example">
-                <a href="#" class="button radius">Download</a>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_button.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-architecture-columns" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-columns">
-              Columns
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Magazine Two Columns</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 346
-          </div>
-
-      </div>
-      <div id="kssref-architecture-context" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-context">
-              Context
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Heading with border</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-context">Why WebSlides?</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 376
-          </div>
-
-      </div>
-      <div id="kssref-architecture-data" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-data">
-              Data
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Numbers (results, sales... )-</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-data">23,478,289</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 314
-          </div>
-
-      </div>
-      <div id="kssref-architecture-emoji" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-emoji">
-              Emoji
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>You&#39;ll love this</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 296
-          </div>
-
-      </div>
-      <div id="kssref-architecture-forms" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-forms">
-              Architecture.Forms
-            </a>
-          </h2>
-
-
-        </div>
-
-
-
-
-      </div>
-      <div id="kssref-architecture-forms-user" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-forms-user">
-              Login form
-            </a>
-          </h3>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <div class="user">
-  <input type="text" placeholder="Username" />
-  <button>Log in</button>
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
-  &lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
-  &lt;button&gt;Log in&lt;/button&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_form.scss</code>, line 139
-          </div>
-
-      </div>
-      <div id="kssref-architecture-grid" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-grid">
-              Grid
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Basic Grid (Flexible blocks)
-Auto-fill &amp; Equal height</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <div class="grid ">
-  <div class="column">
-    <h3><strong>WebSlides is really easy</strong></h3>
-    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
-    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
-  </div>
-  <div class="column">
-    <h3><strong>WebSlides is the clean</strong></h3>
-    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
-  </div>
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .vertical-align
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Vertical align
-              </div>
-              <div class="kss-modifier__example">
-                <div class="grid vertical-align">
-  <div class="column">
-    <h3><strong>WebSlides is really easy</strong></h3>
-    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
-    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
-  </div>
-  <div class="column">
-    <h3><strong>WebSlides is the clean</strong></h3>
-    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
-  </div>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
-  &lt;div class&#x3D;&quot;column&quot;&gt;
-    &lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
-    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
-    &lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div class&#x3D;&quot;column&quot;&gt;
-    &lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
-    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_grid.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-architecture-info" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-info">
-              Info Messages
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Error, warning, success...</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 546
-          </div>
-
-      </div>
-      <div id="kssref-architecture-interviews" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-interviews">
-              Interviews
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Questions &amp; Answers</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <dl class="text-interview">
-  <dt>Driftwood</dt>
-  <dd>
-    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
-  </dd>
-  <dt>Fiorello</dt>
-  <dd>
-    <p>No. It's no good.</p>
-  </dd>
-  <dt>Driftwood</dt>
-  <dd>
-    <p>What's the matter with it?</p>
-  </dd>
-  <dt>Fiorello</dt>
-  <dd>
-    <p>I don't know, let's hear it again.</p>
-  </dd>
-</dl>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class&#x3D;&quot;text-interview&quot;&gt;
-  &lt;dt&gt;Driftwood&lt;/dt&gt;
-  &lt;dd&gt;
-    &lt;p&gt;It says, &quot;The party of the first part shall be known in this contract as the party of the first part.&quot; How do you like that? That&#x27;s pretty neat, eh?&lt;/p&gt;
-  &lt;/dd&gt;
-  &lt;dt&gt;Fiorello&lt;/dt&gt;
-  &lt;dd&gt;
-    &lt;p&gt;No. It&#x27;s no good.&lt;/p&gt;
-  &lt;/dd&gt;
-  &lt;dt&gt;Driftwood&lt;/dt&gt;
-  &lt;dd&gt;
-    &lt;p&gt;What&#x27;s the matter with it?&lt;/p&gt;
-  &lt;/dd&gt;
-  &lt;dt&gt;Fiorello&lt;/dt&gt;
-  &lt;dd&gt;
-    &lt;p&gt;I don&#x27;t know, let&#x27;s hear it again.&lt;/p&gt;
-  &lt;/dd&gt;
-&lt;/dl&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 504
-          </div>
-
-      </div>
-      <div id="kssref-architecture-intro" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-intro">
-              Intro
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Typography Classes = .text-</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-intro">Create a simple web presence.</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 206
-          </div>
-
-      </div>
-      <div id="kssref-architecture-label" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-label">
-              Label
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 333
-          </div>
-
-      </div>
-      <div id="kssref-architecture-landings" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-landings">
-              Landings
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>h1,h2... Promo/Landings</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <h1 class="text-landing">Landings</h1>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 233
-          </div>
-
-      </div>
-      <div id="kssref-architecture-lowercase" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-lowercase">
-              Lowercase
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-lowercase">Create a simple web presence.</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 286
-          </div>
-
-      </div>
-      <div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-navigation">
-              Navigation
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Responsive Media (videos, iframe...)</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <div id="navigation">
-  <a id="next" href="#" title="Arrow Keys">→</a>
-  <a id="previous" href="#" title="Arrow Keys">←</a>
-  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .navbar
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Navigation bar
-              </div>
-              <div class="kss-modifier__example">
-                <div id="navigation">
-  <a id="next" href="#" title="Arrow Keys">→</a>
-  <a id="previous" href="#" title="Arrow Keys">←</a>
-  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .aligncenter
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Center alignment
-              </div>
-              <div class="kss-modifier__example">
-                <div id="navigation">
-  <a id="next" href="#" title="Arrow Keys">→</a>
-  <a id="previous" href="#" title="Arrow Keys">←</a>
-  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .alignright
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Right alignment
-              </div>
-              <div class="kss-modifier__example">
-                <div id="navigation">
-  <a id="next" href="#" title="Arrow Keys">→</a>
-  <a id="previous" href="#" title="Arrow Keys">←</a>
-  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
-</div>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
-  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
-  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
-  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_navigation.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-architecture-navigation" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-navigation">
-              Slides navigation
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <div id="navigation">
-  <a id="next" href="#" title="Arrow Keys">→</a>
-  <a id="previous" href="#" title="Arrow Keys">←</a>
-  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
-  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
-  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
-  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides-navigation.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-architecture-pull_quote" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-pull_quote">
-              Pull Quote
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Pull Quote Right/Left</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
-<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
-<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
-<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
-&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
-&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
-&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 449
-          </div>
-
       </div>
       <div id="kssref-architecture-radius" class="kss-section kss-section--depth-2 ">
 
@@ -1593,635 +158,6 @@ Auto-fill &amp; Equal height</p>
             Source: <code>_base.scss</code>, line 129
           </div>
 
-      </div>
-      <div id="kssref-architecture-separator" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-separator">
-              Separator
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Stars <em> </em> *</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-separator">Separator</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 418
-          </div>
-
-      </div>
-      <div id="kssref-architecture-serif" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-serif">
-              Serif
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Maitree font</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-serif">Create a simple web presence.</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-serif&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 220
-          </div>
-
-      </div>
-      <div id="kssref-architecture-shadow" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-shadow">
-              Shadows
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Drops a shadow under the layer. The layer containing the shadow has to have a solid background</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <div class="bg-white shadow">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
-</div>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-white shadow&quot;&gt;
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
-&lt;/div&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 73
-          </div>
-
-      </div>
-      <div id="kssref-architecture-sizes" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-sizes">
-              Resizing
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <img src="../../../static/images/iphone.png" class="" />
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .size-80
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 80%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-80" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .size-70
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 70%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-70" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .size-60
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 60%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-60" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .size-50
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 50%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-50" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .size-40
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 40%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-40" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .size-30
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 30%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-30" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .size-20
-              </div>
-              <div class="kss-modifier__description kss-style">
-                resize to 20%.
-              </div>
-              <div class="kss-modifier__example">
-                <img src="../../../static/images/iphone.png" class="size-20" />
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;[modifier class]&quot; /&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_base.scss</code>, line 199
-          </div>
-
-      </div>
-      <div id="kssref-architecture-slides" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides">
-              fullscreen
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Slide with no padding (full card, .embed youtube video...)</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <section>
-  <p>Content</p>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
-  &lt;p&gt;Content&lt;/p&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides.scss</code>, line 43
-          </div>
-
-      </div>
-      <div id="kssref-architecture-slides" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides">
-              Slides
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Fullscreen. Vertically and horizontally centered.
-Fade transition to all slides.
-All HTML elements will have those styles</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <section>
-  <p>Content</p>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
-  &lt;p&gt;Content&lt;/p&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-architecture-slides-bottom" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides-bottom">
-              Align bottom
-            </a>
-          </h3>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <section class="slide-bottom">
-  <p>Content</p>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                Slide alignment
-              </div>
-              <div class="kss-modifier__description kss-style">
-                bottom
-              </div>
-              <div class="kss-modifier__example">
-                <section class="slide-bottom">
-  <p>Content</p>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-bottom&quot;&gt;
-  &lt;p&gt;Content&lt;/p&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides.scss</code>, line 74
-          </div>
-
-      </div>
-      <div id="kssref-architecture-slides-top" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-architecture-slides-top">
-              Align top
-            </a>
-          </h3>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <section class="slide-top">
-  <p>Content</p>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                Slide alignment
-              </div>
-              <div class="kss-modifier__description kss-style">
-                top
-              </div>
-              <div class="kss-modifier__example">
-                <section class="slide-top">
-  <p>Content</p>
-</section>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-top&quot;&gt;
-  &lt;p&gt;Content&lt;/p&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides.scss</code>, line 60
-          </div>
-
-      </div>
-      <div id="kssref-architecture-subtitle" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-subtitle">
-              Subtitule
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Subtitle (Before h1, h2)</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-subtitle&quot;&gt;Powered by &lt;a href&#x3D;&quot;#&quot;&gt;#WebSlides&lt;/a&gt; &lt;code&gt;.text-subtitle&lt;/code&gt;&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 250
-          </div>
-
-      </div>
-      <div id="kssref-architecture-symbols" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-symbols">
-              Symbols
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Stars <em> </em> *</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-symbols">* * *</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-symbols&quot;&gt;* * *&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 404
-          </div>
-
-      </div>
-      <div id="kssref-architecture-tables" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-tables">
-              Tables
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <table>
-  <thead>
-   <tr>
-     <th>Plans</th>
-     <th>Good</th>
-     <th>Better</th>
-     <th>Awesome</th>
-   </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Price</td>
-      <td>Free</td>
-      <td>$6</td>
-      <td>$10</td>
-    </tr>
-    <tr>
-      <td>Access to exclusive content</td>
-      <td>No</td>
-      <td>No</td>
-      <td>Yes</td>
-    </tr>
-    <tr>
-      <td>Screens you can watch on at the same time</td>
-      <td>1</td>
-      <td>2</td>
-      <td>Unlimited</td>
-    </tr>
-  </tbody>
-</table>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table&gt;
-  &lt;thead&gt;
-   &lt;tr&gt;
-     &lt;th&gt;Plans&lt;/th&gt;
-     &lt;th&gt;Good&lt;/th&gt;
-     &lt;th&gt;Better&lt;/th&gt;
-     &lt;th&gt;Awesome&lt;/th&gt;
-   &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Price&lt;/td&gt;
-      &lt;td&gt;Free&lt;/td&gt;
-      &lt;td&gt;$6&lt;/td&gt;
-      &lt;td&gt;$10&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Access to exclusive content&lt;/td&gt;
-      &lt;td&gt;No&lt;/td&gt;
-      &lt;td&gt;No&lt;/td&gt;
-      &lt;td&gt;Yes&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Screens you can watch on at the same time&lt;/td&gt;
-      &lt;td&gt;1&lt;/td&gt;
-      &lt;td&gt;2&lt;/td&gt;
-      &lt;td&gt;Unlimited&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_tables.scss</code>, line 1
-          </div>
-
       </div>
       <div id="kssref-architecture-try" class="kss-section kss-section--depth-2 ">
 
@@ -2261,44 +197,6 @@ All HTML elements will have those styles</p>
           </div>
 
       </div>
-      <div id="kssref-architecture-uppercase" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-architecture-uppercase">
-              Uppercase
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="text-uppercase">Create a simple web presence.</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-uppercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>_typography.scss</code>, line 276
-          </div>
-
-      </div>
   </div>
 </div>
 
diff --git a/doc/styleguide/section-contents.html b/doc/styleguide/section-contents.html
index e1e7120..6756209 100644
--- a/doc/styleguide/section-contents.html
+++ b/doc/styleguide/section-contents.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,87 +36,57 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
               <ul class="kss-nav__menu-child">
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-activity">
-                    <span class="kss-nav__name"> CVs, News ad Activity</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-clients">
-                    <span class="kss-nav__name">Clients</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-features">
-                    <span class="kss-nav__name">Features</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-flexblocks">
-                    <span class="kss-nav__name">Flexblocks</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-gallery">
-                    <span class="kss-nav__name">Galleries (portfolios, teams...)</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-contents.html#kssref-contents-gallery-overlay">
-                    <span class="kss-nav__name">Gallery + Overflow</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-metrics">
-                    <span class="kss-nav__name">Metrics</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-plans">
-                    <span class="kss-nav__name">Plans / Pricing</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-reasons">
-                    <span class="kss-nav__name">Reasons</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-resume">
-                    <span class="kss-nav__name">Work / Resumé / CV</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-specs">
-                    <span class="kss-nav__name">Specs</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-contents.html#kssref-contents-steps">
-                    <span class="kss-nav__name"> Steps</span>
+                    <span class="kss-nav__name">CV / Resumé</span>
                   </a>
                 </li>
               </ul>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
@@ -137,1052 +107,13 @@
 
 
 
-      </div>
-      <div id="kssref-contents-activity" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-activity">
-               CVs, News ad Activity
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Bla bla bla</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock activity">
-  <li>
-    <a href="#" title="UX Designer at ACME">
-      <div>
-        <p class="year">
-          2016
-        </p>
-        <p class="title">
-          UX Designer at ACME
-        </p>
-        <p class="summary">
-          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
-        </p>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="14 world famous buildings to inspire you">
-      <p class="year">
-        2 mins ago
-      </p>
-      <p class="title">
-        14 world famous buildings to inspire you
-      </p>
-      <p class="summary">
-        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
-      </p>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Co-Founder of GAMMA">
-      <p class="year">
-        2013
-      </p>
-      <p class="title">
-        Co-Founder of GAMMA
-      </p>
-      <p class="summary">
-        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
-      </p>
-    </a>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
-      &lt;div&gt;
-        &lt;p class&#x3D;&quot;year&quot;&gt;
-          2016
-        &lt;/p&gt;
-        &lt;p class&#x3D;&quot;title&quot;&gt;
-          UX Designer at ACME
-        &lt;/p&gt;
-        &lt;p class&#x3D;&quot;summary&quot;&gt;
-          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
-        &lt;/p&gt;
-      &lt;/div&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
-      &lt;p class&#x3D;&quot;year&quot;&gt;
-        2 mins ago
-      &lt;/p&gt;
-      &lt;p class&#x3D;&quot;title&quot;&gt;
-        14 world famous buildings to inspire you
-      &lt;/p&gt;
-      &lt;p class&#x3D;&quot;summary&quot;&gt;
-        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
-      &lt;/p&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
-      &lt;p class&#x3D;&quot;year&quot;&gt;
-        2013
-      &lt;/p&gt;
-      &lt;p class&#x3D;&quot;title&quot;&gt;
-        Co-Founder of GAMMA
-      &lt;/p&gt;
-      &lt;p class&#x3D;&quot;summary&quot;&gt;
-        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
-      &lt;/p&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-activity.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-clients" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-clients">
-              Clients
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Highlight clients information</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock clients ">
-  <li>
-    <a href="#" title="Client">
-      <figure>
-        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
-        <figcaption>
-          <h3>Interfaces</h3>
-          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Client">
-      <figure>
-        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
-        <figcaption>
-          <h3>Interfaces</h3>
-          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .border
-              </div>
-              <div class="kss-modifier__description kss-style">
-                with border
-              </div>
-              <div class="kss-modifier__example">
-                <ul class="flexblock clients border">
-  <li>
-    <a href="#" title="Client">
-      <figure>
-        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
-        <figcaption>
-          <h3>Interfaces</h3>
-          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Client">
-      <figure>
-        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
-        <figcaption>
-          <h3>Interfaces</h3>
-          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-</ul>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock clients [modifier class]&quot;&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
-      &lt;figure&gt;
-        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/google.svg&quot; alt&#x3D;&quot;Google&quot;&gt;
-        &lt;figcaption&gt;
-          &lt;h3&gt;Interfaces&lt;/h3&gt;
-          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
-        &lt;/figcaption&gt;
-      &lt;/figure&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
-      &lt;figure&gt;
-        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/microsoft.svg&quot; alt&#x3D;&quot;Microsoft&quot;&gt;
-        &lt;figcaption&gt;
-          &lt;h3&gt;Interfaces&lt;/h3&gt;
-          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
-        &lt;/figcaption&gt;
-      &lt;/figure&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-clients.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-features" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-features">
-              Features
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Special features</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock features">
-  <li>
-    <div>
-      <h2> <span>100<sup>%</sup></span> customizable</h2>
-      Well documented.
-    </div>
-  </li>
-  <li>
-    <div>
-      <span><sup>$</sup>48</span>
-      <h2>Extra virgin olive oil</h2>
-      The Spanish caviar.
-    </div>
-  </li>
-  <li>
-    <div>
-      <h2>
-        Ultra-fast Wifi
-      </h2>
-      Simple file sharing.
-    </div>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .border
-              </div>
-              <div class="kss-modifier__description kss-style">
-                with border
-              </div>
-              <div class="kss-modifier__example">
-                <ul class="flexblock features">
-  <li>
-    <div>
-      <h2> <span>100<sup>%</sup></span> customizable</h2>
-      Well documented.
-    </div>
-  </li>
-  <li>
-    <div>
-      <span><sup>$</sup>48</span>
-      <h2>Extra virgin olive oil</h2>
-      The Spanish caviar.
-    </div>
-  </li>
-  <li>
-    <div>
-      <h2>
-        Ultra-fast Wifi
-      </h2>
-      Simple file sharing.
-    </div>
-  </li>
-</ul>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock features&quot;&gt;
-  &lt;li&gt;
-    &lt;div&gt;
-      &lt;h2&gt; &lt;span&gt;100&lt;sup&gt;%&lt;/sup&gt;&lt;/span&gt; customizable&lt;/h2&gt;
-      Well documented.
-    &lt;/div&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;div&gt;
-      &lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;48&lt;/span&gt;
-      &lt;h2&gt;Extra virgin olive oil&lt;/h2&gt;
-      The Spanish caviar.
-    &lt;/div&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;div&gt;
-      &lt;h2&gt;
-        Ultra-fast Wifi
-      &lt;/h2&gt;
-      Simple file sharing.
-    &lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-features.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-flexblocks" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-flexblocks">
-              Flexblocks
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Auto-fill &amp; Equal height columns</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock ">
-  <li>
-    <a href="#">
-      Item 1
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 2
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 3
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 4
-     </a>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .blink
-              </div>
-              <div class="kss-modifier__description kss-style">
-                Linkable block
-              </div>
-              <div class="kss-modifier__example">
-                <ul class="flexblock blink">
-  <li>
-    <a href="#">
-      Item 1
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 2
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 3
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 4
-     </a>
-  </li>
-</ul>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-              <div class="kss-modifier__name kss-style">
-                .border
-              </div>
-              <div class="kss-modifier__description kss-style">
-                With border
-              </div>
-              <div class="kss-modifier__example">
-                <ul class="flexblock border">
-  <li>
-    <a href="#">
-      Item 1
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 2
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 3
-     </a>
-  </li>
-  <li>
-    <a href="#">
-      Item 4
-     </a>
-  </li>
-</ul>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock [modifier class]&quot;&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      Item 1
-     &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      Item 2
-     &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      Item 3
-     &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      Item 4
-     &lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-gallery" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-gallery">
-              Galleries (portfolios, teams...)
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Beautiful gallery</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock gallery">
-  <li>
-    <a href="#">
-      <figure>
-        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
-        <figcaption>
-          <h2>uWatch</h2>
-          <p>By Jane Doe</p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <figure>
-        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
-        <figcaption>
-          <h2>Ellen Daniels</h2>
-          <p>CEO</p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <figure>
-        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
-        <figcaption>
-          <h2>New York</h2>
-          <p>3,456 rooms</p>
-        </figcaption>
-      </figure>
-    </a>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      &lt;figure&gt;
-        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
-        &lt;figcaption&gt;
-          &lt;h2&gt;uWatch&lt;/h2&gt;
-          &lt;p&gt;By Jane Doe&lt;/p&gt;
-        &lt;/figcaption&gt;
-      &lt;/figure&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      &lt;figure&gt;
-        &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
-        &lt;figcaption&gt;
-          &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
-          &lt;p&gt;CEO&lt;/p&gt;
-        &lt;/figcaption&gt;
-      &lt;/figure&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      &lt;figure&gt;
-        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
-        &lt;figcaption&gt;
-          &lt;h2&gt;New York&lt;/h2&gt;
-          &lt;p&gt;3,456 rooms&lt;/p&gt;
-        &lt;/figcaption&gt;
-      &lt;/figure&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-gallery.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-gallery-overlay" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-contents-gallery-overlay">
-              Gallery + Overflow
-            </a>
-          </h3>
-
-            <div class="kss-description">
-              <p>Beautiful gallery with overlay content</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock gallery">
-  <li>
-    <a href="#">
-      <div class="overlay">
-        <h2>New York</h2>
-        <p>1,234 rooms</p>
-      </div>
-      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <div class="overlay">
-        <h2>uWatch</h2>
-        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
-      </div>
-      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <div class="overlay">
-        <h2>Ellen Daniels</h2>
-        <p>CEO</p>
-      </div>
-      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
-    </a>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      &lt;div class&#x3D;&quot;overlay&quot;&gt;
-        &lt;h2&gt;New York&lt;/h2&gt;
-        &lt;p&gt;1,234 rooms&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      &lt;div class&#x3D;&quot;overlay&quot;&gt;
-        &lt;h2&gt;uWatch&lt;/h2&gt;
-        &lt;time datetime&#x3D;&quot;2017-12-17T21:23:34-05:00&quot;&gt;December 2017&lt;/time&gt;
-      &lt;/div&gt;
-      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot;&gt;
-      &lt;div class&#x3D;&quot;overlay&quot;&gt;
-        &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
-        &lt;p&gt;CEO&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-gallery.scss</code>, line 44
-          </div>
-
-      </div>
-      <div id="kssref-contents-metrics" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-metrics">
-              Metrics
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Bla bla bla</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock metrics  ">
-  <li> Founded
-    <span>2016</span>
-  </li>
-  <li>
-    <span>24M</span>
-    Subscribers
-  </li>
-  <li>
-    Revenue:
-    <span>$16M</span>
-  </li>
-  <li>
-    Monthly Growth
-    <span>64%</span>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .border
-              </div>
-              <div class="kss-modifier__description kss-style">
-                with border
-              </div>
-              <div class="kss-modifier__example">
-                <ul class="flexblock metrics  border">
-  <li> Founded
-    <span>2016</span>
-  </li>
-  <li>
-    <span>24M</span>
-    Subscribers
-  </li>
-  <li>
-    Revenue:
-    <span>$16M</span>
-  </li>
-  <li>
-    Monthly Growth
-    <span>64%</span>
-  </li>
-</ul>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock metrics  [modifier class]&quot;&gt;
-  &lt;li&gt; Founded
-    &lt;span&gt;2016&lt;/span&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;span&gt;24M&lt;/span&gt;
-    Subscribers
-  &lt;/li&gt;
-  &lt;li&gt;
-    Revenue:
-    &lt;span&gt;$16M&lt;/span&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    Monthly Growth
-    &lt;span&gt;64%&lt;/span&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-metrics.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-plans" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-plans">
-              Plans / Pricing
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Bla bla bla</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Examples
-            </div>
-
-              <div class="kss-modifier__default-name kss-style">
-                Default styling
-              </div>
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock plans ">
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Basic</h2>
-      <div>
-        <span class="price">Free</span>
-        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
-        <span class="button">Select</span>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Medium</h2>
-      <div>
-        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
-        <p>Clean markup with popular naming conventions. Minimum effort.</p>
-        <span class="button">Buy Now</span>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Premium <sup>(save 20%)</sup></h2>
-      <div>
-        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
-        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
-        <span class="button">Select</span>
-      </div>
-    </a>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-              <div class="kss-modifier__name kss-style">
-                .blink
-              </div>
-              <div class="kss-modifier__description kss-style">
-                block linkable
-              </div>
-              <div class="kss-modifier__example">
-                <ul class="flexblock plans blink">
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Basic</h2>
-      <div>
-        <span class="price">Free</span>
-        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
-        <span class="button">Select</span>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Medium</h2>
-      <div>
-        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
-        <p>Clean markup with popular naming conventions. Minimum effort.</p>
-        <span class="button">Buy Now</span>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Premium <sup>(save 20%)</sup></h2>
-      <div>
-        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
-        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
-        <span class="button">Select</span>
-      </div>
-    </a>
-  </li>
-</ul>
-                <div class="kss-modifier__example-footer"></div>
-              </div>
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
-      &lt;h2&gt;Basic&lt;/h2&gt;
-      &lt;div&gt;
-        &lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
-        &lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
-        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
-      &lt;/div&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
-      &lt;h2&gt;Medium&lt;/h2&gt;
-      &lt;div&gt;
-        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
-        &lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
-        &lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
-      &lt;/div&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
-      &lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
-      &lt;div&gt;
-        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
-        &lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
-        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
-      &lt;/div&gt;
-    &lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-plans.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-reasons" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-reasons">
-              Reasons
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Bla bla bla</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock reasons">
-  <li>
-    <h2>Why WebSlides? Work better, faster.</h2>
-    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
-  </li>
-  <li>
-    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
-    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
-  &lt;li&gt;
-    &lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
-    &lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
-    &lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-reasons.scss</code>, line 1
-          </div>
-
       </div>
       <div id="kssref-contents-resume" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
             <a class="kss-title__permalink" href="#kssref-contents-resume">
-              Work / Resumé / CV
+              CV / Resumé
             </a>
           </h2>
 
@@ -1261,178 +192,6 @@
           </div>
 
       </div>
-      <div id="kssref-contents-specs" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-specs">
-              Specs
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Bla bla bla</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock specs">
-    <li>
-      <div>
-        <h2>Ultra-Fast WiFi</h2>
-        Simple and secure file sharing.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>All day battery life</h2>
-        Your battery worries may be over.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>Lifetime Warranty </h2>
-        We'll fix it or if we can't, we'll replace it.
-      </div>
-    </li>
-    </ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
-    &lt;li&gt;
-      &lt;div&gt;
-        &lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
-        Simple and secure file sharing.
-      &lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      &lt;div&gt;
-        &lt;h2&gt;All day battery life&lt;/h2&gt;
-        Your battery worries may be over.
-      &lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      &lt;div&gt;
-        &lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
-        We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
-      &lt;/div&gt;
-    &lt;/li&gt;
-    &lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-specs.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-contents-steps" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-contents-steps">
-               Steps
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>Bla bla bla</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <ul class="flexblock steps">
-  <li>
-    <h2>01. Passion</h2>
-    <p>When you're really passionate about your job, you can change the world.</p>
-  </li>
-  <li>
-    <div class="process step-2"></div>
-    <h2>02. Purpose</h2>
-    <p>Why does this business exist? How are you different? Why matters?</p>
-  </li>
-  <li>
-    <div class="process step-3"></div>
-    <h2>03. Principles</h2>
-    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
-  </li>
-  <li>
-    <div class="process step-4"></div>
-    <h2>04. Process</h2>
-    <ul>
-      <li>Useful</li>
-      <li>Easy</li>
-      <li>Fast</li>
-      <li>Beautiful</li>
-    </ul>
-  </li>
-</ul>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
-  &lt;li&gt;
-    &lt;h2&gt;01. Passion&lt;/h2&gt;
-    &lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
-    &lt;h2&gt;02. Purpose&lt;/h2&gt;
-    &lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
-    &lt;h2&gt;03. Principles&lt;/h2&gt;
-    &lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
-    &lt;h2&gt;04. Process&lt;/h2&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Useful&lt;/li&gt;
-      &lt;li&gt;Easy&lt;/li&gt;
-      &lt;li&gt;Fast&lt;/li&gt;
-      &lt;li&gt;Beautiful&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_flexblock-steps.scss</code>, line 1
-          </div>
-
-      </div>
   </div>
 </div>
 
diff --git a/doc/styleguide/section-forms.html b/doc/styleguide/section-forms.html
new file mode 100644
index 0000000..8184df0
--- /dev/null
+++ b/doc/styleguide/section-forms.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-forms.html#kssref-forms-login">
+                    <span class="kss-nav__name">Login form</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-forms" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-forms">
+              Forms
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+      <div id="kssref-forms-login" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-forms-login">
+              Login form
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="user">
+  <input type="text" placeholder="Username" />
+  <button>Log in</button>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;user&quot;&gt;
+  &lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;Username&quot; /&gt;
+  &lt;button&gt;Log in&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_form.scss</code>, line 139
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-landings.html b/doc/styleguide/section-landings-and-portfolio.html
similarity index 74%
rename from doc/styleguide/section-landings.html
rename to doc/styleguide/section-landings-and-portfolio.html
index 36ce0bf..b4574bb 100644
--- a/doc/styleguide/section-landings.html
+++ b/doc/styleguide/section-landings-and-portfolio.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,73 +36,98 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
           </a>
               <ul class="kss-nav__menu-child">
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cards">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-badgets">
+                    <span class="kss-nav__name">Badges</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-buttons">
+                    <span class="kss-nav__name">Buttons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cards">
                     <span class="kss-nav__name">Cards</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cites">
-                    <span class="kss-nav__name">Cites</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cta">
                     <span class="kss-nav__name">Call to action</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-cta-cover">
-                    <span class="kss-nav__name">Headings</span>
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-cta-cover">
+                    <span class="kss-nav__name">Covers</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-longform">
-                    <span class="kss-nav__name">Longform</span>
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-quotes">
+                    <span class="kss-nav__name">Quotes &amp; Cites</span>
                   </a>
                 </li>
                 <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-quotes">
-                    <span class="kss-nav__name">Quotes</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings.html#kssref-landings-toc">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-landings-and-portfolio.html#kssref-landings-and-portfolio-toc">
                     <span class="kss-nav__name">Table of contents</span>
                   </a>
                 </li>
               </ul>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
   <div role="main" class="kss-main">
 
-      <div id="kssref-landings" class="kss-section kss-section--depth-1 ">
+      <div id="kssref-landings-and-portfolio" class="kss-section kss-section--depth-1 ">
 
         <div class="kss-style">
           <h1 class="kss-title kss-title--level-1">
-            <a class="kss-title__permalink" href="#kssref-landings">
-              Landings
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio">
+              Landings and portfolio
             </a>
           </h1>
 
@@ -113,11 +138,106 @@
 
 
       </div>
-      <div id="kssref-landings-cards" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-landings-and-portfolio-badgets" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cards">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-badgets">
+              Badges
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;badge-android&quot;&gt;Google Play&lt;/p&gt;
+&lt;p class&#x3D;&quot;badge-ios&quot;&gt;App Store&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_badges.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-landings-and-portfolio-buttons" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-buttons">
+              Buttons
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <a href="#" class="button ">Download</a>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .radius
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Rounded corners
+              </div>
+              <div class="kss-modifier__example">
+                <a href="#" class="button radius">Download</a>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button [modifier class]&quot;&gt;Download&lt;/a&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_button.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-landings-and-portfolio-cards" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cards">
               Cards
             </a>
           </h2>
@@ -169,49 +289,11 @@
           </div>
 
       </div>
-      <div id="kssref-landings-cites" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-landings-and-portfolio-cta" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cites">
-              Cites
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_quotes.scss</code>, line 28
-          </div>
-
-      </div>
-      <div id="kssref-landings-cta" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cta">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cta">
               Call to action
             </a>
           </h2>
@@ -261,12 +343,12 @@
           </div>
 
       </div>
-      <div id="kssref-landings-cta-cover" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-landings-and-portfolio-cta-cover" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-cta-cover">
-              Headings
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-cta-cover">
+              Covers
             </a>
           </h2>
 
@@ -315,54 +397,12 @@
           </div>
 
       </div>
-      <div id="kssref-landings-longform" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-landings-and-portfolio-quotes" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-longform">
-              Longform
-            </a>
-          </h2>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <section class="wrap longform">
-  <p>Lorem ipsum</p>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;wrap longform&quot;&gt;
-  &lt;p&gt;Lorem ipsum&lt;/p&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_longform.scss</code>, line 1
-          </div>
-
-      </div>
-      <div id="kssref-landings-quotes" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-quotes">
-              Quotes
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-quotes">
+              Quotes &amp; Cites
             </a>
           </h2>
 
@@ -380,6 +420,7 @@
               <blockquote>
   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
 </blockquote>
+<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
               <div class="kss-modifier__example-footer"></div>
             </div>
 
@@ -391,7 +432,8 @@
               </summary>
               <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote&gt;
   &lt;p&gt;&quot;I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides.&quot;&lt;/p&gt;
-&lt;/blockquote&gt;</code></pre>
+&lt;/blockquote&gt;
+&lt;cite&gt; &lt;img class&#x3D;&quot;avatar-40&quot; src&#x3D;&quot;http://webslides.tv/static/images/avatar.jpg&quot; alt&#x3D;&quot;Avatar&quot;&gt; &lt;a href&#x3D;&quot;http://twitter.com/jlantunez/&quot;&gt;@jlantunez&lt;/a&gt;&lt;/cite&gt;</code></pre>
             </details>
 
           <div class="kss-source kss-style">
@@ -399,11 +441,11 @@
           </div>
 
       </div>
-      <div id="kssref-landings-toc" class="kss-section kss-section--depth-2 ">
+      <div id="kssref-landings-and-portfolio-toc" class="kss-section kss-section--depth-2 ">
 
         <div class="kss-style">
           <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-landings-toc">
+            <a class="kss-title__permalink" href="#kssref-landings-and-portfolio-toc">
               Table of contents
             </a>
           </h2>
diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html
new file mode 100644
index 0000000..d33d523
--- /dev/null
+++ b/doc/styleguide/section-layout.html
@@ -0,0 +1,1370 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-alignment">
+                    <span class="kss-nav__name">Align content</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-background">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-background-anim">
+                    <span class="kss-nav__name">Animated</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-background-video">
+                    <span class="kss-nav__name">Video</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-backgrounds">
+                    <span class="kss-nav__name">Backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-backgrounds">
+                    <span class="kss-nav__name">Layout.backgrounds</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-backgrounds-gradient">
+                    <span class="kss-nav__name">Backgrounds - Gradient</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-backgrounds-transparent">
+                    <span class="kss-nav__name">Backgrounds - Transparent</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-grid">
+                    <span class="kss-nav__name">Grid</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-navbars">
+                    <span class="kss-nav__name">Navbars</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-sizes">
+                    <span class="kss-nav__name">Sizes</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slide-navigation">
+                    <span class="kss-nav__name">Slides navigation</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-layout.html#kssref-layout-slides">
+                    <span class="kss-nav__name">Slides</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-bottom">
+                    <span class="kss-nav__name">Align bottom</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-fullscreen">
+                    <span class="kss-nav__name">Fullscreen</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-layout.html#kssref-layout-slides-top">
+                    <span class="kss-nav__name">Align top</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-layout" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-layout">
+              Layout
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+      <div id="kssref-layout-alignment" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-alignment">
+              Align content
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <div>
+  <img src="../../../static/images/iphone.png" class="size-50 " />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .alignright
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Align right.
+              </div>
+              <div class="kss-modifier__example">
+                <div>
+  <img src="../../../static/images/iphone.png" class="size-50 alignright" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .alignleft
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Align left.
+              </div>
+              <div class="kss-modifier__example">
+                <div>
+  <img src="../../../static/images/iphone.png" class="size-50 alignleft" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .aligncenter
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Align center.
+              </div>
+              <div class="kss-modifier__example">
+                <div>
+  <img src="../../../static/images/iphone.png" class="size-50 aligncenter" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+  &lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;size-50 [modifier class]&quot; /&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 143
+          </div>
+
+      </div>
+      <div id="kssref-layout-background" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-background">
+              Backgrounds
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section>
+  <span class=" bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .background
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right-top
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right top.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right-top bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-center-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-center-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right-bottom
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right bottom.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right-bottom bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-left
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Left.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-left bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .background-right
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right.
+              </div>
+              <div class="kss-modifier__example">
+                <section>
+  <span class="background-right bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;span class&#x3D;&quot;[modifier class] bg-gray&quot; style&#x3D;&quot;background-image:url(&#x27;http://lorempixel.com/150/150/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 15
+          </div>
+
+      </div>
+      <div id="kssref-layout-background-anim" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-background-anim">
+              Animated
+            </a>
+          </h3>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="aligncenter bg-black">
+  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
+  &lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 140
+          </div>
+
+      </div>
+      <div id="kssref-layout-background-video" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-background-video">
+              Video
+            </a>
+          </h3>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
+    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
+  &lt;/video&gt;
+  &lt;div class&#x3D;&quot;wrap&quot;&gt;
+    &lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
+    &lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-bg.scss</code>, line 92
+          </div>
+
+      </div>
+      <div id="kssref-layout-backgrounds" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds">
+              Backgrounds
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <span class="bg-primary size-20">Primary #44d</span>
+<span class="bg-secondary size-20">Secondary #67d</span>
+<span class="bg-light size-20">Light #f7f9fb</span>
+<span class="bg-black size-20">Black #000</span>
+<span class="bg-black-blue size-20">Black blue #123</span>
+<span class="bg-blue size-20">Blue #346</span>
+<span class="bg-brown size-20">Brown #f9f8f2</span>
+<span class="bg-gray size-20">Gray #d5d9e2</span>
+<span class="bg-green size-20">Green #077</span>
+<span class="bg-purple size-20">Purple #62b</span>
+<span class="bg-red size-20">Red #c23</span>
+<span class="bg-white size-20">White #fff</span>
+<span class="bg-facebook size-20">Facebook #3b5998</span>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;span class&#x3D;&quot;bg-primary size-20&quot;&gt;Primary #44d&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-secondary size-20&quot;&gt;Secondary #67d&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-light size-20&quot;&gt;Light #f7f9fb&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-black size-20&quot;&gt;Black #000&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-black-blue size-20&quot;&gt;Black blue #123&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-blue size-20&quot;&gt;Blue #346&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-brown size-20&quot;&gt;Brown #f9f8f2&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-gray size-20&quot;&gt;Gray #d5d9e2&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-green size-20&quot;&gt;Green #077&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-purple size-20&quot;&gt;Purple #62b&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-red size-20&quot;&gt;Red #c23&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-white size-20&quot;&gt;White #fff&lt;/span&gt;
+&lt;span class&#x3D;&quot;bg-facebook size-20&quot;&gt;Facebook #3b5998&lt;/span&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 107
+          </div>
+
+      </div>
+      <div id="kssref-layout-backgrounds" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds">
+              Layout.backgrounds
+            </a>
+          </h2>
+
+
+        </div>
+
+
+
+
+      </div>
+      <div id="kssref-layout-backgrounds-gradient" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds-gradient">
+              Backgrounds - Gradient
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+                <div class="bg-gradient-h">Horizontal</div>
+  <div class="bg-gradient-v">Vertical</div>
+  <div class="bg-gradient-r">Radial</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">  &lt;div class&#x3D;&quot;bg-gradient-h&quot;&gt;Horizontal&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-gradient-v&quot;&gt;Vertical&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-gradient-r&quot;&gt;Radial&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 193
+          </div>
+
+      </div>
+      <div id="kssref-layout-backgrounds-transparent" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-backgrounds-transparent">
+              Backgrounds - Transparent
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Colors we use for backgrounds.</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="bg-red">
+  <div class="bg-trans-dark">Dark</div>
+  <div class="bg-trans-light">Light</div>
+  <div class="bg-trans-gradient">Gradient</div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-red&quot;&gt;
+  &lt;div class&#x3D;&quot;bg-trans-dark&quot;&gt;Dark&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-trans-light&quot;&gt;Light&lt;/div&gt;
+  &lt;div class&#x3D;&quot;bg-trans-gradient&quot;&gt;Gradient&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_color.scss</code>, line 168
+          </div>
+
+      </div>
+      <div id="kssref-layout-grid" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-grid">
+              Grid
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Basic Grid (Flexible blocks)
+Auto-fill &amp; Equal height</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <div class="grid ">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .vertical-align
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Vertical align
+              </div>
+              <div class="kss-modifier__example">
+                <div class="grid vertical-align">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;grid [modifier class]&quot;&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is really easy&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+    &lt;p&gt;Code is neat, scalable, and well documented. It uses &lt;strong&gt;intuitive markup with popular naming conventions&lt;/strong&gt;. There&#x27;s no need to overuse classes or nesting. &lt;strong&gt;Based on &lt;a href&#x3D;&quot;https://github.com/jennschiffer/SimpleSlides&quot;&gt;SimpleSlides&lt;/a&gt;, by &lt;a href&#x3D;&quot;http://jennmoney.biz&quot;&gt;Jenn Schiffer&lt;/a&gt;&lt;/strong&gt; :)&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class&#x3D;&quot;column&quot;&gt;
+    &lt;h3&gt;&lt;strong&gt;WebSlides is the clean&lt;/strong&gt;&lt;/h3&gt;
+    &lt;p class&#x3D;&quot;text-intro&quot;&gt;Each parent &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; in the #webslides element is an individual slide.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_grid.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-layout-navbars" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-navbars">
+              Navbars
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Responsive Media (videos, iframe...)</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <nav role="navigation" class="">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .navbar
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Navigation bar
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="navbar">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .aligncenter
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Center alignment
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="aligncenter">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .alignright
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Right alignment
+              </div>
+              <div class="kss-modifier__example">
+                <nav role="navigation" class="alignright">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav role&#x3D;&quot;navigation&quot; class&#x3D;&quot;[modifier class]&quot;&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href&#x3D;&quot;&quot;&gt;Clients&lt;/a&gt;&lt;/li&gt;
+    &lt;li class&#x3D;&quot;facebook&quot;&gt;
+      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://facebook.com/webslides&quot; title&#x3D;&quot;Facebook&quot;&gt;
+        Facebook
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class&#x3D;&quot;twitter&quot;&gt;
+      &lt;a rel&#x3D;&quot;external&quot; href&#x3D;&quot;https://twitter.com/webslides&quot; title&#x3D;&quot;Twitter&quot;&gt;
+        @WebSlides
+      &lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_navigation.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-layout-sizes" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-sizes">
+              Sizes
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <img src="../../../static/images/iphone.png" class="" />
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .size-80
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 80%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-80" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-70
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 70%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-70" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-60
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 60%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-60" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-50
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 50%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-50" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-40
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 40%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-40" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-30
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 30%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-30" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .size-20
+              </div>
+              <div class="kss-modifier__description kss-style">
+                resize to 20%.
+              </div>
+              <div class="kss-modifier__example">
+                <img src="../../../static/images/iphone.png" class="size-20" />
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;img src&#x3D;&quot;../../../static/images/iphone.png&quot; class&#x3D;&quot;[modifier class]&quot; /&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 199
+          </div>
+
+      </div>
+      <div id="kssref-layout-slide-navigation" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-slide-navigation">
+              Slides navigation
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div id&#x3D;&quot;navigation&quot;&gt;
+  &lt;a id&#x3D;&quot;next&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;→&lt;/a&gt;
+  &lt;a id&#x3D;&quot;previous&quot; href&#x3D;&quot;#&quot; title&#x3D;&quot;Arrow Keys&quot;&gt;←&lt;/a&gt;
+  &lt;span id&#x3D;&quot;counter&quot;&gt;&lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;View all slides&quot;&gt;53 / 120&lt;/a&gt;&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides-navigation.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-layout-slides" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-layout-slides">
+              Slides
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Fullscreen. Vertically and horizontally centered.
+Fade transition to all slides.
+All HTML elements will have those styles</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section>
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-layout-slides-bottom" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-slides-bottom">
+              Align bottom
+            </a>
+          </h3>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section class="slide-bottom">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                Slide alignment
+              </div>
+              <div class="kss-modifier__description kss-style">
+                bottom
+              </div>
+              <div class="kss-modifier__example">
+                <section class="slide-bottom">
+  <p>Content</p>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-bottom&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 74
+          </div>
+
+      </div>
+      <div id="kssref-layout-slides-fullscreen" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-slides-fullscreen">
+              Fullscreen
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Slide with no padding (full card, .embed youtube video...)</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="fullscreen">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;fullscreen&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 43
+          </div>
+
+      </div>
+      <div id="kssref-layout-slides-top" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-layout-slides-top">
+              Align top
+            </a>
+          </h3>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <section class="slide-top">
+  <p>Content</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                Slide alignment
+              </div>
+              <div class="kss-modifier__description kss-style">
+                top
+              </div>
+              <div class="kss-modifier__example">
+                <section class="slide-top">
+  <p>Content</p>
+</section>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;slide-top&quot;&gt;
+  &lt;p&gt;Content&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_slides.scss</code>, line 60
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-longforms.html b/doc/styleguide/section-longforms.html
new file mode 100644
index 0000000..ac5a004
--- /dev/null
+++ b/doc/styleguide/section-longforms.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-longforms.html#kssref-longforms-interviews">
+                    <span class="kss-nav__name">Interviews</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-longforms" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-longforms">
+              Longform
+            </a>
+          </h1>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;wrap longform&quot;&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_longform.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-longforms-interviews" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-longforms-interviews">
+              Interviews
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Questions &amp; Answers</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <dl class="text-interview">
+  <dt>Driftwood</dt>
+  <dd>
+    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>No. It's no good.</p>
+  </dd>
+  <dt>Driftwood</dt>
+  <dd>
+    <p>What's the matter with it?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>I don't know, let's hear it again.</p>
+  </dd>
+</dl>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class&#x3D;&quot;text-interview&quot;&gt;
+  &lt;dt&gt;Driftwood&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;It says, &quot;The party of the first part shall be known in this contract as the party of the first part.&quot; How do you like that? That&#x27;s pretty neat, eh?&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Fiorello&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;No. It&#x27;s no good.&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Driftwood&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;What&#x27;s the matter with it?&lt;/p&gt;
+  &lt;/dd&gt;
+  &lt;dt&gt;Fiorello&lt;/dt&gt;
+  &lt;dd&gt;
+    &lt;p&gt;I don&#x27;t know, let&#x27;s hear it again.&lt;/p&gt;
+  &lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 504
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html
index cd94384..19bbd4d 100644
--- a/doc/styleguide/section-media.html
+++ b/doc/styleguide/section-media.html
@@ -17,9 +17,9 @@
   <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
   <nav class="kss-header-nav">
     <ul>
-        <li><a href="../../index.html" target="_blank">WebSlides</a></li>
-        <li><a href="./" target="_blank">Documentation</a></li>
-        <li><a href=".../demos/index.html" target="_blank">Demos</a></li>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
     </ul>
   </nav>
 </header>
@@ -36,22 +36,37 @@
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-architecture.html">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
             <span class="kss-nav__name">Architecture</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-contents.html">
+          <a class="kss-nav__menu-link " href="section-contents.html">
             <span class="kss-nav__name">Contents</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-landings.html">
-            <span class="kss-nav__name">Landings</span>
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
           </a>
         </li>
         <li class="kss-nav__menu-item kss-nav-has-children">
-          <a class="kss-nav__menu-link" href="section-media.html">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-media.html">
             <span class="kss-nav__name">Media</span>
           </a>
               <ul class="kss-nav__menu-child">
@@ -60,26 +75,6 @@
                     <span class="kss-nav__name">Avatars</span>
                   </a>
                 </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-background">
-                    <span class="kss-nav__name">Media.Background</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-anim">
-                    <span class="kss-nav__name">Animated</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-media.html#kssref-media-background-video">
-                    <span class="kss-nav__name">Video</span>
-                  </a>
-                </li>
-                <li class="kss-nav__menu-item">
-                  <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-badgets">
-                    <span class="kss-nav__name">Badges</span>
-                  </a>
-                </li>
                 <li class="kss-nav__menu-item">
                   <a class="kss-nav__menu-link kss-nav__ref " href="section-media.html#kssref-media-embed">
                     <span class="kss-nav__name">Embed</span>
@@ -102,6 +97,16 @@
                 </li>
               </ul>
         </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
@@ -185,162 +190,6 @@
             Source: <code>modules/_avatars.scss</code>, line 5
           </div>
 
-      </div>
-      <div id="kssref-media-background" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-media-background">
-              Media.Background
-            </a>
-          </h2>
-
-
-        </div>
-
-
-
-
-      </div>
-      <div id="kssref-media-background-anim" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-media-background-anim">
-              Animated
-            </a>
-          </h3>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <section class="aligncenter bg-black">
-  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section class&#x3D;&quot;aligncenter bg-black&quot;&gt;
-  &lt;span class&#x3D;&quot;background anim&quot; style&#x3D;&quot;background-image:url(&#x27;https://source.unsplash.com/n9WPPWiPPJw/&#x27;)&quot;&gt;&lt;/span&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides-bg.scss</code>, line 140
-          </div>
-
-      </div>
-      <div id="kssref-media-background-video" class="kss-section kss-section--depth-3 ">
-
-        <div class="kss-style">
-          <h3 class="kss-title kss-title--level-3">
-            <a class="kss-title__permalink" href="#kssref-media-background-video">
-              Video
-            </a>
-          </h3>
-
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <section>
-  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
-    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
-  </video>
-  <div class="wrap">
-    <p><code>.background-video</code></p>
-    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
-  </div>
-</section>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;section&gt;
-  &lt;video class&#x3D;&quot;background-video&quot; autoplay poster&#x3D;&quot;https://webslides.tv/static/images/working.jpg&quot;&gt;
-    &lt;source src&#x3D;&quot;https://webslides.tv/static/videos/working.mp4&quot; type&#x3D;&quot;video/mp4&quot;&gt;
-  &lt;/video&gt;
-  &lt;div class&#x3D;&quot;wrap&quot;&gt;
-    &lt;p&gt;&lt;code&gt;.background-video&lt;/code&gt;&lt;/p&gt;
-    &lt;h2&gt;&lt;strong&gt;WebSlides is the easiest way to make HTML presentations. Inspire and engage.&lt;/strong&gt;&lt;/h2&gt;
-  &lt;/div&gt;
-&lt;/section&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_slides-bg.scss</code>, line 92
-          </div>
-
-      </div>
-      <div id="kssref-media-badgets" class="kss-section kss-section--depth-2 ">
-
-        <div class="kss-style">
-          <h2 class="kss-title kss-title--level-2">
-            <a class="kss-title__permalink" href="#kssref-media-badgets">
-              Badges
-            </a>
-          </h2>
-
-            <div class="kss-description">
-              <p>App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...</p>
-
-            </div>
-
-        </div>
-
-
-          <div class="kss-modifier__wrapper">
-            <div class="kss-modifier__heading kss-style">
-              Example
-            </div>
-
-
-            <div class="kss-modifier__example">
-              <p class="badge-android">Google Play</p>
-<p class="badge-ios">App Store</p>
-              <div class="kss-modifier__example-footer"></div>
-            </div>
-
-          </div>
-
-            <details class="kss-markup kss-style">
-              <summary>
-                  Markup
-              </summary>
-              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;badge-android&quot;&gt;Google Play&lt;/p&gt;
-&lt;p class&#x3D;&quot;badge-ios&quot;&gt;App Store&lt;/p&gt;</code></pre>
-            </details>
-
-          <div class="kss-source kss-style">
-            Source: <code>modules/_badges.scss</code>, line 1
-          </div>
-
       </div>
       <div id="kssref-media-embed" class="kss-section kss-section--depth-2 ">
 
diff --git a/doc/styleguide/section-multipurpose-blocks.html b/doc/styleguide/section-multipurpose-blocks.html
new file mode 100644
index 0000000..b201dea
--- /dev/null
+++ b/doc/styleguide/section-multipurpose-blocks.html
@@ -0,0 +1,1385 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-activity">
+                    <span class="kss-nav__name"> CVs, News ad Activity</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-clients">
+                    <span class="kss-nav__name">Clients</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-features">
+                    <span class="kss-nav__name">Features</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-gallery">
+                    <span class="kss-nav__name">Galleries (portfolios, teams...)</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref kss-nav__ref-child" href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-gallery-overlay">
+                    <span class="kss-nav__name">Gallery + Overflow</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-metrics">
+                    <span class="kss-nav__name">Metrics</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-plans">
+                    <span class="kss-nav__name">Plans / Pricing</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-reasons">
+                    <span class="kss-nav__name">Reasons</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-specs">
+                    <span class="kss-nav__name">Specs</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-multipurpose-blocks.html#kssref-multipurpose-blocks-steps">
+                    <span class="kss-nav__name"> Steps</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-multipurpose-blocks" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks">
+              Multipurpose blocks
+            </a>
+          </h1>
+
+            <div class="kss-description">
+              <p>Auto-fill &amp; Equal height columns</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock ">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .blink
+              </div>
+              <div class="kss-modifier__description kss-style">
+                Linkable block
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock blink">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                With border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock border">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 1
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 2
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 3
+     &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      Item 4
+     &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-activity" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-activity">
+               CVs, News ad Activity
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock activity&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;UX Designer at ACME&quot;&gt;
+      &lt;div&gt;
+        &lt;p class&#x3D;&quot;year&quot;&gt;
+          2016
+        &lt;/p&gt;
+        &lt;p class&#x3D;&quot;title&quot;&gt;
+          UX Designer at ACME
+        &lt;/p&gt;
+        &lt;p class&#x3D;&quot;summary&quot;&gt;
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        &lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;14 world famous buildings to inspire you&quot;&gt;
+      &lt;p class&#x3D;&quot;year&quot;&gt;
+        2 mins ago
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;title&quot;&gt;
+        14 world famous buildings to inspire you
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;summary&quot;&gt;
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world&#x27;s most famous buildings.
+      &lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Co-Founder of GAMMA&quot;&gt;
+      &lt;p class&#x3D;&quot;year&quot;&gt;
+        2013
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;title&quot;&gt;
+        Co-Founder of GAMMA
+      &lt;/p&gt;
+      &lt;p class&#x3D;&quot;summary&quot;&gt;
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      &lt;/p&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-activity.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-clients" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-clients">
+              Clients
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Highlight clients information</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock clients ">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock clients border">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock clients [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
+      &lt;figure&gt;
+        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/google.svg&quot; alt&#x3D;&quot;Google&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h3&gt;Interfaces&lt;/h3&gt;
+          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Client&quot;&gt;
+      &lt;figure&gt;
+        &lt;img class&#x3D;&quot;blacklogo&quot; src&#x3D;&quot;/static/images/logos/microsoft.svg&quot; alt&#x3D;&quot;Microsoft&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h3&gt;Interfaces&lt;/h3&gt;
+          &lt;p&gt;Collaboration with the Acme team to design their mobile apps. &lt;code&gt;img.blacklogo&lt;/code&gt;&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-clients.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-features" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-features">
+              Features
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Special features</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock features&quot;&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt; &lt;span&gt;100&lt;sup&gt;%&lt;/sup&gt;&lt;/span&gt; customizable&lt;/h2&gt;
+      Well documented.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;span&gt;&lt;sup&gt;$&lt;/sup&gt;48&lt;/span&gt;
+      &lt;h2&gt;Extra virgin olive oil&lt;/h2&gt;
+      The Spanish caviar.
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;
+      &lt;h2&gt;
+        Ultra-fast Wifi
+      &lt;/h2&gt;
+      Simple file sharing.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-features.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-gallery" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-gallery">
+              Galleries (portfolios, teams...)
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Beautiful gallery</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+        <figcaption>
+          <h2>uWatch</h2>
+          <p>By Jane Doe</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+        <figcaption>
+          <h2>Ellen Daniels</h2>
+          <p>CEO</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+        <figcaption>
+          <h2>New York</h2>
+          <p>3,456 rooms</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;uWatch&lt;/h2&gt;
+          &lt;p&gt;By Jane Doe&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
+          &lt;p&gt;CEO&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;figure&gt;
+        &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
+        &lt;figcaption&gt;
+          &lt;h2&gt;New York&lt;/h2&gt;
+          &lt;p&gt;3,456 rooms&lt;/p&gt;
+        &lt;/figcaption&gt;
+      &lt;/figure&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-gallery-overlay" class="kss-section kss-section--depth-3 ">
+
+        <div class="kss-style">
+          <h3 class="kss-title kss-title--level-3">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-gallery-overlay">
+              Gallery + Overflow
+            </a>
+          </h3>
+
+            <div class="kss-description">
+              <p>Beautiful gallery with overlay content</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>New York</h2>
+        <p>1,234 rooms</p>
+      </div>
+      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>uWatch</h2>
+        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>Ellen Daniels</h2>
+        <p>CEO</p>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock gallery&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;New York&lt;/h2&gt;
+        &lt;p&gt;1,234 rooms&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail &quot; src&#x3D;&quot;https://source.unsplash.com/-sQ4FsomXEs/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;uWatch&lt;/h2&gt;
+        &lt;time datetime&#x3D;&quot;2017-12-17T21:23:34-05:00&quot;&gt;December 2017&lt;/time&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/vCF5sB7QecM/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot;&gt;
+      &lt;div class&#x3D;&quot;overlay&quot;&gt;
+        &lt;h2&gt;Ellen Daniels&lt;/h2&gt;
+        &lt;p&gt;CEO&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;img alt&#x3D;&quot;Thumbnail&quot; src&#x3D;&quot;https://source.unsplash.com/yvx7LSZSzeo/800x600&quot;&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-gallery.scss</code>, line 44
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-metrics" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-metrics">
+              Metrics
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock metrics  ">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .border
+              </div>
+              <div class="kss-modifier__description kss-style">
+                with border
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock metrics  border">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock metrics  [modifier class]&quot;&gt;
+  &lt;li&gt; Founded
+    &lt;span&gt;2016&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;span&gt;24M&lt;/span&gt;
+    Subscribers
+  &lt;/li&gt;
+  &lt;li&gt;
+    Revenue:
+    &lt;span&gt;$16M&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    Monthly Growth
+    &lt;span&gt;64%&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-metrics.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-plans" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-plans">
+              Plans / Pricing
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Examples
+            </div>
+
+              <div class="kss-modifier__default-name kss-style">
+                Default styling
+              </div>
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock plans ">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+              <div class="kss-modifier__name kss-style">
+                .blink
+              </div>
+              <div class="kss-modifier__description kss-style">
+                block linkable
+              </div>
+              <div class="kss-modifier__example">
+                <ul class="flexblock plans blink">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+                <div class="kss-modifier__example-footer"></div>
+              </div>
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock plans [modifier class]&quot;&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Basic&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;Free&lt;/span&gt;
+        &lt;p&gt;Good karma. Just the essential features. 100% customizable. Make it yours.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Medium&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;4,99 &lt;sup&gt;/month&lt;/sup&gt;&lt;/span&gt;
+        &lt;p&gt;Clean markup with popular naming conventions. Minimum effort.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Buy Now&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href&#x3D;&quot;#&quot; title&#x3D;&quot;Purchase&quot;&gt;
+      &lt;h2&gt;Premium &lt;sup&gt;(save 20%)&lt;/sup&gt;&lt;/h2&gt;
+      &lt;div&gt;
+        &lt;span class&#x3D;&quot;price&quot;&gt;&lt;sup&gt;$&lt;/sup&gt;40 &lt;sup&gt;/year&lt;/sup&gt;&lt;/span&gt;
+        &lt;p&gt;Prototype faster. Create landings and portfolios. Unlimited projects.&lt;/p&gt;
+        &lt;span class&#x3D;&quot;button&quot;&gt;Select&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-plans.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-reasons" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-reasons">
+              Reasons
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock reasons&quot;&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Why WebSlides? Work better, faster.&lt;/h2&gt;
+    &lt;p&gt;Designers and marketers can now focus on the content. Simply &lt;a href&#x3D;&quot;/demos/&quot; title&#x3D;&quot;WebSlides Demos&quot;&gt;choose a demo&lt;/a&gt; and customize it in minutes. Be memorable! &lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;h2&gt; Good karma. Just the essentials and using lovely CSS.&lt;/h2&gt;
+    &lt;p&gt;WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-reasons.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-specs" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-specs">
+              Specs
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock specs">
+    <li>
+      <div>
+        <h2>Ultra-Fast WiFi</h2>
+        Simple and secure file sharing.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>All day battery life</h2>
+        Your battery worries may be over.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>Lifetime Warranty </h2>
+        We'll fix it or if we can't, we'll replace it.
+      </div>
+    </li>
+    </ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock specs&quot;&gt;
+    &lt;li&gt;
+      &lt;div&gt;
+        &lt;h2&gt;Ultra-Fast WiFi&lt;/h2&gt;
+        Simple and secure file sharing.
+      &lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;div&gt;
+        &lt;h2&gt;All day battery life&lt;/h2&gt;
+        Your battery worries may be over.
+      &lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;div&gt;
+        &lt;h2&gt;Lifetime Warranty &lt;/h2&gt;
+        We&#x27;ll fix it or if we can&#x27;t, we&#x27;ll replace it.
+      &lt;/div&gt;
+    &lt;/li&gt;
+    &lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-specs.scss</code>, line 1
+          </div>
+
+      </div>
+      <div id="kssref-multipurpose-blocks-steps" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-multipurpose-blocks-steps">
+               Steps
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Bla bla bla</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class&#x3D;&quot;flexblock steps&quot;&gt;
+  &lt;li&gt;
+    &lt;h2&gt;01. Passion&lt;/h2&gt;
+    &lt;p&gt;When you&#x27;re really passionate about your job, you can change the world.&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-2&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;02. Purpose&lt;/h2&gt;
+    &lt;p&gt;Why does this business exist? How are you different? Why matters?&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-3&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;03. Principles&lt;/h2&gt;
+    &lt;p&gt;Leadership through usefulness, openness, empathy, and good taste.&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div class&#x3D;&quot;process step-4&quot;&gt;&lt;/div&gt;
+    &lt;h2&gt;04. Process&lt;/h2&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Useful&lt;/li&gt;
+      &lt;li&gt;Easy&lt;/li&gt;
+      &lt;li&gt;Fast&lt;/li&gt;
+      &lt;li&gt;Beautiful&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>modules/_flexblock-steps.scss</code>, line 1
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/doc/styleguide/section-typography.html b/doc/styleguide/section-typography.html
new file mode 100644
index 0000000..d29e728
--- /dev/null
+++ b/doc/styleguide/section-typography.html
@@ -0,0 +1,890 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>WebSlides - Documentation 1.5.0</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="../../static/css/webslides.css">
+
+</head>
+<body id="kss-node" >
+<header class="kss-header">
+  <h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
+  <nav class="kss-header-nav">
+    <ul>
+        <li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
+        <li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
+        <li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
+    </ul>
+  </nav>
+</header>
+<div class="kss-sub-header">
+  <p>WebSlides - Documentation 1.5.0</p>
+</div>
+<div class="kss-container">
+  <div class="kss-sidebar kss-style">
+    <nav class="kss-nav">
+      <ul class="kss-nav__menu">
+        <li class="kss-nav__menu-item">
+          <a class="kss-nav__menu-link " href="./">
+            <span class="kss-nav__name">Introduction</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-architecture.html">
+            <span class="kss-nav__name">Architecture</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-contents.html">
+            <span class="kss-nav__name">Contents</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-forms.html">
+            <span class="kss-nav__name">Forms</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
+            <span class="kss-nav__name">Landings and portfolio</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-layout.html">
+            <span class="kss-nav__name">Layout</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-longforms.html">
+            <span class="kss-nav__name">Longform</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-media.html">
+            <span class="kss-nav__name">Media</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
+            <span class="kss-nav__name">Multipurpose blocks</span>
+          </a>
+        </li>
+        <li class="kss-nav__menu-item kss-nav-has-children">
+          <a class="kss-nav__menu-link kss-nav__menu-link-active" href="section-typography.html">
+            <span class="kss-nav__name">Typography</span>
+          </a>
+              <ul class="kss-nav__menu-child">
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-columns">
+                    <span class="kss-nav__name">Columns</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-context">
+                    <span class="kss-nav__name">Context</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-data">
+                    <span class="kss-nav__name">Data</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-emoji">
+                    <span class="kss-nav__name">Emoji</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-info">
+                    <span class="kss-nav__name">Info Messages</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-intro">
+                    <span class="kss-nav__name">Intro</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-label">
+                    <span class="kss-nav__name">Label</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-landings">
+                    <span class="kss-nav__name">Landings</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-lowercase">
+                    <span class="kss-nav__name">Lowercase</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-pull_quote">
+                    <span class="kss-nav__name">Pulls</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-separator">
+                    <span class="kss-nav__name">Separator</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-serif">
+                    <span class="kss-nav__name">Serif</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-shadow">
+                    <span class="kss-nav__name">Shadows</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-subtitle">
+                    <span class="kss-nav__name">Subtitule</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-symbols">
+                    <span class="kss-nav__name">Symbols</span>
+                  </a>
+                </li>
+                <li class="kss-nav__menu-item">
+                  <a class="kss-nav__menu-link kss-nav__ref " href="section-typography.html#kssref-typography-uppercase">
+                    <span class="kss-nav__name">Uppercase</span>
+                  </a>
+                </li>
+              </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div role="main" class="kss-main">
+
+      <div id="kssref-typography" class="kss-section kss-section--depth-1 ">
+
+        <div class="kss-style">
+          <h1 class="kss-title kss-title--level-1">
+            <a class="kss-title__permalink" href="#kssref-typography">
+              Typography
+            </a>
+          </h1>
+
+
+        </div>
+
+
+
+
+      </div>
+      <div id="kssref-typography-columns" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-columns">
+              Columns
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Magazine Two Columns</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 346
+          </div>
+
+      </div>
+      <div id="kssref-typography-context" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-context">
+              Context
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Heading with border</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-context">Why WebSlides?</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 376
+          </div>
+
+      </div>
+      <div id="kssref-typography-data" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-data">
+              Data
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Numbers (results, sales... )-</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-data">23,478,289</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 314
+          </div>
+
+      </div>
+      <div id="kssref-typography-emoji" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-emoji">
+              Emoji
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>You&#39;ll love this</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 296
+          </div>
+
+      </div>
+      <div id="kssref-typography-info" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-info">
+              Info Messages
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Error, warning, success...</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 546
+          </div>
+
+      </div>
+      <div id="kssref-typography-intro" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-intro">
+              Intro
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Typography Classes = .text-</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-intro">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 206
+          </div>
+
+      </div>
+      <div id="kssref-typography-label" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-label">
+              Label
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 333
+          </div>
+
+      </div>
+      <div id="kssref-typography-landings" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-landings">
+              Landings
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>h1,h2... Promo/Landings</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <h1 class="text-landing">Landings</h1>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 233
+          </div>
+
+      </div>
+      <div id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-lowercase">
+              Lowercase
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-lowercase">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 286
+          </div>
+
+      </div>
+      <div id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-pull_quote">
+              Pulls
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Pull Quote Right/Left</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
+<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
+&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
+&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
+&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 449
+          </div>
+
+      </div>
+      <div id="kssref-typography-separator" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-separator">
+              Separator
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Stars <em> </em> *</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-separator">Separator</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 418
+          </div>
+
+      </div>
+      <div id="kssref-typography-serif" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-serif">
+              Serif
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Maitree font</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-serif">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-serif&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 220
+          </div>
+
+      </div>
+      <div id="kssref-typography-shadow" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-shadow">
+              Shadows
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Drops a shadow under the layer. The layer containing the shadow has to have a solid background</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <div class="bg-white shadow">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+</div>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;bg-white shadow&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+&lt;/div&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_base.scss</code>, line 73
+          </div>
+
+      </div>
+      <div id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-subtitle">
+              Subtitule
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Subtitle (Before h1, h2)</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-subtitle&quot;&gt;Powered by &lt;a href&#x3D;&quot;#&quot;&gt;#WebSlides&lt;/a&gt; &lt;code&gt;.text-subtitle&lt;/code&gt;&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 250
+          </div>
+
+      </div>
+      <div id="kssref-typography-symbols" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-symbols">
+              Symbols
+            </a>
+          </h2>
+
+            <div class="kss-description">
+              <p>Stars <em> </em> *</p>
+
+            </div>
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-symbols">* * *</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-symbols&quot;&gt;* * *&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 404
+          </div>
+
+      </div>
+      <div id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 ">
+
+        <div class="kss-style">
+          <h2 class="kss-title kss-title--level-2">
+            <a class="kss-title__permalink" href="#kssref-typography-uppercase">
+              Uppercase
+            </a>
+          </h2>
+
+
+        </div>
+
+
+          <div class="kss-modifier__wrapper">
+            <div class="kss-modifier__heading kss-style">
+              Example
+            </div>
+
+
+            <div class="kss-modifier__example">
+              <p class="text-uppercase">Create a simple web presence.</p>
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+
+          </div>
+
+            <details class="kss-markup kss-style">
+              <summary>
+                  Markup
+              </summary>
+              <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-uppercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
+            </details>
+
+          <div class="kss-source kss-style">
+            Source: <code>_typography.scss</code>, line 276
+          </div>
+
+      </div>
+  </div>
+</div>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>
diff --git a/kss-config.json b/kss-config.json
index 8898920..a1822fd 100644
--- a/kss-config.json
+++ b/kss-config.json
@@ -20,9 +20,9 @@
   ],
 
   "mainmenu": [
-    {"title" : "WebSlides", "url" : "../../index.html"},
-    {"title" : "Documentation", "url" : "./"},
-    {"title" : "Demos", "url" : ".../demos/index.html"}
+    {"title" : "WebSlides", "url" : "../../index.html", "class": ""},
+    {"title" : "Documentation", "url" : "./", "class": "kss-menu-active"},
+    {"title" : "Demos", "url" : ".../demos/index.html", "class": ""}
   ]
 
 }
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index c82b661..db458fb 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -79,7 +79,7 @@ nav a[rel='external'] em,
 //   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
 // </div>
 //
-// Styleguide Architecture.Shadow
+// Styleguide Typography.Shadow
 .shadow {
   position: relative;
 
@@ -152,7 +152,7 @@ footer nav {
 // .alignleft - Align left.
 // .aligncenter - Align center.
 //
-// Styleguide Architecture.Alignment
+// Styleguide Layout.Alignment
 .alignright {
   float: right;
 }
@@ -196,7 +196,7 @@ figure.alignleft {
   margin: .8rem 2.4rem .8rem 0;
 }
 
-// Resizing
+// Sizes
 //
 // Markup:
 // <img src="../../../static/images/iphone.png" class="{{modifier_class}}" />
@@ -209,7 +209,7 @@ figure.alignleft {
 // .size-30 - resize to 30%.
 // .size-20 - resize to 20%.
 //
-// Styleguide Architecture.Sizes
+// Styleguide Layout.Sizes
 $sizes: 80, 70, 60, 50, 40, 30, 20;
 
 /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
diff --git a/src/scss/_color.scss b/src/scss/_color.scss
index 58fdb7c..34cc21e 100644
--- a/src/scss/_color.scss
+++ b/src/scss/_color.scss
@@ -123,7 +123,7 @@ Slides - Backgrounds <section class="bg-primary">
 // <span class="bg-white size-20">White #fff</span>
 // <span class="bg-facebook size-20">Facebook #3b5998</span>
 //
-// Styleguide Architecture.Backgrounds
+// Styleguide Layout.Backgrounds
 @each $name, $color in $bg-colors {
   .bg-#{$name} {
     background-color: $color;
@@ -176,7 +176,7 @@ Slides - Backgrounds <section class="bg-primary">
 //   <div class="bg-trans-gradient">Gradient</div>
 // </div>
 //
-// Styleguide Architecture.backgrounds.transparent
+// Styleguide Layout.backgrounds.transparent
 .bg-trans-dark {
   background: rgba($black, .8);
 }
@@ -199,7 +199,7 @@ Slides - Backgrounds <section class="bg-primary">
 //   <div class="bg-gradient-v">Vertical</div>
 //   <div class="bg-gradient-r">Radial</div>
 //
-// Styleguide Architecture.backgrounds.gradient
+// Styleguide Layout.backgrounds.gradient
 /*Horizontal Gradient*/
 .bg-gradient-h {
   background: linear-gradient(134deg, #32b 0, #62b 100%);
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index 8242d7c..beb12ce 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -210,7 +210,7 @@ h3 [class*='bg-'] {
 // Markup:
 // <p class="text-intro">Create a simple web presence.</p>
 //
-// Styleguide Architecture.Intro
+// Styleguide Typography.Intro
 .text-intro,
 [class*='content-'] p {
   font-size: 2.4rem;
@@ -224,7 +224,7 @@ h3 [class*='bg-'] {
 // Markup:
 // <p class="text-serif">Create a simple web presence.</p>
 //
-// Styleguide Architecture.Serif
+// Styleguide Typography.Serif
 .text-serif,
 h1 span {
   font-family: 'Maitree', times, serif;
@@ -237,7 +237,7 @@ h1 span {
 // Markup:
 // <h1 class="text-landing">Landings</h1>
 //
-// Styleguide Architecture.Landings
+// Styleguide Typography.Landings
 .text-landing {
   letter-spacing: .4rem;
   text-transform: uppercase;
@@ -254,7 +254,7 @@ h1 span {
 // Markup:
 // <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
 //
-// Styleguide Architecture.Subtitle
+// Styleguide Typography.Subtitle
 .text-subtitle {
   letter-spacing: .2rem;
   margin-bottom: 0;
@@ -278,7 +278,7 @@ h1 span {
 // Markup:
 // <p class="text-uppercase">Create a simple web presence.</p>
 //
-// Styleguide Architecture.Uppercase
+// Styleguide Typography.Uppercase
 .text-uppercase {
   text-transform: uppercase;
 }
@@ -288,7 +288,7 @@ h1 span {
 // Markup:
 // <p class="text-lowercase">Create a simple web presence.</p>
 //
-// Styleguide Architecture.Lowercase
+// Styleguide Typography.Lowercase
 .text-lowercase {
   text-transform: lowercase;
 }
@@ -300,7 +300,7 @@ h1 span {
 // Markup:
 // <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
 //
-// Styleguide Architecture.Emoji
+// Styleguide Typography.Emoji
 .text-emoji {
   font-size: 6.8rem;
   line-height: 8.8rem;
@@ -318,7 +318,7 @@ h1 span {
 // Markup:
 // <p class="text-data">23,478,289</p>
 //
-// Styleguide Architecture.Data
+// Styleguide Typography.Data
 .text-data {
   font-size: 6.4rem;
   line-height: 8rem;
@@ -335,7 +335,7 @@ h1 span {
 // Markup:
 // <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
 //
-// Styleguide Architecture.Label
+// Styleguide Typography.Label
 .text-label {
   display: inline-block;
   font-weight: 600;
@@ -350,7 +350,7 @@ h1 span {
 // Markup:
 // <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
 //
-// Styleguide Architecture.Columns
+// Styleguide Typography.Columns
 @media  (min-width: 768px) {
   .text-cols {
     column-count: 2;
@@ -380,7 +380,7 @@ h1 span {
 // Markup:
 // <p class="text-context">Why WebSlides?</p>
 //
-// Styleguide Architecture.Context
+// Styleguide Typography.Context
 .text-context {
   position: relative;
 
@@ -408,7 +408,7 @@ h1 span {
 // Markup:
 // <p class="text-symbols">* * *</p>
 //
-// Styleguide Architecture.Symbols
+// Styleguide Typography.Symbols
 .text-symbols {
   font-weight: 600;
   letter-spacing: .8rem;
@@ -422,7 +422,7 @@ h1 span {
 // Markup:
 // <p class="text-separator">Separator</p>
 //
-// Styleguide Architecture.Separator
+// Styleguide Typography.Separator
 .text-separator {
   margin-top: 2.4rem;
 
@@ -446,7 +446,7 @@ h1 span {
   }
 }
 
-// Pull Quote
+// Pulls
 //
 // Pull Quote Right/Left
 //
@@ -456,7 +456,7 @@ h1 span {
 // <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
 // <p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
 //
-// Styleguide Architecture.Pull_Quote
+// Styleguide Typography.Pull_Quote
 [class*='text-pull'] {
   font-size: 2.4rem;
   font-weight: 400;
@@ -525,7 +525,7 @@ figure[class*='text-pull-'] {
 //   </dd>
 // </dl>
 //
-// Styleguide Architecture.Interviews
+// Styleguide Longforms.Interviews
 .text-interview dt {
   font-weight: 600;
   margin-bottom: 0;
@@ -550,7 +550,7 @@ figure[class*='text-pull-'] {
 // Markup:
 // <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
 //
-// Styleguide Architecture.Info
+// Styleguide Typography.Info
 .text-info {
   font-size: 1.6rem;
   line-height: 2.4rem;
diff --git a/src/scss/modules/_badges.scss b/src/scss/modules/_badges.scss
index ba88533..0844e51 100644
--- a/src/scss/modules/_badges.scss
+++ b/src/scss/modules/_badges.scss
@@ -6,7 +6,7 @@
 // <p class="badge-android">Google Play</p>
 // <p class="badge-ios">App Store</p>
 //
-// Styleguide Media.Badgets
+// Styleguide Landings and portfolio.Badgets
 [class*='badge-'] {
   background-repeat: no-repeat;
   background-size: cover;
diff --git a/src/scss/modules/_button.scss b/src/scss/modules/_button.scss
index 52860a2..9c24f7d 100644
--- a/src/scss/modules/_button.scss
+++ b/src/scss/modules/_button.scss
@@ -5,7 +5,7 @@
 //
 // .radius - Rounded corners
 //
-// Styleguide Architecture.Buttons
+// Styleguide Landings and portfolio.Buttons
 [class*='button'] {
   @media (min-width: 500px) {
     & + & {
diff --git a/src/scss/modules/_cards.scss b/src/scss/modules/_cards.scss
index d4dab26..01ec5ce 100644
--- a/src/scss/modules/_cards.scss
+++ b/src/scss/modules/_cards.scss
@@ -12,7 +12,7 @@
 //     </div>
 //   </div>
 //
-// Styleguide Landings.Cards
+// Styleguide Landings and portfolio.Cards
 [class*='card-'] {
   &,
   & > a {
diff --git a/src/scss/modules/_flexblock-activity.scss b/src/scss/modules/_flexblock-activity.scss
index 63104eb..27b3512 100644
--- a/src/scss/modules/_flexblock-activity.scss
+++ b/src/scss/modules/_flexblock-activity.scss
@@ -47,7 +47,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Contents.Activity
+// Styleguide Multipurpose blocks.Activity
 .flexblock.activity {
   flex-direction: column;
 
diff --git a/src/scss/modules/_flexblock-clients.scss b/src/scss/modules/_flexblock-clients.scss
index 5d1ba6c..e87806b 100644
--- a/src/scss/modules/_flexblock-clients.scss
+++ b/src/scss/modules/_flexblock-clients.scss
@@ -30,7 +30,7 @@
 //
 // .border - with border
 //
-// Styleguide Contents.Clients
+// Styleguide Multipurpose blocks.Clients
 
 .flexblock.clients.blink li > a,
 .flexblock.clients li {
diff --git a/src/scss/modules/_flexblock-features.scss b/src/scss/modules/_flexblock-features.scss
index 94d92fa..8d2c94e 100644
--- a/src/scss/modules/_flexblock-features.scss
+++ b/src/scss/modules/_flexblock-features.scss
@@ -29,7 +29,7 @@
 //
 // .border - with border
 //
-// Styleguide Contents.Features
+// Styleguide Multipurpose blocks.Features
 .flexblock.features {
   > li {
     border-radius: .4rem;
diff --git a/src/scss/modules/_flexblock-gallery.scss b/src/scss/modules/_flexblock-gallery.scss
index f81149c..a29b8c6 100644
--- a/src/scss/modules/_flexblock-gallery.scss
+++ b/src/scss/modules/_flexblock-gallery.scss
@@ -39,7 +39,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Contents.Gallery
+// Styleguide Multipurpose blocks.Gallery
 
 // Gallery + Overflow
 //
@@ -76,7 +76,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Contents.Gallery.Overlay
+// Styleguide Multipurpose blocks.Gallery.Overlay
 
 .flexblock.gallery {
   li {
diff --git a/src/scss/modules/_flexblock-metrics.scss b/src/scss/modules/_flexblock-metrics.scss
index 7cb23e4..3146ade 100644
--- a/src/scss/modules/_flexblock-metrics.scss
+++ b/src/scss/modules/_flexblock-metrics.scss
@@ -23,7 +23,7 @@
 //
 // .border - with border
 //
-// Styleguide Contents.Metrics
+// Styleguide Multipurpose blocks.Metrics
 .metrics li {
   text-align: center;
   width: 100%;
diff --git a/src/scss/modules/_flexblock-plans.scss b/src/scss/modules/_flexblock-plans.scss
index 57284d0..db4480e 100644
--- a/src/scss/modules/_flexblock-plans.scss
+++ b/src/scss/modules/_flexblock-plans.scss
@@ -38,7 +38,7 @@
 //
 // .blink - block linkable
 //
-// Styleguide Contents.Plans
+// Styleguide Multipurpose blocks.Plans
 .flexblock.plans {
   > li {
     border-radius: 3px;
diff --git a/src/scss/modules/_flexblock-reasons.scss b/src/scss/modules/_flexblock-reasons.scss
index 6e8e060..2f077ce 100644
--- a/src/scss/modules/_flexblock-reasons.scss
+++ b/src/scss/modules/_flexblock-reasons.scss
@@ -14,7 +14,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Contents.Reasons
+// Styleguide Multipurpose blocks.Reasons
 .flexblock.reasons {
   li {
     counter-increment: list;
diff --git a/src/scss/modules/_flexblock-specs.scss b/src/scss/modules/_flexblock-specs.scss
index 3bc8b7c..4944748 100644
--- a/src/scss/modules/_flexblock-specs.scss
+++ b/src/scss/modules/_flexblock-specs.scss
@@ -24,7 +24,7 @@
 //     </li>
 //     </ul>
 //
-// Styleguide Contents.Specs
+// Styleguide Multipurpose blocks.Specs
 
 .specs li {
   text-align: left;
diff --git a/src/scss/modules/_flexblock-steps.scss b/src/scss/modules/_flexblock-steps.scss
index 1feb104..ef831e8 100644
--- a/src/scss/modules/_flexblock-steps.scss
+++ b/src/scss/modules/_flexblock-steps.scss
@@ -30,7 +30,7 @@
 //   </li>
 // </ul>
 //
-// Styleguide Contents.Steps
+// Styleguide Multipurpose blocks.Steps
 .steps li {
   width: 100%;
 
diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss
index 5382004..8da7513 100644
--- a/src/scss/modules/_flexblock.scss
+++ b/src/scss/modules/_flexblock.scss
@@ -1,4 +1,4 @@
-// Flexblocks
+// Multipurpose blocks
 //
 // Auto-fill & Equal height columns
 //
@@ -29,7 +29,7 @@
 // .blink - Linkable block
 // .border - With border
 //
-// Styleguide Contents.Flexblocks
+// Styleguide Multipurpose blocks
 .flexblock {
   clear: both;
   display: flex;
diff --git a/src/scss/modules/_form.scss b/src/scss/modules/_form.scss
index 52dc5ae..92be355 100644
--- a/src/scss/modules/_form.scss
+++ b/src/scss/modules/_form.scss
@@ -144,7 +144,7 @@ button:disabled:hover {
 //   <button>Log in</button>
 // </div>
 //
-// Styleguide Architecture.Forms.User
+// Styleguide Forms.Login
 .user {
   input {
     margin-bottom: 0;
diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss
index 65a2591..2c50d58 100644
--- a/src/scss/modules/_grid.scss
+++ b/src/scss/modules/_grid.scss
@@ -18,7 +18,7 @@
 //
 // .vertical-align - Vertical align
 //
-// Styleguide Architecture.Grid
+// Styleguide Layout.Grid
 .grid {
   clear: both;
   display: flex;
diff --git a/src/scss/modules/_longform.scss b/src/scss/modules/_longform.scss
index 112d296..206bc69 100644
--- a/src/scss/modules/_longform.scss
+++ b/src/scss/modules/_longform.scss
@@ -5,7 +5,7 @@
 //   <p>Lorem ipsum</p>
 // </section>
 //
-// Styleguide Landings.Longform
+// Styleguide Longforms
 .longform {
   width: 72rem;
   /* Why 72rem=720px?
diff --git a/src/scss/modules/_navigation.scss b/src/scss/modules/_navigation.scss
index 0af9677..421f321 100644
--- a/src/scss/modules/_navigation.scss
+++ b/src/scss/modules/_navigation.scss
@@ -1,4 +1,4 @@
-// Navigation
+// Navbars
 //
 // Responsive Media (videos, iframe...)
 //
@@ -24,7 +24,7 @@
 // .aligncenter - Center alignment
 // .alignright - Right alignment
 //
-// Styleguide Architecture.Navigation
+// Styleguide Layout.Navbars
 nav ul {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/scss/modules/_promos.scss b/src/scss/modules/_promos.scss
index 9c0da29..499f3b1 100644
--- a/src/scss/modules/_promos.scss
+++ b/src/scss/modules/_promos.scss
@@ -11,7 +11,7 @@
 //   </div>
 // </div>
 //
-// Styleguide Landings.CTA
+// Styleguide Landings and portfolio.CTA
 .cta {
   display: flex;
   flex-wrap: wrap;
@@ -72,7 +72,7 @@
   }
 }
 
-// Headings
+// Covers
 //
 // Markup:
 // <div class="cta-cover">
@@ -85,7 +85,7 @@
 //   </p>
 // </div>
 //
-// Styleguide Landings.cta-cover
+// Styleguide Landings and portfolio.cta-cover
 .cta-cover {
   display: table;
   width: 100%;
diff --git a/src/scss/modules/_quotes.scss b/src/scss/modules/_quotes.scss
index dbb328b..6c30a17 100644
--- a/src/scss/modules/_quotes.scss
+++ b/src/scss/modules/_quotes.scss
@@ -1,11 +1,13 @@
-// Quotes
+// Quotes & Cites
 //
 // Markup:
 // <blockquote>
 //   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
 // </blockquote>
+// <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
 //
-// Styleguide Landings.Quotes
+//
+// Styleguide Landings and portfolio.Quotes
 blockquote {
   display: inline-block;
   position: relative;
@@ -25,12 +27,6 @@ dd blockquote p:last-child {
   margin-bottom: 0;
 }
 
-// Cites
-//
-// Markup:
-// <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
-//
-// Styleguide Landings.Cites
 cite {
   display: block;
   text-align: center;
diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss
index 355b635..c123500 100644
--- a/src/scss/modules/_slides-bg.scss
+++ b/src/scss/modules/_slides-bg.scss
@@ -32,7 +32,7 @@
 // .background-left - Left.
 // .background-right - Right.
 //
-// Styleguide Architecture.Background
+// Styleguide Layout.Background
 .background {
   background-position: center;
   background-size: cover;
@@ -102,7 +102,7 @@
   //   </div>
   // </section>
   //
-  // Styleguide Media.Background.Video
+  // Styleguide Layout.Background.Video
   &-video {
     height: 100%;
     object-fit: fill;
@@ -144,7 +144,7 @@
 //   <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
 // </section>
 //
-// Styleguide Media.Background.Anim
+// Styleguide Layout.Background.Anim
 .background.anim {
   animation: anim 80s linear infinite;
   background-position: center top;
diff --git a/src/scss/modules/_slides-navigation.scss b/src/scss/modules/_slides-navigation.scss
index 79768b3..a6b3f2c 100644
--- a/src/scss/modules/_slides-navigation.scss
+++ b/src/scss/modules/_slides-navigation.scss
@@ -7,7 +7,7 @@
 //   <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
 // </div>
 //
-// Styleguide Architecture.Navigation
+// Styleguide Layout.Slide-Navigation
 #navigation {
   animation: fadeIn 8s;
   bottom: 0;
diff --git a/src/scss/modules/_slides.scss b/src/scss/modules/_slides.scss
index 691a5e6..39f1ce6 100644
--- a/src/scss/modules/_slides.scss
+++ b/src/scss/modules/_slides.scss
@@ -9,7 +9,7 @@
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Architecture.Slides
+// Styleguide Layout.Slides
 section * {
   animation: fadeIn .6s ease-in-out;
 }
@@ -40,7 +40,7 @@ section,
   }
 }
 
-// fullscreen
+// Fullscreen
 //
 // Slide with no padding (full card, .embed youtube video...)
 //
@@ -49,7 +49,7 @@ section,
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Architecture.Slides
+// Styleguide Layout.Slides.Fullscreen
 .fullscreen {
   padding: 0;
   /* Fixed/Visible header?
@@ -66,7 +66,7 @@ section,
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Architecture.Slides.Top
+// Styleguide Layout.Slides.Top
 .slide-top {
   justify-content: flex-start;
 }
@@ -80,7 +80,7 @@ section,
 //   <p>Content</p>
 // </section>
 //
-// Styleguide Architecture.Slides.Bottom
+// Styleguide Layout.Slides.Bottom
 .slide-bottom {
   justify-content: flex-end;
 }
diff --git a/src/scss/modules/_tables.scss b/src/scss/modules/_tables.scss
index d936c6a..689b712 100644
--- a/src/scss/modules/_tables.scss
+++ b/src/scss/modules/_tables.scss
@@ -1,38 +1,3 @@
-// Tables
-//
-// Markup:
-// <table>
-//   <thead>
-//    <tr>
-//      <th>Plans</th>
-//      <th>Good</th>
-//      <th>Better</th>
-//      <th>Awesome</th>
-//    </tr>
-//   </thead>
-//   <tbody>
-//     <tr>
-//       <td>Price</td>
-//       <td>Free</td>
-//       <td>$6</td>
-//       <td>$10</td>
-//     </tr>
-//     <tr>
-//       <td>Access to exclusive content</td>
-//       <td>No</td>
-//       <td>No</td>
-//       <td>Yes</td>
-//     </tr>
-//     <tr>
-//       <td>Screens you can watch on at the same time</td>
-//       <td>1</td>
-//       <td>2</td>
-//       <td>Unlimited</td>
-//     </tr>
-//   </tbody>
-// </table>
-//
-// Styleguide Architecture.Tables
 table {
   margin-bottom: 3.2rem;
   margin-top: 3.2rem;
diff --git a/src/scss/modules/_toc.scss b/src/scss/modules/_toc.scss
index 8509129..78c5d10 100644
--- a/src/scss/modules/_toc.scss
+++ b/src/scss/modules/_toc.scss
@@ -27,7 +27,7 @@
 //   </ol>
 // </div>
 //
-// Styleguide Landings.TOC
+// Styleguide Landings and portfolio.TOC
 .toc,
 .toc ol > li:before,
 .chapter {
diff --git a/src/scss/modules/_work.scss b/src/scss/modules/_work.scss
index c88e595..4a1d9e9 100644
--- a/src/scss/modules/_work.scss
+++ b/src/scss/modules/_work.scss
@@ -1,4 +1,4 @@
-// Work / Resumé / CV
+// CV / Resumé
 //
 // Markup:
 // <ul class="work">