j1-template 2020.0.15 → 2020.0.20

data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc

@@ -19,7 +19,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.webp
+        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
           alt:                          bootstrap
 ---
 
@@ -68,7 +68,6 @@ notifications. To highlight important information to your vistors. Modals
 are positioned over everything else in the document so that the notification
 gets the users attention.
 
-
 == BS advanced Modals
 
 To improve your visitors experience on important information that shouldn't
@@ -80,34 +79,10 @@ critical messages.
 NOTE: For more information on how to use Bootstrap’s JavaScript modal
 plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {window}].
 
-
 // Include sub-documents
 // -----------------------------------------------------------------------------
 include::{documentsdir}/410_table_3_column.asciidoc[]
 
-//////////
-include::{documentsdir}/410_top_info.asciidoc[]
-include::{documentsdir}/410_top_right_success.asciidoc[]
-include::{documentsdir}/410_top_left_info.asciidoc[]
-include::{documentsdir}/410_bottom_info.asciidoc[]
-include::{documentsdir}/410_bottom_right_danger.asciidoc[]
-include::{documentsdir}/410_bottom_left_warning.asciidoc[]
-include::{documentsdir}/410_full_height_right_success.asciidoc[]
-include::{documentsdir}/410_full_height_left_info.asciidoc[]
-//////////
-
-//////////
-include::{documentsdir}/410_position_and_sizes.asciidoc[]
-include::{documentsdir}/410_contact_form.asciidoc[]
-include::{documentsdir}/410_form_login_with_avatar.asciidoc[]
-include::{documentsdir}/410_omni_login.asciidoc[]
-include::{documentsdir}/410_central_large_info.asciidoc[]
-include::{documentsdir}/410_central_fluid_success.asciidoc[]
-include::{documentsdir}/410_full_height_top_warning.asciidoc[]
-include::{documentsdir}/410_full_height_bottom_danger.asciidoc[]
-include::{documentsdir}/410_full_height_right_success.asciidoc[]
-//////////
-
 == Whats next
 
 Bootstrap is really a great CSS framework that offers in the current V4
@@ -123,5 +98,4 @@ what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 
 // Include the modals HTML portion
 // -------------------------------------------------------------------
-
-include::{documentsdir}/419_advanced_modals_html.asciidoc[]
+include::{documentsdir}/419_advanced_modals_demo.asciidoc[]

data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.7
       slides:
-        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.webp
+        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
           alt:                          Photo by Markus Spiske on Unsplash
           badge:
             type:                       unsplash
@@ -70,7 +70,7 @@ simplicity and portability to be viewed best on all devices and browsers.
 == Table types
 
 But, for sure, the solution provided is a compromise. To fit the common needs
-for tables viewed on desktop *and* mobile devices, three types of responsive
+for tables viewed on desktop and mobile devices, three types of responsive
 tables are implemented:
 
 .Types of responsive tables
@@ -81,45 +81,45 @@ tables are implemented:
 |Bootstrap
 |`table-responsive`
 |The adding the class `table-responsive`, it creates a responsive table based
-on BS CSS styles. The table will then *scroll horizontally* on small devices.
-Making *any* table responsive across all viewports, the additonal class
+on BS CSS styles. The table will then scroll horizontally on small devices.
+Making any table responsive across all viewports, the additonal class
 `table-responsive` is to applied. For specific (Bootstrap) breakpoints, the
 classes `table-responsive-lg{-sm\|-md\|-lg\|-xl}` are available to have better
 control on what viewport sizes tables are being transformed.
 
 |R Tables
 |`r-text-xxx`
-|R tables are used by J1 Template for *default*. Those tables are using the
+|R tables are used by J1 Template for default. Those tables are using the
 responsive text feature (presented in section link:{roundtrip-typography}[Typography])
-with *no* additonal CSS classes to be applied. For smaller viewports, the text
+with no additonal CSS classes to be applied. For smaller viewports, the text
 scales down and should fit the cells automatically. The default text size for
 J1 is `r-text-300`.
 
 |F Tables
 |`no-r-text`
-|If the responsive text feature from J1 is *not* wanted, the CSS class
-`no-r-text` is to be applied. F (fixed) tables are *not responsive* per
+|If the responsive text feature from J1 is not wanted, the CSS class
+`no-r-text` is to be applied. F (fixed) tables are not responsive per
 default, but in combination with the CSS class `table-responsive-stacked-lg` (Bootstrap),
 this type behaves like classic Bootstrap responsive table (see above).
 
 |S Tables
 |`table-responsive-stacked-lg-stacked`
-|The style `table-responsive-stacked-lg-stacked` *rebuilds* a table. The header is set
-to *invisible* and all *columns* gets vertically *stacked* as *rows*. For
+|The style `table-responsive-stacked-lg-stacked` rebuilds a table. The header is set
+to invisible and all columns gets vertically stacked as rows. For
 specific (Bootstrap) breakpoints, the classes `table-responsive-stacked-lg-stacked{-sm\|-md\|-lg\|-xl}`
 are available to have better control on what viewport sizes tables are
 being transformed. The class `table-responsive-stacked-lg-stacked` is using the breakpoint
-at *768px* what is the same as `table-responsive-stacked-lg-stacked-md`
+at 768px what is the same as `table-responsive-stacked-lg-stacked-md`
 
 |===============================================================================
 
 [TIP]
 ====
-The styles for responsive tables takes effect for *default* if the viewport
+The styles for responsive tables takes effect for default if the viewport
 (window size) is smaller than 768px for the width (x-axis). Typical for small
 devices like tablets or mobiles.
 
-The styles for F *and* S Tables can be combined with the *Bootstrap* responsive
+The styles for F and S Tables can be combined with the Bootstrap responsive
 table approach (`table-responsive-stacked-lg`).
 ====
 
@@ -136,7 +136,7 @@ templating your content pages.
 
 === Bootstrap
 
-Responsive Bootstrap tables support tables to be *scrolled horizontally*
+Responsive Bootstrap tables support tables to be scrolled horizontally
 on smaller viewports. From a specified breakpoint and up, the table will
 behave normally and do not scroll horizontally.
 
@@ -207,7 +207,7 @@ Post's front matter by specifying a new date/time in the format
 
 == Multi-column Table
 
-Responsive Bootstrap tables support tables to be *scrolled horizontally*
+Responsive Bootstrap tables support tables to be scrolled horizontally
 on smaller viewports. Making any table responsive across all viewports, the
 additonal class `table-responsive-stacked-lg` is used. For specific (Bootstrap)
 breakpoints, the classes `table-responsive-stacked-lg{-sm|-md|-lg|-xl}` are available
@@ -227,9 +227,9 @@ In particular, this can clip off dropdown menus and other third-party widgets.
 |`color`
 |Hash
 |`md_white`
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
 
 |`background_color_1`
@@ -253,9 +253,9 @@ the form `#RRGGBB`
 |`color`
 |Hash
 |`md_white`
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
 
 |`background_color_1`

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.webp
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
           alt:                          Photo by Clem Onojeghuo on Unsplash
           badge:
             type:                       unsplash
@@ -65,14 +65,14 @@ include::{includedir}/attributes.asciidoc[tag=data]
 <!-- site.source.size:     {{site.source.size | debug}} -->
 ++++
 
-The themes feature for J1 Template is in a *alpha status* of the template
-system. Anyway, it makes sense to present what is possible using *different*
+The themes feature for J1 Template is in a alpha status of the template
+system. Anyway, it makes sense to present what is possible using different
 versions of Bootstrap's CSS styles for a website.
 
 == Themes
 
 It is expected that many people will change the template for their needs. To
-really create *unique* websites. Fundamental to do this is are CSS styles
+really create unique websites. Fundamental to do this is are CSS styles
 defined by Bootstrap.
 
 Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {window}] is not
@@ -99,20 +99,20 @@ Thanks again the people at Bootswatch for this great work.
 
 == Apply a theme
 
-The base for designing pages using J1 Template is the theme *Uno*, a modern
+The base for designing pages using J1 Template is the theme Uno, a modern
 light theme that can be used for many types of websites. And what we mentioned
-already, web design is not: one size fits all. The theme *Uno* can be seen as
+already, web design is not: one size fits all. The theme Uno can be seen as
 good base, a starting point. Combining Uno and a different theme may a fast
 solution for your site!?
 
 You can find all available themes, all stylesheets to be applied to your pages
-from the menu *Themes*. You're invited to check how a page is changing for
+from the menu Themes. You're invited to check how a page is changing for
 their design if other stylesheets, other ideas of web design is used.
 
 NOTE: Changing BS-based styles is one thing, changing from one theme to the
 next at runtime a bit more challanging. For the alpha version of J1 Template,
 many styles are automatically changed for J1 specific components as well, but
-*not* all of them for now.
+not all of them for now.
 
 Simply select a theme from this menu and a new BS-based stylesheet is
 automatically applied to your pages.
@@ -128,9 +128,9 @@ This was the last place to go for the roundtrip. More details of the most
 common elements of Bootstrap can be found on the previewer for a theme. Have
 a look at the link:{previewer-theme}[Theme previewer].
 
-To make things real for your new site, go for *Web in a day*. This tutorial
+To make things real for your new site, go for Web in a day. This tutorial
 guides you through all the steps how to build a website - your site using
-Jekyll  nd the template system J1. It's really a nice journey to *explore*
-and  *learn* creating a static web.
+Jekyll  nd the template system J1. It's really a nice journey to explore
+and  learn creating a static web.
 
 Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc

@@ -95,8 +95,8 @@ end::tags[]
 // -----------------------------------------------------------------------------
 tag::data[]
 
-:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.webp, Forest with mountains behind"
-:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.webp, Forest with mountains behind"
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
 
 end::data[]
 

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_left_warning.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_right_danger.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_central_success.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_left_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_right_success.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_left_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_right_success.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/whats_up.adoc

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.webp
+        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
           alt:                          Photo by Alexander Redl on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/legal/de/300_privacy.adoc

@@ -82,7 +82,7 @@ all cookies left.
 
 ++++
 <div class="ml-0 mb-0">
-  <button type="button" name="revokeCookieConsent" class="btn btn-primary btn-raised btn-flex mb-3">
+  <button type="button" name="revokeCookieConsent" class="btn btn-secondary btn-raised btn-flex mb-3">
     <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Revoke Cookie Consent
   </button>

data/lib/starter_web/pages/public/legal/en/000_copyright.adoc

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5 
       slides:
-        - url:                          /assets/images/modules/attics/giammarco-boscaro-1920x1280.webp
+        - url:                          /assets/images/modules/attics/giammarco-boscaro-1920x1280.jpg
           alt:                          Photo by Giammarco Boscaro
           alignY:                       0.5
           badge:

data/lib/starter_web/pages/public/legal/en/100_impress.adoc

@@ -18,7 +18,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5 
       slides:
-        - url:                          /assets/images/modules/attics/aditya-joshi-1920x1280.webp
+        - url:                          /assets/images/modules/attics/aditya-joshi-1920x1280.jpg
           alt:                          Photo by Aditya Joshi
           alignY:                       0.5
           badge:

data/lib/starter_web/pages/public/legal/en/300_privacy.adoc

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5 
       slides:
-        - url:                          /assets/images/modules/attics/lianhao-1920x1280.webp
+        - url:                          /assets/images/modules/attics/lianhao-1920x1280.jpg
           alt:                          Photo by Lianhao Qu
           alignY:                       top
           badge:
@@ -113,7 +113,7 @@ all cookies left.
 
 ++++
 <div class="ml-0 mb-0">
-  <button type="button" name="revokeCookieConsent" class="btn btn-primary btn-raised btn-flex mb-3">
+  <button type="button" name="revokeCookieConsent" class="btn btn-secondary btn-raised btn-flex mb-3">
     <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Revoke Cookie Consent
   </button>
@@ -189,7 +189,7 @@ deleted.
 
 ++++
 <div class="ml-0 mb-0">
-  <button type="button" name="deleteCookies" class="btn btn-primary btn-raised btn-flex mb-3">
+  <button type="button" name="deleteCookies" class="btn btn-secondary btn-raised btn-flex mb-3">
     <i class="mdi mdi-cookie mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Delete Cookies
   </button>

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -26,7 +26,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.webp
+        - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.jpg
           alt:                          the-place-1920x1280-bw
 ---
 

data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc

@@ -27,7 +27,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.webp
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
           alt:                          Photo by Clem Onojeghuo on Unsplash
           badge:
             type:                       unsplash
@@ -98,15 +98,13 @@ include::{includedir}/attributes.asciidoc[tag=urls]
   </div>
 ++++
 
-lorem:sentences[5]
-
 == Navbars
 
 See examples for Bootstrap’s powerful, responsive navigation header, the
 navbar. Includes support for branding, navigation, and more, including
 support for the collapse plugin.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
 
 Theming the navbar has never been easier thanks to the combination of
@@ -115,8 +113,8 @@ for use with light background colors, or '.navbar-dark' for dark background
 colors. Then, customize with `.bg-*` utilities.
 
 ++++
-<div class="doc-example">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<div class="doc-example mb-3">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
     <a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -144,7 +142,7 @@ colors. Then, customize with `.bg-*` utilities.
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -225,7 +223,7 @@ more with support for multiple sizes, states, and more. Bootstrap includes
 several predefined button styles, each serving its own semantic purpose,
 with a few extras thrown in for more control.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
 
 === Active buttons
@@ -235,7 +233,7 @@ inset shadow) when active.
 ++++
 <div class="doc-example mb-3">
   <button type="button" class="btn btn-primary btn-raised">Primary</button>
-  <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
+  <button type="button" class="btn btn-primary btn-raised">Secondary</button>
   <button type="button" class="btn btn-success btn-raised">Success</button>
   <button type="button" class="btn btn-info btn-raised">Info</button>
   <button type="button" class="btn btn-warning btn-raised">Warning</button>
@@ -244,6 +242,18 @@ inset shadow) when active.
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised">Primary</button>
+<button type="button" class="btn btn-primary btn-raised">Secondary</button>
+<button type="button" class="btn btn-success btn-raised">Success</button>
+<button type="button" class="btn btn-info btn-raised">Info</button>
+<button type="button" class="btn btn-warning btn-raised">Warning</button>
+<button type="button" class="btn btn-danger btn-raised">Danger</button>
+<button type="button" class="btn btn-link btn-raised">Link</button>
+----
+
+
 === Disabled buttons
 
 Buttons look inactive by adding the disabled boolean attribute to any
@@ -251,7 +261,7 @@ Buttons look inactive by adding the disabled boolean attribute to any
 ++++
 <div class="doc-example mb-3">
   <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
-  <button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
+  <button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
   <button type="button" class="btn btn-success btn-raised disabled">Success</button>
   <button type="button" class="btn btn-info btn-raised disabled">Info</button>
   <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
@@ -260,6 +270,17 @@ Buttons look inactive by adding the disabled boolean attribute to any
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
+<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
+<button type="button" class="btn btn-success btn-raised disabled">Success</button>
+<button type="button" class="btn btn-info btn-raised disabled">Info</button>
+<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
+<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
+<button type="button" class="btn btn-link btn-raised disabled">Link</button>
+----
+
 === Outline buttons
 
 In need of a button, but not the hefty background colors they bring? Replace
@@ -277,6 +298,16 @@ background images and colors on any button.
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
+<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
+<button type="button" class="btn btn-outline-success btn-raised">Success</button>
+<button type="button" class="btn btn-outline-info btn-raised">Info</button>
+<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
+<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
+----
+
 === Button sizes
 
 Beside the default size, small and large buttons are available.
@@ -289,6 +320,12 @@ Beside the default size, small and large buttons are available.
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
+<button type="button" class="btn btn-primary btn-raised">Default button</button>
+<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
+----
 === Block level button
 
 Create block level buttons—those that span the full width of a parent—by
@@ -301,17 +338,37 @@ adding .btn-block.
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<button type="button"
+        class="btn btn-primary btn-lg btn-block btn-raised">
+  Block level button
+</button>
+<button type="button"
+        class="btn btn-secondary btn-lg btn-block btn-raised">
+  Block level button
+</button>
+----
+
 === Toggle button
 
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
     Single toggle
   </button>
 </div>
 ++++
 
-=== Checkbox and radio buttons
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised"
+  data-toggle="button" aria-pressed="false" autocomplete="off">
+    Single toggle
+</button>
+----
+
+=== Checkboxes and Radio buttons
 
 Bootstrap’s .button styles can be applied to other elements, such as
 `<label>`, to provide checkbox or radio style button toggling. The checked
@@ -319,36 +376,34 @@ state for these buttons is only updated via click event on the button.
 
 ++++
 <div class="doc-example mb-3">
-  <div class="btn-group" data-toggle="buttons">
-    <label class="btn btn-primary btn-raised btn-flex active">
-      <input type="checkbox" checked> Checkbox 1
-    </label>
-    <label class="btn btn-primary btn-raised btn-flex">
-      <input type="checkbox"> Checkbox 2
-    </label>
-    <label class="btn btn-primary btn-flex btn-raised">
-      <input type="checkbox"> Checkbox 3
-    </label>
-  </div>
-</div>
-++++
-
-++++
-<div class="doc-example mb-5">
   <div class="btn-group btn-group-toggle" data-toggle="buttons">
-    <label class="btn btn-secondary btn-raised btn-flex active">
+    <label class="btn btn-primary btn-raised btn-flex active">
       <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
     </label>
-    <label class="btn btn-secondary btn-raised btn-flex">
+    <label class="btn btn-primary btn-raised btn-flex">
       <input type="radio" name="options" id="option2" autocomplete="off"> Radio
     </label>
-    <label class="btn btn-secondary btn-raised btn-flex">
+    <label class="btn btn-primary btn-raised btn-flex">
       <input type="radio" name="options" id="option3" autocomplete="off"> Radio
     </label>
   </div>
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<div class="btn-group btn-group-toggle" data-toggle="buttons">
+  <label class="btn btn-primary btn-raised btn-flex active">
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+  </label>
+  <label class="btn btn-primary btn-raised btn-flex">
+    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+  </label>
+  <label class="btn btn-primary btn-raised btn-flex">
+    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+  </label>
+</div>
+----
 
 == Typography
 
@@ -359,7 +414,7 @@ For a more inclusive and accessible type scale, it is assuemed that
 the browser default root font-size (typically 16px) so visitors can
 customize their browser defaults as needed.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
 
 === Headings
@@ -367,41 +422,35 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
 ++++
 <div class="doc-example mb-3">
   <div class="row mb-5">
-    <div class="col-md-4">
-      <div class="bs-component">
-        <h1 class="notoc">Heading 1</h1>
-        <h2 class="notoc">Heading 2</h2>
-        <h3 class="notoc">Heading 3</h3>
-        <h4 class="notoc">Heading 4</h4>
-        <h5 class="notoc">Heading 5</h5>
-        <h6 class="notoc">Heading 6</h6>
-        <h3 class="notoc">
-          Heading 3
-          <small class="text-muted">with muted text</small>
-        </h3>
-        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-      </div>
+  <div class="col-md-4">
+      <h1 class="notoc">Heading 1</h1>
+      <h2 class="notoc">Heading 2</h2>
+      <h3 class="notoc">Heading 3</h3>
+      <h4 class="notoc">Heading 4</h4>
+      <h5 class="notoc">Heading 5</h5>
+      <h6 class="notoc">Heading 6</h6>
+      <h3 class="notoc">
+        Heading 3
+        <small class="text-muted">with muted text</small>
+      </h3>
+      <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     </div>
     <div class="col-md-4">
-      <div class="bs-component">
-        <h3 class="notoc">Example body text</h2>
-        <p>Nullam quis risus eget <a href="javascript:(void)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
-        <p><small>This line of text is meant to be treated as fine print.</small></p>
-        <p>The following is <strong>rendered as bold text</strong>.</p>
-        <p>The following is <em>rendered as italicized text</em>.</p>
-        <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
-      </div>
+      <h3 class="notoc">Example body text</h2>
+      <p>Nullam quis risus eget <a href="javascript:(void)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+      <p><small>This line of text is meant to be treated as fine print.</small></p>
+      <p>The following is <strong>rendered as bold text</strong>.</p>
+      <p>The following is <em>rendered as italicized text</em>.</p>
+      <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
     </div>
     <div class="col-md-4">
-      <div class="bs-component">
-        <h3 class="notoc">Emphasis classes</h2>
-        <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-        <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-        <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-        <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
-        <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-        <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-      </div>
+      <h3 class="notoc">Emphasis classes</h2>
+      <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+      <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+      <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+      <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
     </div>
   </div>
 </div>
@@ -413,20 +462,16 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
 <div class="doc-example mb-3">
   <div class="row">
     <div class="col-md-6">
-      <div class="bs-component">
-        <blockquote class="blockquote">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-        </blockquote>
-      </div>
+      <blockquote class="blockquote">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+      </blockquote>
     </div>
     <div class="col-md-6">
-      <div class="bs-component">
-        <blockquote class="blockquote blockquote-reverse">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-        </blockquote>
-      </div>
+      <blockquote class="blockquote blockquote-reverse">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+      </blockquote>
     </div>
   </div>
 </div>
@@ -443,68 +488,66 @@ Using the most basic table markup, here’s how .table-based tables look in
 Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
 tables will be styled in the same manner as the parent.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
 
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <table class="table table-striped table-hover table-bordered">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Column heading</th>
-          <th>Column heading</th>
-          <th>Column heading</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-        <tr class="table-info">
-          <td>3</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-        <tr class="table-success">
-          <td>4</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-        <tr class="table-danger">
-          <td>5</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-        <tr class="table-warning">
-          <td>6</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-        <tr class="table-active">
-          <td>7</td>
-          <td>Column content</td>
-          <td>Column content</td>
-          <td>Column content</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <table class="table table-striped table-hover table-bordered">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Column heading</th>
+        <th>Column heading</th>
+        <th>Column heading</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-info">
+        <td>3</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-success">
+        <td>4</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-danger">
+        <td>5</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-warning">
+        <td>6</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-active">
+        <td>7</td>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 ++++
 
@@ -521,7 +564,7 @@ of newer input controls like email verification, number selection, and more.
 Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
 for documentation on required classes, form layout, and more.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -555,11 +598,11 @@ state, sizing, and more.
 <div class="doc-example mb-3">
   <form>
     <div class="form-group">
-        <label for="exampleInputEmail1">Email address</label>
-      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+        <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
+      <input type="email" class="form-control" id="exampleFormControlInput1">
     </div>
     <div class="form-group">
-      <label for="exampleFormControlSelect1">Example select</label>
+      <label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
       <select class="form-control" id="exampleFormControlSelect1">
         <option>1</option>
         <option>2</option>
@@ -569,7 +612,7 @@ state, sizing, and more.
       </select>
     </div>
     <div class="form-group">
-      <label for="exampleFormControlSelect2">Example multiple select</label>
+      <label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
       <select multiple class="form-control" id="exampleFormControlSelect2">
         <option>option 1</option>
         <option>option 2</option>
@@ -577,7 +620,7 @@ state, sizing, and more.
       </select>
     </div>
     <div class="form-group">
-      <label for="exampleFormControlTextarea1">Example textarea</label>
+      <label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
       <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
     </div>
   </form>
@@ -590,7 +633,7 @@ For file inputs, swap the .form-control for .form-control-file.
 <div class="doc-example mb-3">
   <form>
     <div class="form-group">
-      <label for="exampleFormControlFile1">Example file input</label>
+      <label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
       <input type="file" class="form-control-file" id="exampleFormControlFile1">
     </div>
   </form>
@@ -608,7 +651,7 @@ for building all types of navigation components. It includes some style
 overrides (for working with lists), some link padding for larger hit areas,
 and basic disabled styling.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_navs}[Bootstrap Docs, window="_blank"].
 
 === Tabs
@@ -619,46 +662,44 @@ JavaScript plugin.
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <ul class="nav nav-tabs">
-      <li class="nav-item">
-        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-toggle="dropdown"
-          href="javascript:(void)"
-          role="button"
-          aria-haspopup="true" aria-expanded="false">
-          Dropdown
-        </a>
-        <div class="dropdown-menu">
-          <a class="dropdown-item" href="javascript:(void)">Action</a>
-          <a class="dropdown-item" href="javascript:(void)">Another action</a>
-          <a class="dropdown-item" href="javascript:(void)">Something else here</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="javascript:(void)">Separated link</a>
-        </div>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
-      </li>
-    </ul>
-    <div id="myTabContent" class="tab-content">
-      <div class="tab-pane fade active in" id="home">
-        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
-      </div>
-      <div class="tab-pane fade" id="profile">
-        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
-      </div>
-      <div class="tab-pane fade" id="dropdown1">
-        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
-      </div>
-      <div class="tab-pane fade" id="dropdown2">
-        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" href="#home">Home</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-toggle="dropdown"
+        href="javascript:(void)"
+        role="button"
+        aria-haspopup="true" aria-expanded="false">
+        Dropdown
+      </a>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="javascript:(void)">Action</a>
+        <a class="dropdown-item" href="javascript:(void)">Another action</a>
+        <a class="dropdown-item" href="javascript:(void)">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="javascript:(void)">Separated link</a>
       </div>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+    </li>
+  </ul>
+  <div id="myTabContent" class="tab-content">
+    <div class="tab-pane fade active in" id="home">
+      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+    </div>
+    <div class="tab-pane fade" id="profile">
+      <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
+    </div>
+    <div class="tab-pane fade" id="dropdown1">
+      <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
+    </div>
+    <div class="tab-pane fade" id="dropdown2">
+      <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
     </div>
   </div>
 </div>
@@ -671,54 +712,56 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
 
 ++++
 <div class="doc-example mb-3">
-  <h5 class="notoc">Standard Pills</h5>
-  <div class="bs-component">
-    <ul class="nav nav-pills">
-      <li class="nav-item">
-        <a class="nav-link active" href="javascript:(void)">Active</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu">
-          <a class="dropdown-item" href="javascript:(void)">Action</a>
-          <a class="dropdown-item" href="javascript:(void)">Another action</a>
-          <a class="dropdown-item" href="javascript:(void)">Something else here</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="javascript:(void)">Separated link</a>
-        </div>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="javascript:(void)">Link</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
-      </li>
-    </ul>
-  </div>
-  <br>
-    <h5 class="notoc">Stacked Pills (vertical)</h5>
-  <div class="bs-component">
-    <ul class="nav nav-pills flex-column">
-      <li class="nav-item">
-        <a class="nav-link active" href="javascript:(void)">Active</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu">
-          <a class="dropdown-item" href="javascript:(void)">Action</a>
-          <a class="dropdown-item" href="javascript:(void)">Another action</a>
-          <a class="dropdown-item" href="javascript:(void)">Something else here</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="javascript:(void)">Separated link</a>
-        </div>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="javascript:(void)">Link</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
-      </li>
-    </ul>
+  <div class="row mb-5">
+
+    <div class="col-md-6">
+      <h5 class="notoc">Standard Pills</h5>
+      <ul class="nav nav-pills">
+        <li class="nav-item mr-1">
+          <a class="nav-link active" href="javascript:(void)">Active</a>
+        </li>
+        <li class="nav-item dropdown mr-1">
+          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu">
+            <a class="dropdown-item" href="javascript:(void)">Action</a>
+            <a class="dropdown-item" href="javascript:(void)">Another action</a>
+            <a class="dropdown-item" href="javascript:(void)">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+          </div>
+        </li>
+        <li class="nav-item mr-1">
+          <a class="nav-link" href="javascript:(void)">Link</a>
+        </li>
+        <li class="nav-item mr-1">
+          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+        </li>
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <h5 class="notoc">Stacked Pills (vertical)</h5>
+      <ul class="nav nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link active" href="javascript:(void)">Active</a>
+        </li>
+        <li class="nav-item dropdown mb-1">
+          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu">
+            <a class="dropdown-item" href="javascript:(void)">Action</a>
+            <a class="dropdown-item" href="javascript:(void)">Another action</a>
+            <a class="dropdown-item" href="javascript:(void)">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+          </div>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="javascript:(void)">Link</a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 ++++
@@ -732,20 +775,18 @@ Separators are automatically added in CSS through ::before and content.
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item active">Home</li>
-    </ol>
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
-      <li class="breadcrumb-item active">Library</li>
-    </ol>
-    <ol class="breadcrumb">
-      <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
-      <li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
-      <li class="breadcrumb-item active">Data</li>
-    </ol>
-  </div>
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item active">Home</li>
+  </ol>
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
+    <li class="breadcrumb-item active">Library</li>
+  </ol>
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
+    <li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
+    <li class="breadcrumb-item active">Data</li>
+  </ol>
 </div>
 ++++
 
@@ -851,45 +892,37 @@ button. For proper styling, use one of the eight required contextual classes
 (e.g., .alert-success). For inline dismissal, use the alerts
 https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
   <div class="row mb-3">
     <div class="col-md-12">
-      <div class="bs-component">
-        <div class="alert alert-dismissible alert-warning">
-          <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <h4 class="alert-heading notoc">Warning!</h4>
-          <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
-        </div>
+      <div class="alert alert-dismissible alert-warning">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <h4 class="alert-heading notoc">Warning!</h4>
+        <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
       </div>
     </div>
   </div>
   <div class="row mb-5">
     <div class="col-md-4">
-      <div class="bs-component">
-        <div class="alert alert-dismissible alert-danger">
-          <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
-        </div>
+      <div class="alert alert-dismissible alert-danger">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
       </div>
     </div>
     <div class="col-md-4">
-      <div class="bs-component">
-        <div class="alert alert-dismissible alert-success">
-          <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
-        </div>
+      <div class="alert alert-dismissible alert-success">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
       </div>
     </div>
     <div class="col-md-4">
-      <div class="bs-component">
-        <div class="alert alert-dismissible alert-info">
-          <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
-        </div>
+      <div class="alert alert-dismissible alert-info">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
       </div>
     </div>
   </div>
@@ -908,7 +941,7 @@ be presented with the content of the badge. Depending on the specific
 situation, these badges may seem like random additional words or numbers
 at the end of a sentence, link, or button.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -944,52 +977,72 @@ elements, some CSS to set the width, and a few attributes. We don’t use the
 HTML5 <progress> element, ensuring you can stack progress bars, animate them,
 and place text labels over them.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 
 === Basic
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <div class="progress">
-      <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
+  <div class="progress">
+    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
 ++++
 
+.Basic progressbar
+[source, html, role="noclip"]
+----
+  <div class="progress">
+    <div  class="progress-bar" role="progressbar"
+          style="width: 25%;"
+          aria-valuenow="25"
+          aria-valuemin="0"
+          aria-valuemax="100">
+    </div>
+  </div>
+----
+
 === Contextual alternatives
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <div class="progress">
-      <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
+  <div class="progress mb-1">
+    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress mb-1">
+    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress mb-1">
+    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress">
+    <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
 ++++
 
+.Progressbar SUCCESS
+[source, html, role="noclip"]
+----
+  <div class="progress">
+    <div  class="progress-bar bg-success" role="progressbar"
+          style="width: 25%;"
+          aria-valuenow="25"
+          aria-valuemin="0"
+          aria-valuemax="100">
+    </div>
+  </div>
+----
+
 === Multiple bars
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <div class="progress">
-      <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-      <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-      <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
+  <div class="progress">
+    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress-bar bg-danger"  role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
 ++++
@@ -998,22 +1051,20 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <div class="progress">
-      <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    <div class="progress">
-      <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
+  <div class="progress mb-1">
+    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress mb-1">
+    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress mb-1">
+    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress mb-1">
+    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
+  <div class="progress">
+    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
 ++++
@@ -1022,10 +1073,8 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <div class="progress">
-      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-    </div>
+  <div class="progress">
+    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
   </div>
 </div>
 ++++
@@ -1040,21 +1089,19 @@ lorem:sentences[2]
 
 Lightweight, flexible component for showcasing hero unit style content.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
-  <div class="bs-component">
-    <div class="jumbotron">
-      <h1 class="display-3">Hello, world!</h1>
-      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-      <hr class="my-4">
-      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
-      <p class="lead">
-        <a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
-      </p>
-    </div>
+  <div class="jumbotron">
+    <h1 class="display-3">Hello, world!</h1>
+    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+    <hr class="my-4">
+    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+    <p class="lead">
+      <a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
+    </p>
   </div>
 </div>
 ++++
@@ -1064,65 +1111,59 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
 List groups are a flexible and powerful component for displaying a series of
 content. Modify and extend them to support just about any content within.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
   <div class="row mb-5">
     <div class="col-md-4">
-      <div class="bs-component">
-        <ul class="list-group">
-          <li class="list-group-item d-flex justify-content-between align-items-center">
-            Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
-          </li>
-          <li class="list-group-item d-flex justify-content-between align-items-center">
-            Dapibus ac facilisis
-            <span class="badge badge-primary badge-pill">2</span>
-          </li>
-          <li class="list-group-item d-flex justify-content-between align-items-center">
-            Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
-          </li>
-        </ul>
-      </div>
+      <ul class="list-group">
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          Cras justo odio
+          <span class="badge badge-primary badge-pill">14</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          Dapibus ac facilisis
+          <span class="badge badge-primary badge-pill">2</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          Morbi leo risus
+          <span class="badge badge-primary badge-pill">1</span>
+        </li>
+      </ul>
     </div>
 
     <div class="col-md-4">
-      <div class="bs-component">
-        <div class="list-group">
-          <a href="javascript:(void)" class="list-group-item list-group-item-action active">
-            Cras justo odio
-          </a>
-          <a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
-          </a>
-          <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
-          </a>
-        </div>
+      <div class="list-group">
+        <a href="javascript:(void)" class="list-group-item list-group-item-action active">
+          Cras justo odio
+        </a>
+        <a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
+        </a>
+        <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
+        </a>
       </div>
     </div>
 
     <div class="col-md-4">
-      <div class="bs-component">
-        <div class="list-group">
-          <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
-            <div class="d-flex w-100 justify-content-between">
-              <h5 class="mb-1 notoc">List group item heading</h5>
-              <small>3 days ago</small>
-            </div>
-            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-            <small>Donec id elit non mi porta.</small>
-          </a>
-          <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
-            <div class="d-flex w-100 justify-content-between">
-              <h5 class="mb-1 notoc">List group item heading</h5>
-              <small class="text-muted">3 days ago</small>
-            </div>
-            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-            <small class="text-muted">Donec id elit non mi porta.</small>
-          </a>
-        </div>
+      <div class="list-group">
+        <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
+          <div class="d-flex w-100 justify-content-between">
+            <h5 class="mb-1 notoc">List group item heading</h5>
+            <small>3 days ago</small>
+          </div>
+          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+          <small>Donec id elit non mi porta.</small>
+        </a>
+        <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
+          <div class="d-flex w-100 justify-content-between">
+            <h5 class="mb-1 notoc">List group item heading</h5>
+            <small class="text-muted">3 days ago</small>
+          </div>
+          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+          <small class="text-muted">Donec id elit non mi porta.</small>
+        </a>
       </div>
     </div>
 
@@ -1147,173 +1188,164 @@ manage to deliver a ton of control and customization. Built with flexbox,
 they offer easy alignment and mix well with other Bootstrap components.
 They have no margin by default, so use spacing utilities as needed.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
-  <div class="row">
 
-    <div class="col-md-4">
-      <div class="bs-component">
-        <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Primary card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-body">
+          <h4 class="card-title notoc">Card title</h4>
+          <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <a href="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
         </div>
-        <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Secondary card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-body">
+          <h4 class="card-title notoc">Card title</h4>
+          <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <a href="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
         </div>
-        <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Success card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-body">
+          <h4 class="card-title notoc">Card title</h4>
+          <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <a href="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
         </div>
-        <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Danger card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-primary">
+          <h3 class="notoc">Header</h3>
         </div>
-        <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Warning card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Primary card title</h4>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
-        <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Info card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-secondary">
+          <h3 class="notoc">Header</h3>
         </div>
-        <div class="card bg-light mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Light card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Secondary card title</h4>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
-        <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Dark card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-success">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Success card title</h4>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="col-md-4">
-      <div class="bs-component">
-        <div class="card border-primary mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-primary">
-            <h4 class="card-title notoc">Primary card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-info">
+          <h3 class="notoc">Header</h3>
         </div>
-        <div class="card border-secondary mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-secondary">
-            <h4 class="card-title notoc">Secondary card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Info card title</h4>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
-        <div class="card border-success mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-success">
-            <h4 class="card-title notoc">Success card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-footer r-text-200">
+          <a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
+             href="javascript:(void)">Action · Footer Link
+          </a>
         </div>
-        <div class="card border-danger mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-danger">
-            <h4 class="card-title notoc">Danger card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-warning">
+          <h3 class="notoc">Header</h3>
         </div>
-        <div class="card border-warning mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-warning">
-            <h4 class="card-title notoc">Warning card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Warning card title</h4>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
-        <div class="card border-info mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-info">
-            <h4 class="card-title notoc">Info card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-footer r-text-200">
+          <a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
+             href="javascript:(void)">Action · Footer Link
+          </a>
         </div>
-        <div class="card border-light mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body">
-            <h4 class="card-title notoc">Light card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-danger">
+          <h3 class="notoc">Header</h3>
         </div>
-        <div class="card border-dark mb-3" style="max-width: 20rem;">
-          <div class="card-header">Header</div>
-          <div class="card-body text-dark">
-            <h4 class="card-title notoc">Dark card title</h4>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Danger card title</h4>
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        </div>
+        <div class="card-footer r-text-200">
+          <a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
+             href="javascript:(void)">Action · Footer Link
+          </a>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="col-md-4">
-      <div class="bs-component">
-        <div class="card mb-3">
-          <h3 class="card-header notoc">Card header</h3>
-          <div class="card-body">
-            <h5 class="card-title notoc">Special title treatment</h5>
-            <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
-          </div>
-          <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
-          <div class="card-body">
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          </div>
-          <ul class="list-group list-group-flush">
-            <li class="list-group-item">Cras justo odio</li>
-            <li class="list-group-item">Dapibus ac facilisis</li>
-            <li class="list-group-item">Vestibulum at eros</li>
-          </ul>
-          <div class="card-body">
-            <a href="javascript:(void)" class="card-link">Card link</a>
-            <a href="javascript:(void)" class="card-link">Another link</a>
-          </div>
-          <div class="card-footer text-muted">
-            2 days ago
-          </div>
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <h3 class="card-header notoc">Header</h3>
+        <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
+        <div class="card-body">
+          <h5 class="card-title notoc">Special title treatment</h5>
+          <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
         </div>
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title notoc">Card title</h4>
-            <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
-            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            <a href="javascript:(void)" class="card-link">Card link</a>
-            <a href="javascript:(void)" class="card-link">Another link</a>
-          </div>
+
+        <div class="card-body">
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        </div>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis</li>
+          <li class="list-group-item">Vestibulum at eros</li>
+        </ul>
+        <div class="card-body">
+          <a href="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
+        </div>
+        <div class="card-footer text-muted">
+          2 days ago
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 ++++
 
@@ -1329,32 +1361,82 @@ built with HTML, CSS, and JavaScript. They’re positioned over everything
 else in the document and remove scroll from the <body> so that modal
 content scrolls instead.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
 
 .Modal types
-[cols="3a,7a,2a", options="header", width="100%", role="table-responsive mt-3"]
+[cols="2a,8a,2a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
-|Type |Description |Launch
+|Type |Description |Launch Example
 
 |*Base*
-|Toggle a working modal demo by clicking the button below. It will slide
-down and fade in from the top of the page.
+|Lauch the modal by clicking the button below. It will slide down and fade in
+from the top of the page.
+|
+++++
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleSimpleModal">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div id="exampleSimpleModal"
+  class="modal fade top"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+++++
+
+|*Static backdrop*
+|This model is set to *static* and is will *not* close when clicking outside
+it (the backdrop).
 |
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-0">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleSimpleModal">
-    Launch
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleStaticModal">
+    Launch Example
   </button>
 </div>
 
 <!-- Modal -->
-<div class="modal fade" id="exampleSimpleModal" tabindex="-1" role="dialog" aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+<div id="exampleStaticModal"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleStaticModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title notoc" id="exampleSimpleModalLabel">Modal title</h5>
+        <h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -1363,8 +1445,8 @@ down and fade in from the top of the page.
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -1377,33 +1459,57 @@ independent of the page itself. Try the demo and resize your browser for
 the height.
 |
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-0">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalLong">
-    Launch
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleModalLong">
+    Launch Example
   </button>
 </div>
 
 <!-- Modal -->
-<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+<div
+  id="exampleModalLong"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title notoc" id="exampleModalLongTitle">Modal title</h5>
+        <h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
-        <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
-        <p class="card-description scale-description r-text-200">
+        <p>
           On the other hand, we denounce with righteous indignation and dislike men who
           are so beguiled and demoralized by the charms of pleasure of the moment, so
           blinded by desire, that they cannot foresee the pain and trouble that are
           bound to ensue; and equal blame belongs to those who fail in their duty through
           weakness of will, which is the same as saying through shrinking from toil and pain.
-          <br/><br/>
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
           These cases are perfectly simple and easy to distinguish. In a free hour, when
           our power of choice is untrammelled and when nothing prevents our being able to
           do what we like best, every pleasure is to be welcomed and every pain avoided.
@@ -1415,253 +1521,733 @@ the height.
         </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
 </div>
 ++++
 
-|*Vertically centered*
-|For important messages, center the modal.
+|*Scrollable long content*
+|It#s also possible to create a scrollable modal that allows scroll the
+modal body. Try the demo and scroll the content.
 |
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-0">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalVerticalCenter">
-    Launch
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleModalLongScrollable">
+    Launch Example
   </button>
 </div>
 
 <!-- Modal -->
-<div class="modal fade" id="exampleModalVerticalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
+<div
+  id="exampleModalLongScrollable"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title notoc" id="exampleModalVerticalCenterTitle">Modal title</h5>
+        <h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
 </div>
 ++++
 
-
-|*Form*
-|To save space on forms, dialogs can be part of a modal.
+|*Vertically centered*
+|For important messages, center the modal.
 |
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-0">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalContactForm">
-    Launch
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal" data-target="#exampleModalVerticalCenter">
+    Launch Example
   </button>
 </div>
 
-<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
-  <div class="modal-dialog cascading-modal" role="document">
-    <!--Content-->
+<!-- Modal -->
+<div id="exampleModalVerticalCenter"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
-      <!--Header-->
-      <div class="modal-header light-blue darken-3 white-text">
-        <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
-        <span aria-hidden="true">×</span>
+      <div class="modal-header">
+        <h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="title notoc"><i class="fa fa-pencil"></i> Contact form</h4>
       </div>
-      <!--Body-->
-      <div class="modal-body mb-0">
-        <div class="md-form form-sm">
-          <i class="fa fa-envelope prefix"></i>
-          <input type="text" id="form19" class="form-control">
-          <label for="form19">Your name</label>
-        </div>
-        <div class="md-form form-sm">
-          <i class="fa fa-lock prefix"></i>
-          <input type="password" id="form20" class="form-control">
-          <label for="form20">Your email</label>
-        </div>
-        <div class="md-form form-sm">
-          <i class="fa fa-tag prefix"></i>
-          <input type="text" id="form21" class="form-control">
-          <label for="form21">Subject</label>
-        </div>
-        <div class="md-form form-sm">
-          <i class="fa fa-pencil prefix"></i>
-          <textarea type="text" id="form8" class="md-textarea form-control mb-0"></textarea>
-          <label for="form8">Your message</label>
-        </div>
-        <div class="text-center mt-1-half">
-          <button class="btn btn-info mb-2 waves-effect waves-light">Send <i class="fa fa-send ml-1"></i></button>
-        </div>
+      <div class="modal-body">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
       </div>
     </div>
-    <!--/.Content-->
   </div>
 </div>
 ++++
 
-|*Fluid*
-|For e.g larger summaries, a vertical fluid modal can be used for that.
-|
-++++
-<div class="ml-2 mb-5">
-  <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccess">
-    Launch
-  </button>
-</div>
-
-<!-- Full Height Modal Right Success-->
-<div class="modal fade right" id="fluidModalRightSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
-        <!--Content-->
-        <div class="modal-content">
-            <!--Header-->
-            <div class="modal-header">
-                <p class="heading lead">Modal Success</p>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                            <span aria-hidden="true" class="white-text">&times;</span>
-                                        </button>
-            </div>
-
-            <!--Body-->
-            <div class="modal-body">
-                <div class="text-center">
-                    <i class="fa fa-check fa-4x mb-1 animated rotateIn"></i>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
-                </div>
-                <ul class="list-group z-depth-0">
-                    <li class="list-group-item justify-content-between">
-                        Cras justo odio
-                        <span class="badge badge-primary badge-pill">14</span>
-                    </li>
-                    <li class="list-group-item justify-content-between">
-                        Dapibus ac facilisis in
-                        <span class="badge badge-primary badge-pill">2</span>
-                    </li>
-                    <li class="list-group-item justify-content-between">
-                        Morbi leo risus
-                        <span class="badge badge-primary badge-pill">1</span>
-                    </li>
-                    <li class="list-group-item justify-content-between">
-                        Cras justo odio
-                        <span class="badge badge-primary badge-pill">14</span>
-                    </li>
-                    <li class="list-group-item justify-content-between">
-                        Dapibus ac facilisis in
-                        <span class="badge badge-primary badge-pill">2</span>
-                    </li>
-                    <li class="list-group-item justify-content-between">
-                        Morbi leo risus
-                        <span class="badge badge-primary badge-pill">1</span>
-                    </li>
-                </ul>
-            </div>
-
-            <!--Footer-->
-            <div class="modal-footer">
-                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
-                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
-            </div>
-        </div>
-        <!--/.Content-->
-    </div>
-</div>
-<!-- Full Height Modal Right Success-->
-++++
-
 |*Tooltips and Popovers*
 |Tooltips and popovers can be placed within modals as needed. When modals are
 closed, any tooltips and popovers within are also automatically dismissed.
 |
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-0">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalTooltip">
-    Launch
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleModalTooltip">
+    Launch Example
   </button>
 </div>
 
 <!-- Modal -->
-<div class="modal fade" id="exampleModalTooltip" tabindex="-1" role="dialog" aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
+<div id="exampleModalTooltip"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title notoc" id="exampleModalTooltipTitle">Modal title</h5>
+        <h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        <h5>Popover in a modal</h5>
-        <p>This <a href="#" role="button" class="btn btn-secondary btn-round btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
+        <h5 class="notoc">Popover in a modal</h5>
+        <p>This <a href="#" role="button" class="btn btn-primary btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
         <hr>
-        <h5>Tooltips in a modal</h5>
+        <h5 class="notoc">Tooltips in a modal</h5>
         <p><a href="javascript:(void)" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
 </div>
 ++++
-
 |===============================================================================
 
-=== Popovers
+.Base Modal example
+[source, html, role="noclip"]
+----
+<!-- Trigger Button (modal) -->
+<div class="ml-0">
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleSimpleModal">
+    Launch Example
+  </button>
+</div>
 
-Popovers rely on the 3rd party library Popper.js for positioning. You must
-include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js or
-bootstrap.bundle.js which contains Popper.js in order for popovers to work.
+<!-- Modal -->
+<div id="exampleSimpleModal"
+  class="modal fade top"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleSimpleModalLabel"
+  aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button"
+          class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
+        </button>
+        <button
+          type="button"
+          class="btn btn-secondary btn-flex btn-raised"
+          data-dismiss="modal"> Close
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+----
+
+=== Popovers and Tooltips
 
-Note: Popovers require the tooltip plugin as a dependency.
+Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
+To make them properly positioned, the Javascript library `popper.min.js` has to
+be included before `bootstrap.js` in order to make popovers and tooltips to work.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
 Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
 
+NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
+
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
-  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
-    sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
-  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
-  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
+  <div class="row mb-5">
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Popovers</h5>
+      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
+      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
+      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
+      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
+    </div>
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Tooltips</h5>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
+    </div>
+  </div>
 </div>
 ++++
 
-=== Tooltips
+.Example for Popovers and Tooltips
+[source, html, role="noclip"]
+----
+  <div class="row mb-5">
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Popovers</h5>
+      <button type="button" class="btn btn-primary btn-raised"
+        title="Popover Title" data-container="body"
+        data-toggle="popover" data-placement="top"
+        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
+      </button>
+      ...
+    </div>
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Tooltips</h5>
+      <button type="button" class="btn btn-primary btn-raised"
+              data-toggle="tooltip" data-placement="top"
+              title="Tooltip on top">Top
+      </button>
+      ...
+    </div>
+  </div>
+----
+
+== Bootstrap Material Design
 
-Tooltips rely on the 3rd party library Popper.js for positioning. You must
-include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js or
-bootstrap.bundle.js which contains Popper.js in order for tooltips to work.
+lorem:sentences[5]
 
-Note: Tooltips are opt-in for performance reasons, so you must initialize
-them yourself.
+=== MD Color Palette
+
+The MD color palette comprises primary and accent colors that can be used for
+illustration or to develop your brand colors. They’ve been designed to work
+harmoniously with each other.
+
+The color palette starts with primary colors and fills in the spectrum to
+create a complete and usable palette for Android, Web, and iOS. Google
+suggests using the 500 colors as the primary colors in your app and the
+other colors as accents colors.
+
+=== Red and Pink
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
+        <li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
+        <li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
+        <li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
+        <li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
+        <li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
+        <li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
+        <li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
+        <li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
+        <li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
+        <li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
+        <li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
+        <li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
+        <li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
+        <li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
+        <li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
+        <li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
+        <li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
+        <li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
+        <li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
+        <li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
+        <li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
+        <li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
+        <li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
+        <li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
+        <li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
+        <li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
+        <li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
+        <li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
-Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
 
+=== Purple and Deep Purple
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
+        <li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
+        <li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
+        <li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
+        <li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
+        <li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
+        <li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
+        <li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
+        <li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
+        <li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
+        <li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
+        <li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
+        <li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
+        <li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
+        <li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
+        <li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
+        <li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
+        <li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
+        <li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
+        <li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
+        <li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
+        <li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
+        <li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
+        <li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
+        <li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
+        <li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
+        <li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
+        <li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
+        <li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
 ++++
-<div class="doc-example mb-3">
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
+
+=== Indigo and Blue
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
+        <li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
+        <li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
+        <li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
+        <li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
+        <li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
+        <li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
+        <li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
+        <li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
+        <li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
+        <li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
+        <li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
+        <li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
+        <li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
+        <li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
+        <li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
+        <li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
+        <li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
+        <li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
+        <li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
+        <li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
+        <li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
+        <li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
+        <li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
+        <li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
+        <li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
+        <li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
+        <li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
+        <li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+=== Light Blue and Cyan
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
+        <li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
+        <li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
+        <li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
+        <li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
+        <li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
+        <li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
+        <li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
+        <li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
+        <li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
+        <li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
+        <li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
+        <li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
+        <li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
+        <li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
+        <li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
+        <li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
+        <li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
+        <li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
+        <li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
+        <li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
+        <li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
+        <li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
+        <li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
+        <li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
+        <li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
+        <li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
+        <li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
+        <li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+=== Teal and Green
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
+        <li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
+        <li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
+        <li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
+        <li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
+        <li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
+        <li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
+        <li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
+        <li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
+        <li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
+        <li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
+        <li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
+        <li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
+        <li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
+        <li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
+        <li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
+        <li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
+        <li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
+        <li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
+        <li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
+        <li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
+        <li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
+        <li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
+        <li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
+        <li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
+        <li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
+        <li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
+        <li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
+        <li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+=== Light Green and Lime
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
+        <li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
+        <li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
+        <li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
+        <li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
+        <li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
+        <li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
+        <li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
+        <li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
+        <li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
+        <li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
+        <li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
+        <li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
+        <li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
+        <li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
+        <li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
+        <li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
+        <li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
+        <li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
+        <li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
+        <li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
+        <li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
+        <li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
+        <li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
+        <li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
+        <li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
+        <li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
+        <li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
+        <li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+=== Yellow and Amber
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
+        <li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
+        <li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
+        <li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
+        <li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
+        <li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
+        <li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
+        <li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
+        <li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
+        <li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
+        <li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
+        <li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
+        <li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
+        <li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
+        <li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
+        <li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
+        <li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
+        <li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
+        <li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
+        <li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
+        <li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
+        <li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
+        <li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
+        <li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
+        <li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
+        <li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
+        <li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
+        <li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
+        <li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
 ++++
+
+=== Orange and Deep Orange
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
+        <li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
+        <li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
+        <li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
+        <li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
+        <li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
+        <li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
+        <li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
+        <li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
+        <li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
+        <li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
+        <li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
+        <li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
+        <li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
+        <li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
+        <li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
+        <li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
+        <li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
+        <li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
+        <li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
+        <li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
+        <li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
+        <li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
+        <li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
+        <li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
+        <li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
+        <li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
+        <li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
+        <li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+=== Brown and Grey
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
+        <li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
+        <li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
+        <li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
+        <li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
+        <li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
+        <li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
+        <li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
+        <li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
+        <li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
+        <li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
+        <li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
+        <li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
+        <li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
+        <li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
+        <li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
+        <li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
+        <li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
+        <li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
+        <li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
+        <li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+=== Blue Grey and BW
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
+        <li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
+        <li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
+        <li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
+        <li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
+        <li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
+        <li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
+        <li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
+        <li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
+        <li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
+        <li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
+        <li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
+      </ul>
+    </div>
+  </div>
+</div>
+++++
+
+== Final words
+
+lorem:sentences[5]