Merge pull request #534 from picturepan2/0.5.6 v0.5.6

0.5.6

21 files changed, 792 insertions, 45 deletions

diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug
index a935fc1..9ad4772 100644
--- a/docs/src/_layout/_docs-layout.pug
+++ b/docs/src/_layout/_docs-layout.pug
@@ -6,10 +6,13 @@ block content
     .docs-navbar
       a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
         i.icon.icon-menu
-      .btns
-        a.btn.btn-primary.float-right(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
-        a.btn.mr-1.float-right(href='https://www.paypal.me/picturepan2' target='_blank') Sponsor
+      .btns.d-flex
+        input.docs-search.form-input(type="text" placeholder="Search Docs")
+        a.btn.ml-1(href='https://www.paypal.me/picturepan2' target='_blank') PayPal
+        a.btn.btn-primary.ml-1(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
         
+        
+
     #sidebar.docs-sidebar.off-canvas-sidebar
       .docs-brand
         if slug != parent
@@ -47,6 +50,7 @@ block content
             'Layout',
             {url: 'grid', name: 'Flexbox grid'},
             {url: 'responsive', name: 'Responsive'},
+            {url: 'hero', name: 'Hero'},
             {url: 'navbar', name: 'Navbar'}
           )
           +docs-accordion(
@@ -103,4 +107,13 @@ block content
     a.off-canvas-overlay(href='#close')
     .off-canvas-content
       #content.docs-content
-        block docs-content
\ No newline at end of file
+        block docs-content
+
+  script(type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js")
+  script.
+    docsearch({ 
+    apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+    indexName: 'picturepan2_spectre', 
+    inputSelector: '.docs-search', 
+    debug: true
+    }); 
\ No newline at end of file
diff --git a/docs/src/_layout/_example-layout.pug b/docs/src/_layout/_example-layout.pug
new file mode 100644
index 0000000..f74bc81
--- /dev/null
+++ b/docs/src/_layout/_example-layout.pug
@@ -0,0 +1,35 @@
+block variables
+  - var slug = ''
+  - var parent = ''
+  - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='robots' content='index, follow')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
+    meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='description' content= description)
+    link(rel='shortcut icon' href='../img/favicons/favicon.ico')
+    link(rel='icon' href='../img/favicons/favicon.png')
+    link(rel='stylesheet' href='../dist/spectre.min.css')
+    link(rel='stylesheet' href='../dist/spectre-icons.min.css')
+    link(rel='stylesheet' href='../dist/spectre-exp.min.css')
+    link(rel='stylesheet' href='../dist/docs.min.css') 
+
+  body
+    block content
+
+    script.
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+
+  
\ No newline at end of file
diff --git a/docs/src/_layout/_layout.pug b/docs/src/_layout/_layout.pug
index 53dca0e..6eb2e38 100644
--- a/docs/src/_layout/_layout.pug
+++ b/docs/src/_layout/_layout.pug
@@ -53,5 +53,4 @@ html(lang='en')
 
       ga('create', 'UA-2702768-8', 'auto');
       ga('send', 'pageview');
-
   
\ No newline at end of file
diff --git a/docs/src/components.pug b/docs/src/components.pug
index fa7d1cd..ffc8f7b 100644
--- a/docs/src/components.pug
+++ b/docs/src/components.pug
@@ -3,7 +3,7 @@ extends _layout/_docs-layout.pug
 block variables
   - var slug = 'components'
   - var parent = 'components'
-  - var title = 'components - Spectre.css CSS Framework'
+  - var title = 'Components - Spectre.css CSS Framework'
   - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
diff --git a/docs/src/components/tabs.pug b/docs/src/components/tabs.pug
index 0050682..27f5644 100644
--- a/docs/src/components/tabs.pug
+++ b/docs/src/components/tabs.pug
@@ -119,7 +119,7 @@ block docs-content
               | Store
           li.tab-item.tab-action
             .input-group.input-inline
-              input.form-input.input-sm(type="text" placeholder="search")
+              input.form-input.input-sm(type="text")
               button.btn.btn-primary.btn-sm.input-group-btn Search
 
     p
@@ -137,7 +137,7 @@ block docs-content
             </li>
             <li class="tab-item tab-action">
               <div class="input-group input-inline">
-                <input class="form-input input-sm" type="text" placeholder="search">
+                <input class="form-input input-sm" type="text">
                 <button class="btn btn-primary btn-sm input-group-btn">Search</button>
               </div>
             </li>
diff --git a/docs/src/components/toasts.pug b/docs/src/components/toasts.pug
index d1d9bb9..718300b 100644
--- a/docs/src/components/toasts.pug
+++ b/docs/src/components/toasts.pug
@@ -17,11 +17,13 @@ block docs-content
         .toast
           button.btn.btn-clear.float-right
           h6 Toast Title
-          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          p
+            | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       .column.col-9.col-sm-12
         .toast.toast-primary
           button.btn.btn-clear.float-right
-          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          p
+            | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
     p
       | Add a container element with the #[code toast] class.
@@ -39,15 +41,18 @@ block docs-content
       .column.col-sm-12
         .toast.toast-success
           button.btn.btn-clear.float-right
-          | Toast success
+          p
+            | Toast success
       .column.col-sm-12
         .toast.toast-warning
           button.btn.btn-clear.float-right
-          | Toast warning
+          p
+            | Toast warning
       .column.col-sm-12
         .toast.toast-error
           button.btn.btn-clear.float-right
-          | Toast error
+          p
+            | Toast error
 
     p
       | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors.
diff --git a/docs/src/components/tooltips.pug b/docs/src/components/tooltips.pug
index 7fdafde..e9b041e 100644
--- a/docs/src/components/tooltips.pug
+++ b/docs/src/components/tooltips.pug
@@ -20,7 +20,7 @@ block docs-content
       .column.col-xs-12
         button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
       .column.col-xs-12
-        button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip
+        button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") left tooltip
 
     p Tooltips component is built entirely in CSS.
     p
@@ -34,6 +34,20 @@ block docs-content
         :highlight(lang="html")
           <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
           <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+    +docs-subheading('tooltips-multiline', 'Multiline tooltips')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-primary.tooltip(data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text \n Third Line Tooltip Text") multiline tooltip
+
+    p
+      | Add the #[code \n] string between any text for multiline tooltips.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>
     
     include ../_layout/_ad-c.pug
 
diff --git a/docs/src/elements/code.pug b/docs/src/elements/code.pug
index 894b617..920fea9 100644
--- a/docs/src/elements/code.pug
+++ b/docs/src/elements/code.pug
@@ -11,8 +11,21 @@ block docs-content
     include ../_layout/_ad-g.pug
 
     p Code is used for styling inline and multiline code snippets.
+
+    +docs-subheading('code-inline', 'Inline code')
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- inline code -->
+          <code>code</code>
+
     p
       | For inline code, you can use the #{'<code>'} element. 
+
+    +docs-subheading('code-snippet', 'Code snippet')
+
+    p
       | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
       | The #[code data-lang] attribute is rendered as the language name in the top right.
 
diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug
index 5532860..cf39916 100644
--- a/docs/src/elements/forms.pug
+++ b/docs/src/elements/forms.pug
@@ -13,6 +13,8 @@ block docs-content
     p
       | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
 
+    +docs-subheading('forms-input', 'Form input')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -31,6 +33,8 @@ block docs-content
             <input class="form-input" type="text" id="input-example-1" placeholder="Name">
           </div>
 
+    +docs-subheading('forms-textarea', 'Form textarea')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -46,6 +50,8 @@ block docs-content
             <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
           </div>
 
+    +docs-subheading('forms-select', 'Form select')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -74,6 +80,8 @@ block docs-content
             </select>
           </div>
 
+    +docs-subheading('forms-radio', 'Form radio')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         form
@@ -104,6 +112,8 @@ block docs-content
             </label>
           </div>
 
+    +docs-subheading('forms-switch', 'Form switch')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -128,6 +138,8 @@ block docs-content
             </label>
           </div>
 
+    +docs-subheading('forms-checkbox', 'Form checkbox')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
diff --git a/docs/src/elements/icons.pug b/docs/src/elements/icons.pug
index 1430fe4..6128b3e 100644
--- a/docs/src/elements/icons.pug
+++ b/docs/src/elements/icons.pug
@@ -141,6 +141,10 @@ block docs-content
         button.btn.btn-primary.btn-action.btn-lg
           i.icon.icon-upload
         p icon-upload
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-copy
+        p icon-copy
 
     +docs-subheading('icons-object', 'Object icons')
 
diff --git a/docs/src/elements/labels.pug b/docs/src/elements/labels.pug
index 7232d42..7c6c55b 100644
--- a/docs/src/elements/labels.pug
+++ b/docs/src/elements/labels.pug
@@ -32,6 +32,8 @@ block docs-content
           <span class="label">default label</span>
           <span class="label label-primary">primary label</span>
 
+    +docs-subheading('labels-rounded', 'Rounded labels')
+    
     .docs-demo.columns
       .column
         span.label.label-rounded.mr-1 default label
diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug
index 05cd719..3cd4c2c 100644
--- a/docs/src/elements/media.pug
+++ b/docs/src/elements/media.pug
@@ -17,10 +17,15 @@ block docs-content
     p
       | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
 
-    .columns
+    .docs-demo.columns
       .column.col-12
         img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+
     p
       | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
       | This feature can replace the classic background image trick. Microsoft Edge support 
@@ -40,7 +45,6 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
           <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
 
@@ -59,6 +63,14 @@ block docs-content
           img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
           figcaption.figure-caption.text-center macOS Yosemite wallpaper
 
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="figure">
+            <img class="img-responsive ..." src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+            <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+          </figure>
+
     +docs-subheading('media-video', 'Video')
 
     p
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
index 3e087d9..5eec15d 100644
--- a/docs/src/elements/tables.pug
+++ b/docs/src/elements/tables.pug
@@ -14,7 +14,7 @@ block docs-content
 
     .docs-demo.columns
       .column.col-12
-        table.table.table-striped
+        table.table
           thead
             tr
               th Name
@@ -40,7 +40,57 @@ block docs-content
 
     p
       | Add the #[code table] class to any #{'<table>'} element. 
-      | The class will add padding, border and emphasized table header. 
+      | The class will add padding, border and emphasized table header.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table">
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>genre</th>
+                <th>release date</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="active">
+                <td>The Shawshank Redemption</td>
+                <td>Crime, Drama</td>
+                <td>14 October 1994</td>
+              </tr>
+            </tbody>
+          </table>
+    
+    +docs-subheading('tables-striped', 'Striped tables')
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped.table-hover
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr.active
+              td The Godfather
+              td Crime, Drama
+              td 24 March 1972
+            tr
+              td Schindler's List
+              td Biography, Drama, History
+              td 4 February 1994
+            tr
+              td Se7en
+              td Crime, Drama, Mystery
+              td 22 September 1995
+
+    p
       | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
       | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
     p
@@ -66,10 +116,11 @@ block docs-content
             </tbody>
           </table>
 
+    +docs-subheading('tables-scroll', 'Scrollable tables')
 
     .docs-demo.columns
       .column.col-12
-        table.table.table-striped.table-scroll
+        table.table.table-scroll
           thead
             tr
               th Name
@@ -114,7 +165,7 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <table class="table table-striped table-scroll">
+          <table class="table table-scroll">
             ...
           </table>
 
diff --git a/docs/src/examples/starter.pug b/docs/src/examples/starter.pug
new file mode 100644
index 0000000..e062def
--- /dev/null
+++ b/docs/src/examples/starter.pug
@@ -0,0 +1,26 @@
+extends ../_layout/_example-layout.pug
+
+block variables
+  - var slug = 'starter'
+  - var parent = 'examples'
+  - var title = 'Starter Page Example -  Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block content
+  .section.bg-gray
+    H1 Starter Page Example
+  .section.section-ads.bg-gray
+    include ../_layout/_ad-c.pug
+
+  footer.section.section-footer
+    #copyright.docs-footer.container.grid-lg
+      p
+        a(href='getting-started.html' target='_blank') Documents
+        |  · 
+        a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+        |  · 
+        a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+        |  · 
+        a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+        |  · Version 
+        span.version
\ No newline at end of file
diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug
index 3ae34bb..afc4281 100644
--- a/docs/src/experimentals/carousels.pug
+++ b/docs/src/experimentals/carousels.pug
@@ -37,13 +37,13 @@ block docs-content
                 i.icon.icon-arrow-left
               label.item-next.btn.btn-action.btn-lg(for="slide-4")
                 i.icon.icon-arrow-right
-              img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper")
+              img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
             figure.carousel-item
               label.item-prev.btn.btn-action.btn-lg(for="slide-3")
                 i.icon.icon-arrow-left
               label.item-next.btn.btn-action.btn-lg(for="slide-1")
                 i.icon.icon-arrow-right
-              img.img-responsive.rounded(src="../img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper")
+              img.img-responsive.rounded(src="../img/osx-el-capitan-2.jpg" alt="macOS El Capitan Wallpaper")
           .carousel-nav
             label.nav-item.text-hide.c-hand(for="slide-1") 1
             label.nav-item.text-hide.c-hand(for="slide-2") 2
@@ -65,19 +65,23 @@ block docs-content
               <!-- carousel item -->
               <figure class="carousel-item">
                 <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
-                <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+                <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
               </figure>
               <figure class="carousel-item">
                 <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
-                <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+                <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
               </figure>
               <figure class="carousel-item">
                 <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
-                <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
+                <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper">
               </figure>
               <figure class="carousel-item">
                 <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
-                <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
+                <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS El Capitan Wallpaper">
               </figure>
             </div>
             <!-- carousel navigation -->
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index 582a98b..b07efd0 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -34,6 +34,15 @@ block docs-content
             | Responsive layout grid system and responsive visibility utilities
           .card-footer
             a.btn.btn-primary(href="layout/responsive.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Hero
+          .card-body
+            | Container for key featured content or information
+          .card-footer
+            a.btn.btn-primary(href="layout/hero.html") View
         
       .column.col-6.col-xs-12
         .card
diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug
index f9725a4..4c35009 100644
--- a/docs/src/layout/grid.pug
+++ b/docs/src/layout/grid.pug
@@ -68,6 +68,9 @@ block docs-content
       | Add the #[code columns] class to a container with the #[code container] class. 
       | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally.
       | You can specific the width of each column by adding class #[code col-<1-12>].
+    
+    +docs-subheading('grid-gapless', 'Gapless grid')
+
     p
       | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
 
diff --git a/docs/src/layout/hero.pug b/docs/src/layout/hero.pug
new file mode 100644
index 0000000..36d765d
--- /dev/null
+++ b/docs/src/layout/hero.pug
@@ -0,0 +1,45 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'hero'
+  - var parent = 'layout'
+  - var title = 'Hero - Layout - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('hero', 'Hero')
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Hero container shows key featured content or information.
+
+    .docs-demo.columns
+      .column
+        .hero.bg-gray
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- hero example -->
+
+    .docs-demo.columns
+      .column
+        .hero.hero-sm.bg-dark
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+            
+    .docs-demo.columns
+      .column
+        .hero.hero-lg.bg-primary
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug
index 6516b26..1d0109a 100644
--- a/docs/src/layout/responsive.pug
+++ b/docs/src/layout/responsive.pug
@@ -15,22 +15,22 @@ block docs-content
     .docs-demo.columns
       .column.col-10.col-lg-8.col-md-6.col-sm-4
         .bg-gray.docs-block
-          | col-10 
-          br
-          |  col-lg-8 
-          br
-          |  col-md-6 
-          br
-          |  col-sm-4
+          .text-primary col-10
+          .text-dark.hide-lg col-lg-8
+          .text-primary.show-lg col-lg-8
+          .text-dark.hide-md col-md-6
+          .text-primary.show-md col-md-6
+          .text-dark.hide-sm col-sm-4
+          .text-primary.show-sm col-sm-4
       .column.col-2.col-lg-4.col-md-6.col-sm-8
         .bg-gray.docs-block
-          | col-2 
-          br
-          |  col-lg-4 
-          br
-          |  col-md-6 
-          br
-          |  col-sm-8
+          .text-primary col-2
+          .text-dark.hide-lg col-lg-4
+          .text-primary.show-lg col-lg-4
+          .text-dark.hide-md col-md-6
+          .text-primary.show-md col-md-6
+          .text-dark.hide-sm col-sm-8
+          .text-primary.show-sm col-sm-8
 
     p
       | There are #[code col-xs-<1-12>], #[code col-sm-<1-12>], #[code col-md-<1-12>], #[code col-lg-<1-12>] and #[code col-xl-<1-12>] available for flexible grid across mobile, tablet and desktop viewport usage.
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index d5a33e5..9386865 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -24,6 +24,10 @@
   }
 }
 
+.docs-container {
+  min-height: 100vh;
+}
+
 .docs-navbar {
   height: 3.8rem;
   position: fixed;
@@ -35,7 +39,11 @@
     position: absolute;
     right: 1.5rem;
     top: 1rem;
-    width: 8rem;
+    width: 14rem;
+  }
+
+  .algolia-autocomplete {
+    flex: 1 1 auto;
   }
 }
 
@@ -120,7 +128,7 @@
       z-index: $zindex-1 - 1;
 
       &::before {
-        background: $light-color;      
+        background: $light-color;
         bottom: 0;
         content: "";
         display: block;
@@ -282,6 +290,7 @@
 
 .docs-brand {
   color: $primary-color;
+  height: 2rem;
   left: 1.5rem;
   position: fixed;
   top: .85rem;
@@ -319,7 +328,7 @@
 
 .docs-footer {
   color: $gray-color;
-  padding: .5rem .5rem 1.5rem .5rem;
+  padding: .5rem .5rem 1.5rem;
 
   a {
     color: $gray-color-dark;
@@ -398,7 +407,7 @@
 
 .section-footer {
   color: $gray-color;
-  padding: 1.8rem .75rem 1rem .75rem;
+  padding: 1.8rem .75rem 1rem;
   position: relative;
   z-index: 200;
 
@@ -577,4 +586,496 @@
       width: 7.3rem;
     }
   }
+}
+
+// Docs search
+.searchbox {
+  display: inline-block;
+  position: relative;
+  width: 200px;
+  height: 32px!important;
+  white-space: nowrap;
+  box-sizing: border-box;
+  visibility: visible!important;
+
+  .algolia-autocomplete {
+    display:block;
+    width:100%;
+    height:100%;
+  }
+}
+
+.searchbox__wrapper {
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  position: relative;
+}
+.searchbox__input {
+  display: inline-block;
+  box-sizing: border-box;
+  transition: box-shadow .4s ease, background .4s ease;
+  border: 0;
+  border-radius: 16px;
+  box-shadow: inset 0 0 0 1px #ccc;
+  background: #fff !important;
+  padding: 0 26px 0 32px;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  white-space: normal;
+  font-size: 12px;
+  appearance: none;
+
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px #b3b3b3;
+  }
+
+  &:active,
+  &:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 1px #aaa;
+    background: #fff;
+  }
+
+  &::placeholder {
+    color: #aaa;
+  }
+}
+
+.searchbox__submit {
+  position: absolute;
+  top: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 16px 0 0 16px;
+  background-color: rgba(69,142,225,0);
+  padding: 0;
+  width: 32px;
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
+  font-size: inherit;
+  user-select: none;
+  right: inherit;
+  left: 0;
+
+  &:before {
+    display: inline-block;
+    margin-right: -4px;
+    height: 100%;
+    vertical-align: middle;
+    content: "";
+  }
+
+  &:active,
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+    fill: #6d7e96;
+  }
+}
+
+.searchbox__reset {
+  display: block;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  margin: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  user-select: none;
+  fill: rgba(0,0,0,.5);
+
+  &.hide {
+    display: none;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  svg {
+    display: block;
+    margin: 4px;
+    width: 8px;
+    height: 8px;
+  }
+}
+
+
+.searchbox__input:valid ~ .searchbox__reset {
+  display: block;
+  animation-name: sbx-reset-in;
+  animation-duration: .15s;
+}
+
+@keyframes sbx-reset-in {
+  0%{
+      transform: translate3d(-20%, 0, 0);
+      opacity: 0;
+  }
+  to{
+      transform: none;
+      opacity: 1;
+  }
+}
+
+.algolia-autocomplete {
+  &.algolia-autocomplete-right .ds-dropdown-menu {
+    right: 0 !important;
+    left: inherit !important;
+    &:before {
+      right: 48px;
+    }
+  }
+
+  &.algolia-autocomplete-left .ds-dropdown-menu {
+    left: 0 !important;
+    right: inherit !important;
+    &:before {
+      left: 48px;
+    }
+  }
+
+  .ds-dropdown-menu {
+    top: -6px;
+    border-radius: 4px;
+    margin: 6px 0 0;
+    padding: 0;
+    text-align: left;
+    height: auto;
+    position: relative;
+    background: transparent;
+    border: none;
+    z-index: 999;
+    max-width: 600px;
+    min-width: 500px;
+    @include shadow-variant(.05rem);
+
+    .ds-suggestions {
+      position: relative;
+      z-index: 1000;
+      margin-top: 8px;
+      a:hover {
+        text-decoration: none;
+      }
+    }
+
+    .ds-suggestion {
+      cursor: pointer;
+      &.ds-cursor .algolia-docsearch-suggestion {
+        &.suggestion-layout-simple, &:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
+          background-color: rgba($primary-color, .05);
+        }
+      }
+    }
+
+    [class^=ds-dataset-] {
+      position: relative;
+      background: #fff;
+      border-radius: 4px;
+      overflow: auto;
+      padding: 0 8px 8px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    display: block;
+    position: relative;
+    padding: 0 8px;
+    background: #fff;
+    color: $dark-color;
+    overflow: hidden;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: $primary-color;
+    background: rgba($primary-color, .1);
+    padding: 0.1em 0.05em;
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight {
+      padding: 0 0 1px;
+      background: inherit;
+      box-shadow: inset 0 -2px 0 0 rgba($primary-color, .8);
+      color: inherit;
+    }
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    padding: 0 0 1px;
+    background: inherit;
+    box-shadow: inset 0 -2px 0 0 rgba($primary-color, .8);
+    color: inherit;
+  }
+
+  .algolia-docsearch-suggestion--content {
+    display: block;
+    float: right;
+    width: 70%;
+    position: relative;
+    padding: 5.33333px 0 5.33333px 10.66667px;
+    cursor: pointer;
+    &:before {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      background: $gray-color-light;
+      left: -1px;
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    position: relative;
+    border-bottom: 1px solid $gray-color-light;
+    display: none;
+    margin-top: 8px;
+    padding: 4px 0;
+    font-size: 1em;
+    color: $dark-color;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    width: 100%;
+    float: left;
+    padding: 8px 0 0;
+  }
+
+  .algolia-docsearch-suggestion--subcategory-column {
+    float: left;
+    width: 30%;
+    text-align: right;
+    position: relative;
+    padding: 5.33333px 10.66667px;
+    color: $gray-color;
+    font-size: .9em;
+    word-wrap: break-word;
+    &:before {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      background: $gray-color-light;
+      right: 0;
+    }
+  }
+
+  .algolia-docsearch-suggestion--subcategory-inline {
+    display: none;
+  }
+
+  .algolia-docsearch-suggestion--title {
+    color: $dark-color;
+    font-size: .9em;
+    font-weight: 700;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    display: block;
+    line-height: 1.2em;
+    font-size: .85em;
+    color: $gray-color-dark;
+  }
+
+  .algolia-docsearch-suggestion--no-results {
+    width: 100%;
+    padding: 8px 0;
+    text-align: center;
+    font-size: 1.2em;
+    &:before {
+      display: none;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    code {
+      padding: 1px 5px;
+      font-size: 90%;
+      border: none;
+      color: #222;
+      background-color: #ebebeb;
+      border-radius: 3px;
+      font-family: Menlo, Monaco, Consolas, Courier New, monospace;
+      .algolia-docsearch-suggestion--highlight {
+        background: none;
+      }
+    }
+
+    &.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header, &.algolia-docsearch-suggestion__secondary {
+      display: block;
+    }
+  }
+
+  .suggestion-layout-simple {
+    &.algolia-docsearch-suggestion {
+      border-bottom: 1px solid #eee;
+      padding: 8px;
+      margin: 0;
+    }
+
+    .algolia-docsearch-suggestion--content {
+      width: 100%;
+      padding: 0;
+      &:before {
+        display: none;
+      }
+    }
+
+    .algolia-docsearch-suggestion--category-header {
+      margin: 0;
+      padding: 0;
+      display: block;
+      width: 100%;
+      border: none;
+    }
+
+    .algolia-docsearch-suggestion--category-header-lvl0 {
+      opacity: .6;
+      font-size: 0.85em;
+    }
+
+    .algolia-docsearch-suggestion--category-header-lvl1 {
+      opacity: .6;
+      font-size: 0.85em;
+      &:before {
+        background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>');
+        content: "";
+        width: 10px;
+        height: 10px;
+        display: inline-block;
+      }
+    }
+
+    .algolia-docsearch-suggestion--wrapper {
+      width: 100%;
+      float: left;
+      margin: 0;
+      padding: 0;
+    }
+
+    .algolia-docsearch-suggestion--duplicate-content, .algolia-docsearch-suggestion--subcategory-inline {
+      display: none !important;
+    }
+
+    .algolia-docsearch-suggestion--title {
+      margin: 0;
+      color: #458ee1;
+      font-size: .9em;
+      font-weight: 400;
+      &:before {
+        content: "#";
+        font-weight: 700;
+        color: #458ee1;
+        display: inline-block;
+      }
+    }
+
+    .algolia-docsearch-suggestion--text {
+      margin: 4px 0 0;
+      display: block;
+      line-height: 1.4em;
+      padding: 5.33333px 8px;
+      background: #f8f8f8;
+      font-size: .85em;
+      opacity: 0.8;
+
+      .algolia-docsearch-suggestion--highlight {
+        color: #3f4145;
+        font-weight: 700;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .algolia-docsearch-footer {
+    width: 134px;
+    height: 20px;
+    z-index: 2000;
+    margin-top: 10.66667px;
+    float: right;
+    font-size: 0;
+    line-height: 0;
+  }
+
+  .algolia-docsearch-footer--logo {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100%;
+    overflow: hidden;
+    text-indent: -9000px;
+    padding: 0 !important;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+    display: block;
+  }
+}
+
+@media (max-width: 768px) {
+  .algolia-autocomplete .algolia-docsearch-suggestion {
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: inline-block;
+      width: auto;
+      float: left;
+      padding: 0;
+      color: #02060c;
+      font-size: .9em;
+      font-weight: 700;
+      text-align: left;
+      opacity: 0.5;
+      &:before {
+        display: none;
+      }
+      &:after {
+        content: "|";
+      }
+    }
+
+    .algolia-docsearch-suggestion--content {
+      display: inline-block;
+      width: auto;
+      text-align: left;
+      float: left;
+      padding: 0;
+      &:before {
+        display: none;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/docs/src/scss/spectre-rtl.scss b/docs/src/scss/spectre-rtl.scss
index 51bc122..cda0b96 100644
--- a/docs/src/scss/spectre-rtl.scss
+++ b/docs/src/scss/spectre-rtl.scss
@@ -3,5 +3,4 @@ $rtl: true;
 
 // Import Spectre
 @import "../../../src/spectre";
-@import "../../../src/spectre-icons";
 @import "../../../src/spectre-exp";