j1-template 2021.0.12 → 2021.1.0

data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc

@@ -0,0 +1,121 @@
+---
+title:                                  Comment Policy
+tagline:                                discuss with respect
+date:                                   2021-03-30 00:00:00
+description: >
+                                        We love comments and appreciate the time that our visitors
+                                        spend to share ideas and give feedback. Thank you to everyone
+                                        who comments at {j1--site-name}.
+
+tags:                                   [ Legal ]
+categories:                             [ Comments, Policy ]
+
+toc:                                    true
+fam:                                    true
+fam_menu_id:                            page_ctrl_simple
+scrollbar:                              false
+indexed:                                false
+comments:                               false
+exclude_from_search:                    true
+
+permalink:                              /pages/public/legal/en/comment_policy/
+regenerate:                             true
+
+resources:                              []
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/leon-1920x1280.jpg
+          alt:                          Photo by Leon on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Leon
+            href:                       https://unsplash.com/@myleon
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:disqus:                                true
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+We love comments and appreciate our visitor's time to share ideas and give
+feedback. Thank you to everyone who places a comment on the {j1--site-name}
+website.
+
+ifeval::[{disqus} == true]
+To access the public commenting feature, you will need to register for
+an account as an individual at _Disqus_. One of the primary purposes of
+encouraging comments on the {j1--site-name} website is to promote a sense
+of community.
+
+NOTE: _Disqus_ (/dɪsˈkʌs/) is a blog comment hosting service for websites
+and online communities that use a networked platform. The company's
+platform includes various features, such as social integration, social
+networking, user profiles, spam and moderation tools, analytics,
+email notifications, and mobile commenting.
+endif::[]
+
+== Discuss with Respect
+
+One of the most important aspects of a helpful blog is the conversation
+that occurs through comments that visitors publish on blog posts. However,
+comment conversations can sometimes take a negative turn or feature spam
+links. That's why it's helpful to have a blog comment policy. Visitors
+understand what is and is not acceptable when commenting on your blog posts.
+
+== Comments are Welcome
+
+Comments are welcomed and encouraged on this site, but there are some
+instances where comments will be edited or deleted. The owner of this site
+reserves the right to edit or delete any comments submitted to the blog
+without notice.
+
+This comment policy is subject to change at any time:
+
+Promotional::
+Comments deemed to be spam or solely promotional in nature will be
+deleted. Including a link to relevant content is permitted, but comments
+should be relevant to the post topic.
+
+Profanity::
+Comments including profanity will be deleted.
+
+Roughly language::
+Comments containing language or concepts that could be deemed offensive
+will be deleted. Note this may include abusive, threatening, pornographic,
+offensive, misleading, or libelous language.
+
+Attack::
+Comments that attack an individual directly will be deleted.
+
+Harassing::
+Comments that harass other posters will be deleted. While conversation and
+the sharing of different ideas are encouraged, all comments need to be
+respectful towards our contributors and those leaving comments.
+
+Anonymous::
+Anonymous comments will be deleted. We only accept comments from people who
+identify themselves.

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

@@ -3,25 +3,27 @@ title:                                  J1 Template
 tagline:                                creating responsive websites
 date:                                   2020-11-03 00:00:00
 description: >
-                                        A good user experience browsing a Web is one of
-                                        the most important features a site has to offer as
-                                        a must. Beside excellent content. Presenting content
-                                        at it’s best on all devices, for all window sizes makes
-                                        an excellent Web brilliant. J1 Template support your Web
-                                        for full responsiveness, for the best user experience on
-                                        all modern devices.
+                                        A good user experience browsing a Web site is one of the most important
+                                        features a website offers as a must, besides excellent content. Presenting
+                                        content at its best on all devices for all window sizes makes a great Web
+                                        brilliant. J1 Template supports your Web for full responsiveness, for the
+                                        best user experience on all modern devices.
 
 
 tags:                                   [ Jekyll, Template ]
 categories:                             [ Info, Introduction ]
 
+comments:                               false
+fam_menu_id:                            page_ctrl_simple
+
 permalink:                              /pages/public/panels/intro_panel/
 regenerate:                             false
 
 resources:                              [
                                           clipboard, rouge, carousel, lightbox,
-                                          justified_gallery, light_gallery
+                                          justifiedGallery, lightGallery
                                         ]
+
 resource_options:
   - attic:
       padding_top:                      400
@@ -46,22 +48,21 @@ resource_options:
 image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}]
 
 A good user experience browsing a Web site is one of the most important
-feature a site has to offer as a must. Beside excellent content. Presenting
-content at its best on all devices, for all window sizes makes an excellent
-Web brilliant. J1 Template supports your Web for full responsiveness, for
-the best user experience on all modern devices.
+features a website offers as a must, besides excellent content. Presenting
+content at its best on all devices for all window sizes makes a great Web
+brilliant. J1 Template supports your Web for full responsiveness, for the
+best user experience on all modern devices.
 
 === Bootstrap 4 Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
-J1 Template is based on Bootstrap. Bootstrap is one of the most popular
-frameworks for web development used today. J1 is based on Bootstrap V4, the
-last current version to support your visitors by common elements for navigation,
-data input, tables, and many other components more.
+the J1 Template is based on Bootstrap. Bootstrap is one of the most popular
+frameworks for web development used today. J1 is based on Bootstrap V4,
+the last current version to support your visitors by common navigation
+elements, data input, tables, and many other components.
 
-For your development projects, Bootstrap simplifies HTML programming a lot,
-offers excellent JS support for interactive components like navigation
-elements, cards, forms, etc.
+Bootstrap simplifies HTML programming a lot, offers excellent JS support
+for interactive components like navigation elements, cards, forms, etc.
 
 [[current-technology]]
 == HTML5 · CSS3 · JS
@@ -76,62 +77,69 @@ of web development, languages, and tools.
 
 === Coding web pages
 
-J1 is using HTML5, the latest major version of HTML, for structuring content
-on the World Wide Web. The current version of the HTML standard offers a lot
-of new features including detailed processing models to support more
+J1 uses HTML5, the latest major HTML version, for structuring content
+on the World Wide Web. The HTML standard's current version many new features,
+including detailed processing models to support more
 interoperable implementations. It extends and improves HTML markups available
 in older versions.
 
 HTML5 introduces application programming interfaces (APIs) for more complex
 web applications. For the same reasons, the new HTML standard is also a good
-choice for modern cross-platform mobile applications, because it includes
+choice for modern cross-platform mobile applications because it includes
 features designed with mobile devices in mind.
 
 Many new features are included with HTML5. To natively support multimedia and
 graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
-added. Besides this, support for *SVG* (scalable vector graphics), an API called
-*MathML* for mathematical formulas and a grid system called *Flex* are now
-available.
+added. Besides this, *SVG* (scalable vector graphics) support an API called
+*MathML* for mathematical formulas, and Flex's grid system is now available.
 
 The new standard allows to use so-called *semantic* markup elements for your
 documents. New structure elements such as `<main>`, `<section>`, `<article>`,
 `<header>` or `<footer>` (and many more) were added. Better structured HTML
 code can help people having disabilities to read the pages presented better.
 
-*CSS* (cascadeded style sheets) is designed to enable the *separation* of
-presentation and content. Including layout, colors, and fonts for example.
-This separation improves content accessibility, provide more flexibility and
-control in the presentation.
+*CSS* (cascading style sheets) is designed to enable the *separation* of
+presentation and content, including layout, colors, and fonts. This separation
+improves content accessibility, provides more flexibility and control for
+the presentation.
 
 Separation of formatting and content also makes it feasible to present the
-same page in different styles. For example, the *themes feature* of J1 Template
-makes use of this.
+same page in different styles. For example, the *themes feature* of the J1
+Template makes use of this.
 
-*CSS3*, the current standard for cascadeded style sheets, is divided into
-several separated components called *modules*. Each module adds new capabilities
-or extends features defined in the former CSS2 standard. HTML5 in combination
-with CSS3 allows creating modern and modular code for web pages that can be
+*CSS3*, the current standard for cascaded style sheets, is divided into
+several separate components called *modules*. Each module adds new
+capabilities or extends features defined in the former CSS2 standard. HTML5,
+in combination with CSS3, allows creating modern and modular code for web pages
 viewed on all current devices like Mobiles, Tablets, or the classic Desktop PC.
-The new HTML5 elements plus CSS3 modules can be used as a replacement for
-proprietary solutions like _Adobe Flash_ to build modern webpages based on
-open standards.
+The new HTML5 elements plus CSS3 modules can replace proprietary solutions
+like _Adobe Flash_ to build modern web pages based on open standards
+
+*CSS3*, the current standard for cascading style sheets, is divided into
+several separate components called modules. Each module adds new capabilities
+or extends features defined in the former CSS2 standard. HTML5, in combination
+with CSS3, allows creating modern and modular code for web pages that can be
+viewed on all current devices like Mobiles, Tablets, or the classic Desktop
+PC. The new HTML5 elements plus CSS3 modules can replace proprietary
+solutions like Adobe Flash to build modern web pages based on open standards.
+
 
 === Javascript
 
 [role="mb-3"]
 image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
 
-JavaScript is a text-based programming language used both on the client-side
-and server-side that allows you to make web pages interactive. Where HTML and
-CSS are languages that give structure and style to web pages, JavaScript gives
-web pages interactive elements that engage a user.
+JavaScript is a text-based programming language used on the client-side and
+server-side to make web pages interactive. HTML and CSS are languages that
+give structure and style to web pages, and JavaScript provides web pages
+interactive elements that engage a user.
 
 Content placement and basic methods for the dynamic of elements can be done
 using pure HTML5 and CSS3. For more complex solutions like *modules* (to
-provide dynamic, interactive elements), the support of *Javascript* for a
+provide dynamic, interactive features), the support of *Javascript* for a
 webpage is needed.
 
-JavaScript is used for J1 mainly as a client-side script-engine. A client-side
+JavaScript is used for J1 mainly as a client-side script engine. A client-side
 script is a programming language that performs its tasks entirely on the
 client's machine and does not need to interact with the server to function.
 
@@ -139,13 +147,13 @@ Some of the dynamic website enhancements performed by JavaScript are:
 
 * Loading (new) content or data onto the page without reloading the page
 * Rollover effects and dropdown menus
-* Animating page elements such as fading, resizing or relocating
+* Animating page elements such as fading, resizing, or relocating
 * Playing audio and video
 
 J1 Template has build-in a wide range of JS-powered modules to support a
-website e.g. by a powerful navigation system, for presenting image data in
-galleries, lightboxes, and so on. Good news are: no programming JavaScript
-is needed to use the build-in JS-based modules.
+website, e.g., by a powerful navigation system, for presenting image data
+in galleries, lightboxes, and so on. The good news is: no programming
+JavaScript is needed to use the build-in JS-based modules.
 
 [[launch-ready]]
 == Start in No Time
@@ -161,46 +169,46 @@ your content is done automatically and allows you to concentrate on what
 truly matters: your content.
 
 Using J1, you can instantly start a web project by creating your content and
-not by start learning the deep web development technologies.
+not earning the deep of web development technologies.
 
 === Create your Web
 
-J1 is highly customizable. Based on a pure configuration, a website can be
+J1 is highly customizable. Based on a pure configuration, websites are
 created. The template system creates static web pages using Jekyll as the
-base HTML code generator. Static websites are fast and secure but simple
-to manage. No complex database systems and PHP interfaces are needed.
+base HTML code generator. Static websites are fast and secure but
+straightforward to manage. No complex database systems and PHP interfaces
+are needed.
 
-To present a static website, only a web server environment is needed. To
-publish a website on the Internet, many possible platforms can be used like
-Github, Netlify, or Heroku for example - for free!
+For managing static websites, only a web server environment is needed. Publish
+a site on the Internet, possible platforms can be used like Github, Netlify,
+or Heroku, for free!
 
 The Internet is not a peaceful place. Every site accessible from the public
 is attacked from the first second if published. Static websites are robust,
-fast and that’s import: intrinsically secure. That means: not changeable.
-No offender attacking your website can break your site. Because it’s static
+fast, and that’s import: intrinsically secure. That means: not changeable.
+No offender attacking your website can break your site because it’s static,
 or in other words: unchangeable, unbreakable from its nature.
 
-This makes a static website for the better.
+That makes a static website for the better.
 
 === Modules and Apps
 
-It’s predictable what base components are needed for a modern website. For
-Content Management Systems (CMS) like WordPress, Joomla, or Drupal a huge
-number of modules are available to extend a site by e.g. Apps like image
-galleries, video players, calendars, etc.
+It's predictable what base components are needed for a modern website. For
+Content Management Systems (CMS) like WordPress, Joomla, or Drupal, many
+modules are available to extend a site by, e.g., Apps like image galleries,
+video players, calendars, etc.
 
-This is a bit different for static webs as they don’t have a central Management
+That is a bit different for static webs as they don’t have a central Management
 System as CMS does to integrate external code. There no ecosystem, no
 marketplace to get apps and modules from.
 
 gallery::jg_old_times[]
 
 Luckily, it is not that hard to integrate external components into the world
-of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
-toolset without the need to install, to integrate components that are expected
-as a need.
+of Jekyll. One of J1 is to give people a ready-to-use toolset without the
+need to install, to integrate features that are expected as a need.
 
-A rich set of modules are already included. The modules support common use
+A rich set of modules are already included. The modules support usual use
 cases of a website like a flexible navigation system, a local search,
-lightboxes to present pictures and videos, little helpers for scrolling or
-to automatically create TOCs (table of contents) for a page.
+lightboxes to present pictures and videos, little helpers for scrolling,
+or to automatically create TOCs (table of contents) for a page.

data/lib/starter_web/pages/public/previewer/_includes/tables/rouge/300_supported_languages.asciidoc

@@ -225,7 +225,7 @@ the principal shading language for OpenGL.
 
 |`go`
 |golang
-|The https://golang.org/[Go, {browser-window--new}]
+|The https://golang.org/[Programming language Go, {browser-window--new}]
 programming language. Go is an open source programming language that makes it
 easy to build simple, reliable, and efficient software.
 

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

@@ -13,16 +13,16 @@ description: >
                                         of a selected theme. Find base Bootstrap features and styles for
                                         the current theme selected.
 
+categories:                             [ Previewer ]
 tags:                                   [ Bootstrap, Themes ]
-categories:                             [ Configuration, Previewer ]
 
-scrollbar:                              true
+scrollbar:                              false
 flowtext:                               false
 
 permalink:                              /pages/public/previewer/theme/
 regenerate:                             false
 
-resources:                              [ rouge, fam, clipboard ]
+resources:                              [ rouge, clipboard ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -41,7 +41,6 @@ resource_options:
 // =============================================================================
 // Enable the Liquid Preprocessor
 :page-liquid:
-// :scrollbars:
 
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
@@ -61,23 +60,6 @@ resource_options:
 // Include sub-documents
 // -----------------------------------------------------------------------------
 
-Themes for the template system J1 are based on the free and open-source CSS
-front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
-version V4.
-
-Bootstrap is a HTML, CSS & JS Library that focuses on simplifying the
-development of modern web pages. The primary purpose to apply the framework
-to J1 is to provide a general standard colors, sizes, fonts and the overall
-layout of a J1-based site. Bootstrap provides basic style definitions for all
-common used HTML elements.
-
-This results in a uniform appearance for the content in terms of the overall
-layout, text, tables and form elements across all modern web browsers available
-on the market. In addition, developers can take advantage of CSS classes
-defined in Bootstrap to customize content individually.
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ++++
   <!-- Prepend H1 tag here -->
   <div id="theme" class="row ml-0 mb-3">
@@ -95,7 +77,8 @@ defined in Bootstrap to customize content individually.
 
       var dependencies_met_themer = setInterval(function() {
         interval_count += 1;
-        if ( j1.adapter.themer.getState() == 'finished' ) {
+        // if ( j1.adapter.themer.getState() == 'finished' ) {
+        if (j1.getState() == 'finished') {
           user_state_detected = j1.existsCookie (cookie_names.user_state);
           if ( user_state_detected ) {
             user_state = j1.readCookie(cookie_names.user_state);
@@ -123,454 +106,6 @@ color scheme, fonts, sizes or the appearance of more complex elements like
 forms or tables. Additionally, a theme may add additonal components but in
 the *sense* of Bootstrap's framework rules and philosophy.
 
-== J1 Color Palette
-
-The color palette used by J1 Template is based on the definitions of Google's
-*Material Design* (MD). The color scheme comprises primary and accent colors
-that can be used for illustration or to develop individual brand colors of a
-website. 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 Desktop Wen and mobile sites based on
-Androi or iOS. Google suggests using the 500 colors as the primary colors for
-your web and the other colors as accents colors to support the content for
-better reading or orientation.
-
-=== 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>
-++++
-
-=== 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>
-++++
-
-=== 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>
-++++
-
 == Navbars
 
 See examples for Bootstrap’s powerful, responsive navigation header, the
@@ -588,7 +123,7 @@ colors. Then, customize with `.bg-*` utilities.
 ++++
 <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>
+    <a href="#" class="navbar-brand">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>
     </button>
@@ -596,16 +131,16 @@ colors. Then, customize with `.bg-*` utilities.
     <div class="collapse navbar-collapse" id="navbarColor01">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+          <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Features</a>
+          <a href="#" class="nav-link">Features</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Pricing</a>
+          <a href="#" class="nav-link">Pricing</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">About</a>
+          <a href="#" class="nav-link">About</a>
         </li>
       </ul>
       <form class="form-inline">
@@ -616,7 +151,7 @@ colors. Then, customize with `.bg-*` utilities.
   </nav>
 
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a href="#" class="navbar-brand">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>
     </button>
@@ -624,16 +159,16 @@ colors. Then, customize with `.bg-*` utilities.
     <div class="collapse navbar-collapse" id="navbarColor02">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+          <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Features</a>
+          <a href="#" class="nav-link">Features</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Pricing</a>
+          <a href="#" class="nav-link">Pricing</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">About</a>
+          <a href="#" class="nav-link">About</a>
         </li>
       </ul>
       <form class="form-inline">
@@ -644,7 +179,7 @@ colors. Then, customize with `.bg-*` utilities.
   </nav>
 
   <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a href="#" class="navbar-brand">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -652,16 +187,16 @@ colors. Then, customize with `.bg-*` utilities.
     <div class="collapse navbar-collapse" id="navbarColor03">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+          <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Features</a>
+          <a href="#" class="nav-link">Features</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Pricing</a>
+          <a href="#" class="nav-link">Pricing</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">About</a>
+          <a  href="#" class="nav-link">About</a>
         </li>
       </ul>
       <form class="form-inline">
@@ -916,12 +451,12 @@ A floating action button represents the primary action in an application,
 it is used for a promoted action.
 
 mdi:bootstrap[24px, mdi-md-deep-purple]
-https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-char-middot} Floating action buttons, {browser-window--new}]
+https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
 
 ++++
 <div class="doc-example">
   <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
@@ -929,7 +464,7 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
 [source, html, role="noclip"]
 ----
   <button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 ----
 
@@ -938,28 +473,28 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
 ++++
 <div class="doc-example">
   <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
@@ -967,17 +502,17 @@ https://material.io/components/buttons-floating-action-button#types-of-transitio
 [source, html, role="noclip"]
 ----
   <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   ...
   <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
   <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
-    <i class="mdi mdi-plus mdi-2x"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 ----
 
@@ -988,7 +523,7 @@ A smaller sized, i.e. mini floating action button, is also available.
 ++++
 <div class="doc-example">
   <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
-    <i class="mdi mdi-plus mdi-sm"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
@@ -996,7 +531,7 @@ A smaller sized, i.e. mini floating action button, is also available.
 [source, html, role="noclip"]
 ----
   <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
-    <i class="mdi mdi-plus mdi-sm"></i>
+    <i class="mdi mdi-plus"></i>
   </button>
 ----
 
@@ -1032,7 +567,7 @@ link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography,
     </div>
     <div class="col-md-4">
       <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>Nullam quis risus eget <a href="#">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>
@@ -1166,14 +701,14 @@ link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browse
 <div class="doc-example mb-3">
   <form>
     <div class="form-group">
-      <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
       <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
+      <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
       <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
       <span class="bmd-help">We'll never share your email with anyone else.</span>
     </div>
     <div class="form-group">
-      <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
       <input type="password" class="form-control" id="exampleInputPassword1">
+      <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
       <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
     </div>
     <div class="form-group form-check">
@@ -1193,11 +728,10 @@ state, sizing, and more.
 <div class="doc-example mb-3">
   <form>
     <div class="form-group">
-        <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
       <input type="email" class="form-control" id="exampleFormControlInput1">
+      <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
     </div>
     <div class="form-group">
-      <label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
       <select class="form-control" id="exampleFormControlSelect1">
         <option>1</option>
         <option>2</option>
@@ -1205,18 +739,19 @@ state, sizing, and more.
         <option>4</option>
         <option>5</option>
       </select>
+      <label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
     </div>
     <div class="form-group">
-      <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>
         <option>option 3</option>
       </select>
+      <label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
     </div>
     <div class="form-group">
-      <label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
       <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+      <label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
     </div>
   </form>
 </div>
@@ -1228,8 +763,8 @@ 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" class="bmd-label-floating">Example file input</label>
       <input type="file" class="form-control-file" id="exampleFormControlFile1">
+      <label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
     </div>
   </form>
 </div>
@@ -1265,22 +800,21 @@ JavaScript plugin.
       <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)"
+      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"
         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>
+        <a href="#" class="dropdown-item">Action</a>
+        <a href="#" class="dropdown-item">Another action</a>
+        <a href="#" class="dropdown-item">Something else here</a>
         <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+        <a href="#" class="dropdown-item">Separated link</a>
       </div>
     </li>
     <li class="nav-item">
-      <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+      <a href="#" class="nav-link disabled">Disabled</a>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">
@@ -1310,26 +844,26 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
   <div class="row mb-5">
 
     <div class="col-md-6">
-      <h5 class="notoc">Standard Pills</h5>
+      <h4 class="notoc">Standard Pills</h4>
       <ul class="nav nav-pills">
         <li class="nav-item mr-1 mb-2">
-          <a class="nav-link active" href="javascript:(void)">Active</a>
+          <a href="#" class="nav-link active">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>
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" 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>
+            <a href="#" class="dropdown-item">Action</a>
+            <a href="#" class="dropdown-item">Another action</a>
+            <a href="#" class="dropdown-item">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+            <a href="#" class="dropdown-item">Separated link</a>
           </div>
         </li>
         <li class="nav-item mr-1 mb-2">
-          <a class="nav-link" href="javascript:(void)">Link</a>
+          <a href="#" class="nav-link">Link</a>
         </li>
         <li class="nav-item mr-1 mb-2">
-          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+          <a href="#" class="nav-link disabled">Disabled</a>
         </li>
       </ul>
     </div>
@@ -1337,23 +871,23 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
       <h5 class="notoc">Stacked Pills (vertical)</h5>
       <ul class="nav nav-pills flex-column mb-4">
         <li class="nav-item mb-2">
-          <a class="nav-link active" href="javascript:(void)">Active</a>
+          <a href="#" class="nav-link active">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>
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" 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>
+            <a href="#" class="dropdown-item">Action</a>
+            <a href="#" class="dropdown-item">Another action</a>
+            <a href="#" class="dropdown-item">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+            <a href="#" class="dropdown-item">Separated link</a>
           </div>
         </li>
         <li class="nav-item mb-2">
-          <a class="nav-link" href="javascript:(void)">Link</a>
+          <a href="#" class="nav-link">Link</a>
         </li>
         <li class="nav-item mb-2">
-          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+          <a href="#" class="nav-link disabled">Disabled</a>
         </li>
       </ul>
     </div>
@@ -1374,12 +908,12 @@ Separators are automatically added in CSS through ::before and content.
     <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"><a href="#">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"><a href="#">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">Library</a></li>
     <li class="breadcrumb-item active">Data</li>
   </ol>
 </div>
@@ -1398,75 +932,75 @@ it as a navigation section to screen readers and other assistive technologies.
   <div>
     <ul class="pagination">
       <li class="page-item disabled">
-        <a class="page-link" href="javascript:(void)">&laquo;</a>
+        <a href="#" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a class="page-link" href="javascript:(void)">1</a>
+        <a href="#" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">2</a>
+        <a href="#" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">3</a>
+        <a href="#" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">4</a>
+        <a href="#" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">5</a>
+        <a href="#" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">&raquo;</a>
+        <a href="#" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
   <div>
     <ul class="pagination pagination-lg">
       <li class="page-item disabled">
-        <a class="page-link" href="javascript:(void)">&laquo;</a>
+        <a href="#" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a class="page-link" href="javascript:(void)">1</a>
+        <a href="#" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">2</a>
+        <a href="#" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">3</a>
+        <a href="#" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">4</a>
+        <a href="#" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">5</a>
+        <a href="#" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">&raquo;</a>
+        <a href="#" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
   <div>
     <ul class="pagination pagination-sm">
       <li class="page-item disabled">
-        <a class="page-link" href="javascript:(void)">&laquo;</a>
+        <a href="#" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a class="page-link" href="javascript:(void)">1</a>
+        <a href="#" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">2</a>
+        <a href="#" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">3</a>
+        <a href="#" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">4</a>
+        <a href="#" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">5</a>
+        <a href="#" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a class="page-link" href="javascript:(void)">&raquo;</a>
+        <a href="#" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
@@ -1500,7 +1034,7 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
       <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>
+        <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="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
       </div>
     </div>
   </div>
@@ -1508,19 +1042,19 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
     <div class="col-md-4">
       <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.
+        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
       </div>
     </div>
     <div class="col-md-4">
       <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>.
+        <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
       </div>
     </div>
     <div class="col-md-4">
       <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.
+        <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
       </div>
     </div>
   </div>
@@ -1813,7 +1347,7 @@ link:{url-bs-docs--components-jumbotron}[Bootstrap Docs {char-middot} Jumbotron,
     <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>
+      <a href="#" class="btn btn-primary btn-raised btn-lg" role="button">Learn more</a>
     </p>
   </div>
 </div>
@@ -1849,27 +1383,27 @@ link:{url-bs-docs--components-list_group}[Bootstrap Docs {char-middot} List grou
 
     <div class="col-md-4">
       <div class="list-group">
-        <a href="javascript:(void)" class="list-group-item list-group-item-action active">
+        <a href="#" class="list-group-item list-group-item-action active">
           Describe item #1
         </a>
-        <a href="javascript:(void)" class="list-group-item list-group-item-action">Describe item #2
+        <a href="#" class="list-group-item list-group-item-action">Describe item #2
         </a>
-        <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Describe item #3
+        <a href="#" class="list-group-item list-group-item-action disabled">Describe item #3
         </a>
       </div>
     </div>
 
     <div class="col-md-4">
       <div class="list-group">
-        <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
+        <a href="#" 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>
+            <h4 class="mb-1 notoc">List group item heading</h4>
             <small>3 days ago</small>
           </div>
           <p class="mb-1">Some quick example text to build on a list and make up the bulk of the list group's content.</p>
           <small>Summarize whats all about.</small>
         </a>
-        <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
+        <a href="#" 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>
@@ -1904,6 +1438,7 @@ They have no margin by default, so use spacing utilities as needed.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser-window--new}]
 
+==== Simple cards
 ++++
 <div class="doc-example mb-3">
 
@@ -1912,10 +1447,10 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
       <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>
+          <h5 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h5>
           <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>
+          <a href="#" class="card-link">Card link</a>
+          <a href="#" class="card-link">Another link</a>
         </div>
       </div>
     </div>
@@ -1925,8 +1460,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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>
+          <a href="#" class="card-link">Card link</a>
+          <a href="#" class="card-link">Another link</a>
         </div>
       </div>
     </div>
@@ -1936,8 +1471,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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>
+          <a href="#" class="card-link">Card link</a>
+          <a href="#" class="card-link">Another link</a>
         </div>
       </div>
     </div>
@@ -1991,7 +1526,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
         </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
+             href="#">Action · Footer Link
           </a>
         </div>
       </div>
@@ -2007,7 +1542,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
         </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
+             href="#">Action · Footer Link
           </a>
         </div>
       </div>
@@ -2022,22 +1557,59 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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 href="#" class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase">
+          Action · Footer Link
           </a>
         </div>
       </div>
     </div>
   </div>
+</div>
+++++
+
+==== Image cards
+++++
+<div class="doc-example mb-3">
 
   <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
+        <div class="card-body">
+          <h5 class="card-title notoc">Card title</h5>
+          <h6 class="card-subtitle text-muted notoc">Image card subtitle</h6>
+        </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>
+
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
+        <div class="card-body">
+          <h5 class="card-title notoc">Card title</h5>
+          <h6 class="card-subtitle text-muted notoc">Image card subtitle</h6>
+        </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>
+
+        <div class="card-footer text-muted">
+          2 days ago
+        </div>
+      </div>
+    </div>
     <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">
+        <img src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Free site generators">
         <div class="card-body">
-          <h5 class="card-title notoc">Special title treatment</h5>
-          <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
+          <h5 class="card-title notoc">Card title</h5>
+          <h6 class="card-subtitle text-muted notoc">Image card subtitle</h6>
         </div>
 
         <div class="card-body">
@@ -2045,8 +1617,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
         </div>
 
         <div class="card-body">
-          <a href="javascript:(void)" class="card-link">Card link</a>
-          <a href="javascript:(void)" class="card-link">Another link</a>
+          <a href="#" class="card-link">Card link</a>
+          <a href="#" class="card-link">Another link</a>
         </div>
         <div class="card-footer text-muted">
           2 days ago
@@ -2054,7 +1626,6 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
       </div>
     </div>
   </div>
-
 </div>
 ++++
 
@@ -2379,17 +1950,17 @@ closed, any tooltips and popovers within are also automatically dismissed.
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
+        <h4 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h4>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        <h5 class="notoc">Popover in a modal</h5>
+        <h4 class="notoc">Popover in a modal</h4>
         <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 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>
+        <h4 class="notoc">Tooltips in a modal</h4>
+        <p><a href="#" 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-primary btn-flex btn-raised mr-2">Do nothing</button>
@@ -2459,7 +2030,6 @@ be included before `bootstrap.js` in order to make popovers and tooltips to work
 
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {browser-window--new}]
-
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {browser-window--new}]