From 0ed0b7bbce6f9382970f3e4800ba0f34972f2100 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 21 Oct 2019 16:48:13 +0200
Subject: [PATCH] test: fix unit tests, update snapshots

---
 .gitignore                                    |   1 +
 babel.config.js                               |   2 +-
 jest.config.js                                |  17 +-
 .../e2e/custom-assertions/custom-assertion.js |   3 +-
 tests/e2e/custom-commands/custom-command.js   |   1 +
 tests/e2e/page-objects/page-object.js         |   1 +
 .../__snapshots__/TheFooter.spec.js.snap      |   4 +-
 .../__snapshots__/TheHeader.spec.js.snap      |  17 +-
 .../TheHeaderDropdownAccnt.spec.js.snap       |   6 +-
 .../__snapshots__/TheSidebar.spec.js.snap     |   4 +-
 .../__snapshots__/Dashboard.spec.js.snap      |  42 +-
 .../__snapshots__/Breadcrumbs.spec.js.snap    |  49 +-
 .../base/__snapshots__/Cards.spec.js.snap     |  83 +--
 .../base/__snapshots__/Carousels.spec.js.snap |   5 +-
 .../base/__snapshots__/Collapses.spec.js.snap |  14 +-
 .../__snapshots__/Jumbotrons.spec.js.snap     |  57 +-
 .../__snapshots__/ListGroups.spec.js.snap     | 303 ++++------
 .../base/__snapshots__/Navbars.spec.js.snap   | 133 ++---
 .../base/__snapshots__/Navs.spec.js.snap      | 128 +----
 .../__snapshots__/Paginations.spec.js.snap    |  52 +-
 .../__snapshots__/ProgressBars.spec.js.snap   | 140 ++---
 .../base/__snapshots__/Switches.spec.js.snap  | 396 +++----------
 .../base/__snapshots__/Table.spec.js.snap     |   3 +-
 .../base/__snapshots__/Tables.spec.js.snap    |  16 +-
 .../base/__snapshots__/Tabs.spec.js.snap      |  84 +--
 .../base/__snapshots__/Tooltips.spec.js.snap  |  65 +--
 .../__snapshots__/BrandButtons.spec.js.snap   | 533 ++++++------------
 .../ButtonDropdowns.spec.js.snap              |  87 +--
 .../__snapshots__/ButtonGroups.spec.js.snap   |  99 ++--
 .../StandardButtons.spec.js.snap              | 177 ++----
 .../charts/__snapshots__/Charts.spec.js.snap  |  31 +-
 .../icons/__snapshots__/Brands.spec.js.snap   |   2 -
 .../__snapshots__/CoreUIIcons.spec.js.snap    |  16 +-
 .../icons/__snapshots__/Flags.spec.js.snap    | 267 ++++++++-
 .../__snapshots__/Alerts.spec.js.snap         |  79 +--
 .../__snapshots__/Badges.spec.js.snap         | 101 +---
 .../__snapshots__/Modals.spec.js.snap         |  48 +-
 .../pages/__snapshots__/Login.spec.js.snap    |  21 +-
 .../pages/__snapshots__/Page404.spec.js.snap  |   5 +-
 .../pages/__snapshots__/Page500.spec.js.snap  |   5 +-
 .../pages/__snapshots__/Register.spec.js.snap |  27 +-
 .../theme/__snapshots__/Colors.spec.js.snap   |   4 -
 .../users/__snapshots__/User.spec.js.snap     |  27 +-
 .../users/__snapshots__/Users.spec.js.snap    |   7 +-
 .../__snapshots__/Widgets.spec.js.snap        | 219 ++++---
 45 files changed, 1329 insertions(+), 2052 deletions(-)
 create mode 100644 tests/e2e/custom-commands/custom-command.js
 create mode 100644 tests/e2e/page-objects/page-object.js

diff --git a/.gitignore b/.gitignore
index c0559e5c..22f7a11f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ node_modules
 
 /tests/e2e/reports/
 selenium-debug.log
+chromedriver.log
 
 # local env files
 .env.local
diff --git a/babel.config.js b/babel.config.js
index 35e76a5b..bfefb06f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    [ "@vue/app" ]
+    ['@babel/preset-env']
   ]
 }
diff --git a/jest.config.js b/jest.config.js
index 0afd6c78..f598a6b1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -8,25 +8,22 @@ module.exports = {
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': '<rootDir>/node_modules/babel-jest'
+    '^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest'
   },
-  transformIgnorePatterns: ["/node_modules/(?!@coreui/icons)"],
+  transformIgnorePatterns: ['/node_modules/(?!@coreui/icons/vue|coreui)'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'
   },
   snapshotSerializers: [
     'jest-serializer-vue'
   ],
-  testMatch: [
-    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
-    '<rootDir>/tests/unit/Dashboard.spec.js'
-  ],
+  testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
   verbose: true,
-  testURL: "http://localhost/",
+  testURL: 'http://localhost/',
   collectCoverage: true,
   collectCoverageFrom: [
-      "src/**/*.{js,vue}",
-      "!**/node_modules/**"
+      'src/**/*.{js,vue}',
+      '!**/node_modules/**'
   ],
-  coverageReporters: ["html", "text-summary"]
+  coverageReporters: ['html', 'text-summary']
 }
diff --git a/tests/e2e/custom-assertions/custom-assertion.js b/tests/e2e/custom-assertions/custom-assertion.js
index 81b398a0..b8e59441 100644
--- a/tests/e2e/custom-assertions/custom-assertion.js
+++ b/tests/e2e/custom-assertions/custom-assertion.js
@@ -1 +1,2 @@
-// empty custom assertion needed for git to keep track of the folder 
\ No newline at end of file
+// empty custom assertion needed for git to keep track of the folder 
+module.exports.assertion = function () {}
\ No newline at end of file
diff --git a/tests/e2e/custom-commands/custom-command.js b/tests/e2e/custom-commands/custom-command.js
new file mode 100644
index 00000000..133cc677
--- /dev/null
+++ b/tests/e2e/custom-commands/custom-command.js
@@ -0,0 +1 @@
+// empty custom command needed for git to keep track of the folder 
\ No newline at end of file
diff --git a/tests/e2e/page-objects/page-object.js b/tests/e2e/page-objects/page-object.js
new file mode 100644
index 00000000..4d8ebc03
--- /dev/null
+++ b/tests/e2e/page-objects/page-object.js
@@ -0,0 +1 @@
+// empty page-object needed for git to keep track of the folder 
\ No newline at end of file
diff --git a/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap b/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
index 89744c07..9c146be1 100644
--- a/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheFooter.spec.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TheFooter.vue renders correctly 1`] = `
-<cfooter-stub>
+<cfooter-stub
+  tag="footer"
+>
   <div>
     <a
       href="https://coreui.io"
diff --git a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
index d16551c0..b29664fe 100644
--- a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
@@ -2,13 +2,16 @@
 
 exports[`TheHeader.vue renders correctly 1`] = `
 <cheader-stub
+  colorscheme="light"
   fixed="true"
-  light="true"
+  light=""
+  tag="header"
   withsubheader="true"
 >
-  <ctoggler
+  <ctoggler-stub
     class="c-header-toggler ml-3"
-    in-header=""
+    inheader="true"
+    tag="button"
   />
    
   <img
@@ -19,7 +22,7 @@ exports[`TheHeader.vue renders correctly 1`] = `
     width="97"
   />
    
-  <cheadernav
+  <cheadernav-stub
     class="d-md-down-none mr-auto"
   >
     <cheadernavitem-stub
@@ -60,9 +63,9 @@ exports[`TheHeader.vue renders correctly 1`] = `
     >
       Settings
     </cheadernavitem-stub>
-  </cheadernav>
+  </cheadernav-stub>
    
-  <cheadernav
+  <cheadernav-stub
     class="mr-4"
   >
     <cheadernavitem-stub
@@ -108,7 +111,7 @@ exports[`TheHeader.vue renders correctly 1`] = `
     </cheadernavitem-stub>
      
     <theheaderdropdownaccnt-stub />
-  </cheadernav>
+  </cheadernav-stub>
    
   <div
     class="c-subheader px-3"
diff --git a/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
index bd59ad94..b17a0aad 100644
--- a/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
@@ -3,9 +3,11 @@
 exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
 <cdropdown-stub
   addmenuclasses="pt-0"
+  caret="true"
   class="c-header-nav-items"
-  nav="true"
-  nocaret="true"
+  flip="true"
+  nav=""
+  no-caret=""
   placement="bottom-end"
   togglertext="Dropdown"
 >
diff --git a/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap b/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
index 8dc2ab0a..4ce594c5 100644
--- a/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
@@ -3,8 +3,10 @@
 exports[`TheSidebar.vue renders correctly 1`] = `
 <csidebar-stub
   breakpoint="lg"
-  dropdownstateonroutechange="openActive"
+  colorscheme="dark"
+  dropdownmode="openActive"
   fixed="true"
+  hideonmobileclick="true"
   show="true"
 >
   <csidebarbrand-stub
diff --git a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
index 91e8fee8..e8e5da39 100644
--- a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+++ b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
@@ -4,15 +4,11 @@ exports[`Dashboard.vue renders correctly 1`] = `
 <div>
   <widgetsdropdown-stub />
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <crow-stub>
+  <ccard-stub>
+    <ccardbody-stub>
+      <crow-stub
+        gutters="true"
+      >
         <ccol-stub
           sm="5"
           tag="div"
@@ -106,12 +102,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
       />
     </ccardbody-stub>
      
-    <ccardfooter-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardfooter-stub>
       <crow-stub
         class="text-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-sm-2 mb-0"
@@ -242,7 +236,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
    
   <widgetsbrand-stub />
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="12"
       tag="div"
@@ -250,16 +246,18 @@ exports[`Dashboard.vue renders correctly 1`] = `
       <ccard-stub
         bodywrapper="true"
         headerhtml="Traffic & Sales"
-        subtitletag="h6"
-        titletag="h4"
       >
-        <crow-stub>
+        <crow-stub
+          gutters="true"
+        >
           <ccol-stub
             lg="6"
             sm="12"
             tag="div"
           >
-            <crow-stub>
+            <crow-stub
+              gutters="true"
+            >
               <ccol-stub
                 sm="6"
                 tag="div"
@@ -609,7 +607,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
             sm="12"
             tag="div"
           >
-            <crow-stub>
+            <crow-stub
+              gutters="true"
+            >
               <ccol-stub
                 sm="6"
                 tag="div"
@@ -784,6 +784,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 >
                   <cicon-stub
                     class="progress-group-icon"
+                    fonticontag="i"
                     height="17"
                     name="socialFacebook"
                   />
@@ -828,6 +829,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 >
                   <cicon-stub
                     class="progress-group-icon"
+                    fonticontag="i"
                     height="17"
                     name="socialTwitter"
                   />
@@ -872,6 +874,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 >
                   <cicon-stub
                     class="progress-group-icon"
+                    fonticontag="i"
                     height="17"
                     name="socialLinkedin"
                   />
@@ -942,6 +945,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
           itemsperpage="10"
           no-sorting=""
+          responsive="true"
         />
       </ccard-stub>
     </ccol-stub>
diff --git a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
index ba04aeb0..f8484e10 100644
--- a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
@@ -42,8 +42,6 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <ol
           class="breadcrumb"
         >
@@ -55,8 +53,9 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="#"
               target="_self"
-              text=<b>Admin</b>
-            />
+            >
+               &lt;b&gt;Admin&lt;/b&gt; 
+            </a>
           </li>
           <li
             class="breadcrumb-item"
@@ -66,14 +65,17 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="#"
               target="_self"
-              text="Manage"
-            />
+            >
+               Manage 
+            </a>
           </li>
           <li
             class="active breadcrumb-item"
             role="presentation"
           >
-            <span />
+            <span>
+              Library
+            </span>
           </li>
         </ol>
          
@@ -88,8 +90,9 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="#"
               target="_self"
-              text="Go to dashboard"
-            />
+            >
+               Go to dashboard 
+            </a>
           </li>
           <li
             class="breadcrumb-item"
@@ -99,8 +102,9 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="#"
               target="_self"
-              text="Go to widgets"
-            />
+            >
+               Go to widgets 
+            </a>
           </li>
           <li
             class="breadcrumb-item"
@@ -110,14 +114,17 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="http://google.com"
               target="_self"
-              text="Go to Google"
-            />
+            >
+               Go to Google 
+            </a>
           </li>
           <li
             class="active breadcrumb-item"
             role="presentation"
           >
-            <span />
+            <span>
+              Current page
+            </span>
           </li>
         </ol>
          
@@ -132,8 +139,9 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="#"
               target="_self"
-              text="Added"
-            />
+            >
+               Added 
+            </a>
           </li>
           <li
             class="font-xl breadcrumb-item"
@@ -143,14 +151,17 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class=""
               href="#"
               target="_self"
-              text="Custom"
-            />
+            >
+               Custom 
+            </a>
           </li>
           <li
             class="active font-xl text-danger breadcrumb-item"
             role="presentation"
           >
-            <span />
+            <span>
+              Classes
+            </span>
           </li>
         </ol>
       </div>
diff --git a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
index ec38ef66..24f42fe1 100644
--- a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
@@ -39,8 +39,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
@@ -106,18 +104,17 @@ exports[`Cards.vue renders correctly 1`] = `
           Card with switch
           
           <label
-            class="float-right switch form-check-label switch-undefined switch-sm switch-pill"
+            class="float-right c-switch form-check-label c-switch-info c-switch-sm c-switch-pill"
           >
             <input
-              class="switch-input form-check-input"
-              color="info"
+              class="c-switch-input form-check-input"
               data-off="Off"
               data-on="On"
               type="checkbox"
               value=""
             />
             <span
-              class="switch-slider"
+              class="c-switch-slider"
             />
           </label>
         </header>
@@ -125,8 +122,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
@@ -149,8 +144,7 @@ exports[`Cards.vue renders correctly 1`] = `
           Card with label
           
           <span
-            class="badge float-right"
-            color="success"
+            class="badge float-right badge-success"
           >
             Success
           </span>
@@ -159,8 +153,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
@@ -183,8 +175,7 @@ exports[`Cards.vue renders correctly 1`] = `
           Card with label
           
           <span
-            class="badge float-right badge-pill"
-            color="danger"
+            class="badge float-right badge-danger badge-pill"
           >
             42
           </span>
@@ -193,8 +184,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         
@@ -211,8 +200,7 @@ exports[`Cards.vue renders correctly 1`] = `
       class="col-sm-6 col-md-4"
     >
       <div
-        border-color="primary"
-        class="card"
+        class="card border-primary"
         header="Card outline primary"
       >
         <!---->
@@ -229,8 +217,7 @@ exports[`Cards.vue renders correctly 1`] = `
       class="col-sm-6 col-md-4"
     >
       <div
-        border-color="secondary"
-        class="card"
+        class="card border-secondary"
         header="Card outline secondary"
       >
         <!---->
@@ -247,16 +234,13 @@ exports[`Cards.vue renders correctly 1`] = `
       class="col-sm-6 col-md-4"
     >
       <div
-        border-color="success"
-        class="card"
+        class="card border-success"
         header="Card outline success"
       >
         <!---->
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -269,8 +253,7 @@ exports[`Cards.vue renders correctly 1`] = `
       class="col-sm-6 col-md-4"
     >
       <div
-        border-color="info"
-        class="card"
+        class="card border-info"
       >
         <header
           class="card-header"
@@ -280,8 +263,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -294,8 +275,7 @@ exports[`Cards.vue renders correctly 1`] = `
       class="col-sm-6 col-md-4"
     >
       <div
-        border-color="warning"
-        class="card"
+        class="card border-warning"
       >
         <header
           class="card-header"
@@ -305,8 +285,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -319,8 +297,7 @@ exports[`Cards.vue renders correctly 1`] = `
       class="col-sm-6 col-md-4"
     >
       <div
-        border-color="danger"
-        class="card"
+        class="card border-danger"
       >
         <header
           class="card-header"
@@ -330,8 +307,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -355,8 +330,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -376,8 +349,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -397,8 +368,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -418,8 +387,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -439,8 +406,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -460,8 +425,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -484,8 +447,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <blockquote
             class="card-blockquote"
           >
@@ -518,8 +479,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <blockquote
             class="card-blockquote"
           >
@@ -552,8 +511,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <blockquote
             class="card-blockquote"
           >
@@ -586,8 +543,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <blockquote
             class="card-blockquote"
           >
@@ -620,8 +575,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <blockquote
             class="card-blockquote"
           >
@@ -654,8 +607,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <blockquote
             class="card-blockquote"
           >
@@ -696,8 +647,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -720,8 +669,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -744,8 +691,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -768,8 +713,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -792,8 +735,6 @@ exports[`Cards.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       
@@ -857,8 +798,6 @@ exports[`Cards.vue renders correctly 1`] = `
           <div
             class="card-body"
           >
-            <!---->
-            <!---->
             
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
             
diff --git a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
index 52032891..b4151b86 100644
--- a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
@@ -43,8 +43,6 @@ exports[`Carousels.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <div
           class="carousel slide"
           style="height: 400px;"
@@ -88,8 +86,9 @@ exports[`Carousels.vue renders correctly 1`] = `
               class="carousel-item"
             >
               <svg
+                blankColor="grey"
                 class="d-block w-100 h-100 img-fluid"
-                style="background-color: grey;"
+                style="background-color: transparent;"
               />
               <div
                 class="carousel-caption"
diff --git a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
index eb4ee116..554985cd 100644
--- a/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Collapses.spec.js.snap
@@ -43,11 +43,8 @@ exports[`Collapses.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <button
-          class="btn"
-          color="primary"
+          class="btn btn-primary"
           id="collapse1"
           type="button"
         >
@@ -59,6 +56,7 @@ exports[`Collapses.vue renders correctly 1`] = `
         <div
           class="mt-2"
           style="display: none;"
+          toggler="collapse1"
         >
           <div
             class="card"
@@ -67,8 +65,6 @@ exports[`Collapses.vue renders correctly 1`] = `
             <div
               class="card-body"
             >
-              <!---->
-              <!---->
               <p
                 class="card-text"
               >
@@ -76,8 +72,7 @@ exports[`Collapses.vue renders correctly 1`] = `
               </p>
                
               <button
-                class="btn btn-sm"
-                color="secondary"
+                class="btn btn-secondary btn-sm"
                 id="collapse2"
                 type="button"
               >
@@ -89,6 +84,7 @@ exports[`Collapses.vue renders correctly 1`] = `
               <div
                 class="mt-2"
                 style="display: none;"
+                toggler="collapse2"
               >
                 <div
                   class="card"
@@ -97,8 +93,6 @@ exports[`Collapses.vue renders correctly 1`] = `
                   <div
                     class="card-body"
                   >
-                    <!---->
-                    <!---->
                     Hello!
                   </div>
                   <!---->
diff --git a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
index 7959e722..6693ffa8 100644
--- a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
@@ -2,18 +2,14 @@
 
 exports[`Jumbotrons.vue renders correctly 1`] = `
 <div>
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -40,10 +36,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
           </div>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cjumbotron-stub
             header="Bootstrap 4"
             lead="Bootstrap 4 Components for Vue.js 2"
@@ -73,14 +66,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
     <ccol-stub
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -94,10 +81,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cjumbotron-stub
             header="Bootstrap 4"
             lead=""
@@ -155,18 +139,14 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -180,16 +160,13 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cjumbotron-stub
-            border-color="dark"
+            bordercolor="dark"
             color="info"
             header="Bootstrap 4"
             tag="div"
-            text-color="white"
+            textcolor="white"
           >
             <p
               class="lead"
diff --git a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
index 8e2da6c7..4aa5ea4f 100644
--- a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
@@ -2,19 +2,15 @@
 
 exports[`ListGroups.vue renders correctly 1`] = `
 <div>
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -41,19 +37,16 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </div>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Cras justo odio
@@ -64,7 +57,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Dapibus ac facilisis in
@@ -75,7 +68,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Morbi leo risus
@@ -86,7 +79,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Porta ac consectetur ac
@@ -97,7 +90,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Vestibulum at eros
@@ -111,14 +104,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -130,19 +117,16 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Cras justo odio
@@ -154,7 +138,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Dapibus ac facilisis in
@@ -165,7 +149,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Morbi leo risus
@@ -176,7 +160,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Porta ac consectetur ac
@@ -187,7 +171,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Vestibulum at eros
@@ -198,19 +182,15 @@ exports[`ListGroups.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -224,12 +204,9 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
@@ -237,7 +214,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Cras justo odio
@@ -248,7 +225,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Dapibus ac facilisis in
@@ -259,7 +236,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Morbi leo risus
@@ -271,7 +248,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Porta ac consectetur ac
@@ -282,7 +259,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Vestibulum at eros
@@ -296,14 +273,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -317,12 +288,9 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
@@ -330,7 +298,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#some-link"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Awesome link
@@ -343,7 +311,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Link with active state
@@ -355,7 +323,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Action links are easy
@@ -368,7 +336,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#foobar"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               Disabled link
@@ -379,19 +347,15 @@ exports[`ListGroups.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -405,12 +369,9 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
@@ -465,14 +426,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -486,12 +441,9 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
@@ -499,7 +451,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               
@@ -525,7 +477,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               
@@ -551,7 +503,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               
@@ -576,19 +528,15 @@ exports[`ListGroups.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -602,19 +550,16 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a default list group item
@@ -626,7 +571,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a primary list group item
@@ -638,7 +583,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a secondary list group item
@@ -650,7 +595,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a success list group item
@@ -662,7 +607,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a danger list group item
@@ -674,7 +619,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a warning list group item
@@ -686,7 +631,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a info list group item
@@ -698,7 +643,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a light list group item
@@ -710,7 +655,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               event="click"
               exactactiveclass="active"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a dark list group item
@@ -724,14 +669,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -745,12 +684,9 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               activeclass="active"
@@ -758,7 +694,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a default list group item
@@ -771,7 +707,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a primary list group item
@@ -784,7 +720,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a secondary list group item
@@ -797,7 +733,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a success list group item
@@ -810,7 +746,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a danger list group item
@@ -823,7 +759,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a warning list group item
@@ -836,7 +772,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a info list group item
@@ -849,7 +785,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a light list group item
@@ -862,7 +798,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               This is a dark list group item
@@ -873,19 +809,15 @@ exports[`ListGroups.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       col="12"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -899,20 +831,15 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <ccardgroup-stub
             deck="true"
           >
             <ccard-stub
               headerhtml=<b>Card with list group</b>
-              subtitletag="h6"
-              titletag="h4"
             >
               <clistgroup-stub
-                tag="div"
+                tag="ul"
               >
                 <clistgroupitem-stub
                   activeclass="active"
@@ -920,7 +847,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
                   exactactiveclass="active"
                   href="#"
                   routertag="a"
-                  tag="div"
+                  tag="li"
                   target="_self"
                 >
                   Cras justo odio
@@ -932,7 +859,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
                   exactactiveclass="active"
                   href="#"
                   routertag="a"
-                  tag="div"
+                  tag="li"
                   target="_self"
                 >
                   Dapibus ac facilisis in
@@ -944,7 +871,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
                   exactactiveclass="active"
                   href="#"
                   routertag="a"
-                  tag="div"
+                  tag="li"
                   target="_self"
                 >
                   Vestibulum at eros
@@ -965,12 +892,10 @@ exports[`ListGroups.vue renders correctly 1`] = `
              
             <ccard-stub
               header=<b>Card with flush list group</b>
-              subtitletag="h6"
-              titletag="h4"
             >
               <clistgroup-stub
                 flush="true"
-                tag="div"
+                tag="ul"
               >
                 <clistgroupitem-stub
                   activeclass="active"
@@ -978,7 +903,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
                   exactactiveclass="active"
                   href="#"
                   routertag="a"
-                  tag="div"
+                  tag="li"
                   target="_self"
                 >
                   Cras justo odio
@@ -990,7 +915,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
                   exactactiveclass="active"
                   href="#"
                   routertag="a"
-                  tag="div"
+                  tag="li"
                   target="_self"
                 >
                   Dapibus ac facilisis in
@@ -1002,17 +927,14 @@ exports[`ListGroups.vue renders correctly 1`] = `
                   exactactiveclass="active"
                   href="#"
                   routertag="a"
-                  tag="div"
+                  tag="li"
                   target="_self"
                 >
                   Vestibulum at eros
                 </clistgroupitem-stub>
               </clistgroup-stub>
                
-              <ccardbody-stub
-                subtitletag="h6"
-                titletag="h4"
-              >
+              <ccardbody-stub>
                 
                 Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
                 nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
@@ -1027,19 +949,15 @@ exports[`ListGroups.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <i
             class="fa fa-align-justify"
           />
@@ -1051,12 +969,9 @@ exports[`ListGroups.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <clistgroup-stub
-            tag="div"
+            tag="ul"
           >
             <clistgroupitem-stub
               active="true"
@@ -1066,7 +981,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               <div
@@ -1104,7 +1019,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               <div
@@ -1147,7 +1062,7 @@ exports[`ListGroups.vue renders correctly 1`] = `
               exactactiveclass="active"
               href="#"
               routertag="a"
-              tag="div"
+              tag="li"
               target="_self"
             >
               <div
diff --git a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
index 53a5d5f0..0e7614f6 100644
--- a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`Navbars.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -36,17 +30,15 @@ exports[`Navbars.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnavbar-stub
         color="info"
         expandable="md"
         tag="nav"
       >
-        <ctoggler
-          innavbar=""
+        <ctoggler-stub
+          innavbar="true"
+          tag="button"
         />
          
         <cnavbarbrand-stub
@@ -101,10 +93,12 @@ exports[`Navbars.vue renders correctly 1`] = `
             <cform-stub
               inline="true"
             >
-              <cinput
+              <cinput-stub
                 class="mr-sm-2"
+                lazy="400"
                 placeholder="Search"
                 size="sm"
+                type="text"
               />
                
               <cbutton-stub
@@ -125,7 +119,9 @@ exports[`Navbars.vue renders correctly 1`] = `
             </cform-stub>
              
             <cdropdown-stub
-              nav="true"
+              caret="true"
+              flip="true"
+              innav="true"
               placement="bottom-end"
               togglertext="Lang"
             >
@@ -171,7 +167,9 @@ exports[`Navbars.vue renders correctly 1`] = `
             </cdropdown-stub>
              
             <cdropdown-stub
-              nav="true"
+              caret="true"
+              flip="true"
+              innav="true"
               placement="bottom-end"
               togglertext="User"
             >
@@ -201,14 +199,8 @@ exports[`Navbars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -222,10 +214,7 @@ exports[`Navbars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnavbar-stub
         color="faded"
         light="true"
@@ -252,14 +241,8 @@ exports[`Navbars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -273,18 +256,16 @@ exports[`Navbars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnavbar-stub
         color="light"
         light="true"
         tag="nav"
         toggleable="sm"
       >
-        <ctoggler
-          innavbar=""
+        <ctoggler-stub
+          innavbar="true"
+          tag="button"
         />
          
         <cnavbarbrand-stub
@@ -316,14 +297,8 @@ exports[`Navbars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -337,17 +312,15 @@ exports[`Navbars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnavbar-stub
         color="primary"
         expandable="sm"
         tag="nav"
       >
-        <ctoggler
-          innavbar=""
+        <ctoggler-stub
+          innavbar="true"
+          tag="button"
         />
          
         <ccollapse-stub
@@ -383,7 +356,9 @@ exports[`Navbars.vue renders correctly 1`] = `
             </cnavitem-stub>
              
             <cdropdown-stub
-              nav="true"
+              caret="true"
+              flip="true"
+              innav="true"
               placement="bottom-end"
               togglertext="Lang"
             >
@@ -429,7 +404,9 @@ exports[`Navbars.vue renders correctly 1`] = `
             </cdropdown-stub>
              
             <cdropdown-stub
-              nav="true"
+              caret="true"
+              flip="true"
+              innav="true"
               placement="bottom-end"
               togglertext="User"
             >
@@ -459,14 +436,8 @@ exports[`Navbars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -480,10 +451,7 @@ exports[`Navbars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnavbar-stub
         color="light"
         light="true"
@@ -492,10 +460,12 @@ exports[`Navbars.vue renders correctly 1`] = `
         <cform-stub
           inline="true"
         >
-          <cinput
+          <cinput-stub
             class="mr-sm-2"
+            lazy="400"
             placeholder="Search"
             size="sm"
+            type="text"
           />
            
           <cbutton-stub
@@ -515,14 +485,8 @@ exports[`Navbars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -536,10 +500,7 @@ exports[`Navbars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnavbar-stub
         color="light"
         light="true"
@@ -548,9 +509,11 @@ exports[`Navbars.vue renders correctly 1`] = `
         <cform-stub
           inline="true"
         >
-          <cinput
+          <cinput-stub
             class="mr-sm-2"
+            lazy="400"
             placeholder="Username"
+            type="text"
           />
         </cform-stub>
       </cnavbar-stub>
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
index ea26ee34..337bcc4d 100644
--- a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`Navs.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -35,10 +29,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub>
         <cnavitem-stub
           active="true"
@@ -88,14 +79,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -109,10 +94,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub>
         <cnavitem-stub
           active="true"
@@ -169,14 +151,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -190,10 +166,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub
         tabs="true"
       >
@@ -252,14 +225,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -273,10 +240,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub
         pills="true"
       >
@@ -329,14 +293,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -350,10 +308,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub
         fill="true"
         tabs="true"
@@ -407,14 +362,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -428,10 +377,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub
         justified="true"
         tabs="true"
@@ -485,14 +431,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -506,10 +446,7 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cnav-stub
         pills="true"
       >
@@ -538,8 +475,10 @@ exports[`Navs.vue renders correctly 1`] = `
          
         <cdropdown-stub
           button-content="Dropdown"
+          caret="true"
+          flip="true"
           id="nav7_ddown"
-          nav="true"
+          nav=""
           placement="bottom-end"
           togglertext="Dropdown"
         >
@@ -581,14 +520,8 @@ exports[`Navs.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -602,11 +535,10 @@ exports[`Navs.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <crow-stub>
+    <ccardbody-stub>
+      <crow-stub
+        gutters="true"
+      >
         <ccol-stub
           class="m-0"
           col="3"
diff --git a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
index 03efd817..6347317c 100644
--- a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`Paginations.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -36,10 +30,7 @@ exports[`Paginations.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <h6>
         Default
       </h6>
@@ -47,13 +38,16 @@ exports[`Paginations.vue renders correctly 1`] = `
       <cpagination-stub
         activepage="3"
         align="start"
+        arrows="true"
+        dots="true"
+        doublearrows="true"
         firstbuttonhtml="&laquo;"
         lastbuttonhtml="&raquo;"
         limit="5"
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        responsive="true"
+        responsive=""
         size="md"
       />
        
@@ -66,6 +60,9 @@ exports[`Paginations.vue renders correctly 1`] = `
       <cpagination-stub
         activepage="3"
         align="start"
+        arrows="true"
+        dots="true"
+        doublearrows="true"
         firstbuttonhtml="&laquo;"
         lastbuttonhtml="&raquo;"
         limit="5"
@@ -85,13 +82,16 @@ exports[`Paginations.vue renders correctly 1`] = `
         <cpagination-stub
           activepage="3"
           align="start"
+          arrows="true"
+          dots="true"
+          doublearrows="true"
           firstbuttonhtml="&laquo;"
           lastbuttonhtml="&raquo;"
           limit="5"
           nextbuttonhtml="&rsaquo;"
           pages="10"
           previousbuttonhtml="&lsaquo;"
-          responsive="true"
+          responsive=""
           size="lg"
         />
          
@@ -104,14 +104,8 @@ exports[`Paginations.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -125,10 +119,7 @@ exports[`Paginations.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <h6>
         Left alignment (default)
       </h6>
@@ -136,6 +127,9 @@ exports[`Paginations.vue renders correctly 1`] = `
       <cpagination-stub
         activepage="3"
         align="start"
+        arrows="true"
+        dots="true"
+        doublearrows="true"
         firstbuttonhtml="&laquo;"
         lastbuttonhtml="&raquo;"
         limit="5"
@@ -154,6 +148,9 @@ exports[`Paginations.vue renders correctly 1`] = `
       <cpagination-stub
         activepage="3"
         align="center"
+        arrows="true"
+        dots="true"
+        doublearrows="true"
         firstbuttonhtml="&laquo;"
         lastbuttonhtml="&raquo;"
         limit="5"
@@ -172,6 +169,9 @@ exports[`Paginations.vue renders correctly 1`] = `
       <cpagination-stub
         activepage="3"
         align="end"
+        arrows="true"
+        dots="true"
+        doublearrows="true"
         firstbuttonhtml="&laquo;"
         lastbuttonhtml="&raquo;"
         limit="5"
diff --git a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
index 6f7dd34f..1dec7fb6 100644
--- a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`ProgressBars.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -36,15 +30,12 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cprogress-stub
         animated="true"
         max="100"
         precision="0"
-        show-percentage=""
+        showpercentage="true"
         value="73"
       />
        
@@ -94,14 +85,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -114,10 +99,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <h6>
         No label
       </h6>
@@ -149,7 +131,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         class="mb-3"
         max="50"
         precision="0"
-        show-percentage=""
+        showpercentage="true"
         value="33.333333333"
       />
        
@@ -173,20 +155,14 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         class="mb-3"
         max="50"
         precision="2"
-        show-percentage=""
+        showpercentage="true"
         value="33.333333333"
       />
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -200,10 +176,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <h6>
         Default width
       </h6>
@@ -242,14 +215,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -263,10 +230,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <h6>
         Default height
       </h6>
@@ -275,7 +239,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         class="mb-3"
         max="100"
         precision="0"
-        show-percentage=""
+        showpercentage="true"
         value="75"
       />
        
@@ -288,7 +252,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         height="2rem"
         max="100"
         precision="0"
-        show-percentage=""
+        showpercentage="true"
         value="75"
       />
        
@@ -297,7 +261,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         height="20px"
         max="100"
         precision="0"
-        show-percentage=""
+        showpercentage="true"
         value="75"
       />
        
@@ -310,14 +274,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -331,10 +289,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <div
         class="row mb-1"
       >
@@ -478,14 +433,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -499,10 +448,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cprogress-stub
         class="mb-2"
         color="success"
@@ -555,14 +501,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -576,10 +516,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cprogress-stub
         animated="true"
         class="mb-2"
@@ -635,14 +572,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -656,10 +587,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <cprogress-stub
         class="mb-3"
         max="100"
@@ -692,7 +620,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
         class="mb-3"
         max="100"
         precision="0"
-        show-percentage=""
+        showpercentage="true"
         value="0"
       >
         <cprogressbar-stub
@@ -757,7 +685,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           color="primary"
           max="100"
           precision="0"
-          show-percentage=""
+          showpercentage="true"
           value="15"
         />
          
@@ -766,7 +694,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           color="success"
           max="100"
           precision="0"
-          show-percentage=""
+          showpercentage="true"
           value="30"
         />
          
@@ -774,7 +702,7 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           color="info"
           max="100"
           precision="0"
-          show-percentage=""
+          showpercentage="true"
           striped="true"
           value="20"
         />
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
index 060bab11..c7774cdb 100644
--- a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -2,20 +2,16 @@
 
 exports[`Switches.vue renders correctly 1`] = `
 <div>
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Radio switches
           
@@ -50,10 +46,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </div>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             class="mx-1"
             color="primary"
@@ -148,20 +141,16 @@ exports[`Switches.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch default
           
@@ -178,10 +167,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </cbadge-stub>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -248,23 +234,14 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch pills
         
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -345,23 +322,14 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           3d Switch
         
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -442,14 +410,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           3d Switch 
           <small>
@@ -459,10 +421,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -551,14 +510,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           3d Switch 
           <small>
@@ -568,10 +521,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -661,14 +611,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           3d Switch 
           <small>
@@ -678,10 +622,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -780,14 +721,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           3d Switch 
           <small>
@@ -797,10 +732,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -908,14 +840,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           3d Switch 
           <small>
@@ -925,10 +851,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1018,14 +941,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1035,10 +952,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1119,14 +1033,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1136,10 +1044,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1229,14 +1134,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1246,10 +1145,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1330,14 +1226,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1347,10 +1237,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1440,14 +1327,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1457,10 +1338,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1532,14 +1410,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1549,10 +1421,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1633,14 +1502,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1650,10 +1513,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1734,14 +1594,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1751,10 +1605,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1844,14 +1695,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1861,10 +1706,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -1945,14 +1787,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -1962,10 +1798,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2055,14 +1888,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -2072,10 +1899,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2167,14 +1991,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -2184,10 +2002,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2286,14 +2101,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -2303,10 +2112,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2405,14 +2211,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -2422,10 +2222,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2533,14 +2330,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -2550,10 +2341,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2652,14 +2440,8 @@ exports[`Switches.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Switch 
           <small>
@@ -2669,10 +2451,7 @@ exports[`Switches.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cswitch-stub
             checked="true"
             class="mx-1"
@@ -2779,14 +2558,8 @@ exports[`Switches.vue renders correctly 1`] = `
       md="12"
       tag="div"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Sizes
         
@@ -2794,8 +2567,6 @@ exports[`Switches.vue renders correctly 1`] = `
          
         <ccardbody-stub
           class="p-0"
-          subtitletag="h6"
-          titletag="h4"
         >
           <ctable-stub
             class="table-align-middle mb-0"
@@ -2805,6 +2576,7 @@ exports[`Switches.vue renders correctly 1`] = `
             items="[object Object],[object Object],[object Object]"
             itemsperpage="10"
             no-sorting=""
+            responsive="true"
             striped="true"
           />
         </ccardbody-stub>
diff --git a/tests/unit/views/base/__snapshots__/Table.spec.js.snap b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
index 5dbcab06..7f8b525b 100644
--- a/tests/unit/views/base/__snapshots__/Table.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
@@ -4,14 +4,13 @@ exports[`Table.vue renders correctly 1`] = `
 <ccard-stub
   bodywrapper="true"
   header="Table"
-  subtitletag="h6"
-  titletag="h4"
 >
   <ctable-stub
     defaultsorter="[object Object]"
     fields="username,registered,role,status"
     itemsperpage="5"
     pagination="true"
+    responsive="true"
   />
 </ccard-stub>
 `;
diff --git a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
index c134730c..bedd16d7 100644
--- a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
@@ -2,7 +2,9 @@
 
 exports[`Tables.vue renders correctly 1`] = `
 <div>
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="6"
       tag="div"
@@ -27,7 +29,9 @@ exports[`Tables.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="6"
       tag="div"
@@ -54,7 +58,9 @@ exports[`Tables.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       sm="12"
       tag="div"
@@ -72,7 +78,9 @@ exports[`Tables.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       sm="12"
       tag="div"
diff --git a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
index d97a13fd..4eaa320f 100644
--- a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
@@ -2,20 +2,16 @@
 
 exports[`Tabs.vue renders correctly 1`] = `
 <div>
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="6"
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Tabs
           
@@ -37,11 +33,9 @@ exports[`Tabs.vue renders correctly 1`] = `
           </div>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <ctabs-stub
+            fade="true"
             tabs="true"
           >
             <ctab-stub
@@ -91,24 +85,16 @@ exports[`Tabs.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Tabs
         
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <ctabs-stub
+            fade="true"
             pills="true"
             tabs="true"
           >
@@ -159,24 +145,16 @@ exports[`Tabs.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Tabs with icons
         
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <ctabs-stub
+            fade="true"
             tabs="true"
           >
             <ctab-stub
@@ -235,25 +213,17 @@ exports[`Tabs.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Tabs with icons
         
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <ctabs-stub
             addtabclasses="mt-1"
+            fade="true"
             tabs="true"
           >
             <ctab-stub
@@ -318,24 +288,16 @@ exports[`Tabs.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           
           Tabs vertical
         
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <ctabs-stub
+            fade="true"
             pills="true"
             tabs="true"
             vertical="true"
diff --git a/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap b/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
index 41991872..03e09061 100644
--- a/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`Tooltips.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -43,13 +37,12 @@ exports[`Tooltips.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <crow-stub>
+    <ccardbody-stub>
+      <crow-stub
+        gutters="true"
+      >
         <ccol-stub
-          col="4"
+          col="6"
           tag="div"
         >
           <div
@@ -72,7 +65,7 @@ exports[`Tooltips.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          col="4"
+          col="6"
           tag="div"
         >
           <div
@@ -93,41 +86,12 @@ exports[`Tooltips.vue renders correctly 1`] = `
             </cbutton-stub>
           </div>
         </ccol-stub>
-         
-        <ccol-stub
-          col="4"
-          tag="div"
-        >
-          <div
-            class="text-center my-3"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Click me
-            
-            </cbutton-stub>
-          </div>
-        </ccol-stub>
       </crow-stub>
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="fa fa-align-justify"
       />
@@ -141,14 +105,13 @@ exports[`Tooltips.vue renders correctly 1`] = `
       </small>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <div
         class="my-3"
       >
-        <crow-stub>
+        <crow-stub
+          gutters="true"
+        >
           <ccol-stub
             class="py-4 text-center"
             md="4"
diff --git a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
index d91c5010..04e3e7f1 100644
--- a/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
@@ -39,8 +39,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <small>
           Usage 
         </small>
@@ -65,8 +63,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn btn-sm"
-            color="facebook"
+            class="btn btn-facebook btn-sm"
             name="facebook"
             type="button"
           >
@@ -85,8 +82,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="twitter"
+            class="btn btn-twitter btn-sm"
             name="twitter"
             type="button"
           >
@@ -105,8 +101,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="linkedin"
+            class="btn btn-linkedin btn-sm"
             name="linkedin"
             type="button"
           >
@@ -125,8 +120,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="flickr"
+            class="btn btn-flickr btn-sm"
             name="flickr"
             type="button"
           >
@@ -145,8 +139,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="tumblr"
+            class="btn btn-tumblr btn-sm"
             name="tumblr"
             type="button"
           >
@@ -165,8 +158,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="xing"
+            class="btn btn-xing btn-sm"
             name="xing"
             type="button"
           >
@@ -185,8 +177,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="github"
+            class="btn btn-github btn-sm"
             name="github"
             type="button"
           >
@@ -205,8 +196,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="stack-overflow"
+            class="btn btn-stack-overflow btn-sm"
             name="stack-overflow"
             type="button"
           >
@@ -225,8 +215,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="youtube"
+            class="btn btn-youtube btn-sm"
             name="youtube"
             type="button"
           >
@@ -245,8 +234,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="dribbble"
+            class="btn btn-dribbble btn-sm"
             name="dribbble"
             type="button"
           >
@@ -265,8 +253,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="instagram"
+            class="btn btn-instagram btn-sm"
             name="instagram"
             type="button"
           >
@@ -285,8 +272,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="pinterest"
+            class="btn btn-pinterest btn-sm"
             name="pinterest"
             type="button"
           >
@@ -305,8 +291,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="vk"
+            class="btn btn-vk btn-sm"
             name="vk"
             type="button"
           >
@@ -325,8 +310,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="yahoo"
+            class="btn btn-yahoo btn-sm"
             name="yahoo"
             type="button"
           >
@@ -345,8 +329,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="behance"
+            class="btn btn-behance btn-sm"
             name="behance"
             type="button"
           >
@@ -365,8 +348,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="reddit"
+            class="btn btn-reddit btn-sm"
             name="reddit"
             type="button"
           >
@@ -385,8 +367,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="vimeo"
+            class="btn btn-vimeo btn-sm"
             name="vimeo"
             type="button"
           >
@@ -412,13 +393,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn"
-            color="facebook"
+            class="btn btn-facebook"
             name="facebook"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -432,13 +412,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="twitter"
+            class="btn btn-twitter"
             name="twitter"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -452,13 +431,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="linkedin"
+            class="btn btn-linkedin"
             name="linkedin"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -472,13 +450,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="flickr"
+            class="btn btn-flickr"
             name="flickr"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -492,13 +469,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="tumblr"
+            class="btn btn-tumblr"
             name="tumblr"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 320 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -512,13 +488,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="xing"
+            class="btn btn-xing"
             name="xing"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 384 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -532,13 +507,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="github"
+            class="btn btn-github"
             name="github"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 496 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -552,13 +526,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="stack-overflow"
+            class="btn btn-stack-overflow"
             name="stack-overflow"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 384 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -572,13 +545,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="youtube"
+            class="btn btn-youtube"
             name="youtube"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 576 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -592,13 +564,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="dribbble"
+            class="btn btn-dribbble"
             name="dribbble"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -612,13 +583,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="instagram"
+            class="btn btn-instagram"
             name="instagram"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -632,13 +602,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="pinterest"
+            class="btn btn-pinterest"
             name="pinterest"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 496 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -652,13 +621,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="vk"
+            class="btn btn-vk"
             name="vk"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 576 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -672,13 +640,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="yahoo"
+            class="btn btn-yahoo"
             name="yahoo"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -692,13 +659,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="behance"
+            class="btn btn-behance"
             name="behance"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 576 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -712,13 +678,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="reddit"
+            class="btn btn-reddit"
             name="reddit"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -732,13 +697,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="vimeo"
+            class="btn btn-vimeo"
             name="vimeo"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -765,8 +729,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn btn-lg"
-            color="facebook"
+            class="btn btn-facebook btn-lg"
             name="facebook"
             type="button"
           >
@@ -785,8 +748,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="twitter"
+            class="btn btn-twitter btn-lg"
             name="twitter"
             type="button"
           >
@@ -805,8 +767,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="linkedin"
+            class="btn btn-linkedin btn-lg"
             name="linkedin"
             type="button"
           >
@@ -825,8 +786,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="flickr"
+            class="btn btn-flickr btn-lg"
             name="flickr"
             type="button"
           >
@@ -845,8 +805,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="tumblr"
+            class="btn btn-tumblr btn-lg"
             name="tumblr"
             type="button"
           >
@@ -865,8 +824,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="xing"
+            class="btn btn-xing btn-lg"
             name="xing"
             type="button"
           >
@@ -885,8 +843,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="github"
+            class="btn btn-github btn-lg"
             name="github"
             type="button"
           >
@@ -905,8 +862,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="stack-overflow"
+            class="btn btn-stack-overflow btn-lg"
             name="stack-overflow"
             type="button"
           >
@@ -925,8 +881,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="youtube"
+            class="btn btn-youtube btn-lg"
             name="youtube"
             type="button"
           >
@@ -945,8 +900,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="dribbble"
+            class="btn btn-dribbble btn-lg"
             name="dribbble"
             type="button"
           >
@@ -965,8 +919,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="instagram"
+            class="btn btn-instagram btn-lg"
             name="instagram"
             type="button"
           >
@@ -985,8 +938,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="pinterest"
+            class="btn btn-pinterest btn-lg"
             name="pinterest"
             type="button"
           >
@@ -1005,8 +957,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="vk"
+            class="btn btn-vk btn-lg"
             name="vk"
             type="button"
           >
@@ -1025,8 +976,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="yahoo"
+            class="btn btn-yahoo btn-lg"
             name="yahoo"
             type="button"
           >
@@ -1045,8 +995,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="behance"
+            class="btn btn-behance btn-lg"
             name="behance"
             type="button"
           >
@@ -1065,8 +1014,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="reddit"
+            class="btn btn-reddit btn-lg"
             name="reddit"
             type="button"
           >
@@ -1085,8 +1033,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="vimeo"
+            class="btn btn-vimeo btn-lg"
             name="vimeo"
             type="button"
           >
@@ -1132,8 +1079,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <small>
           Usage 
         </small>
@@ -1156,8 +1101,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn btn-sm"
-            color="facebook"
+            class="btn btn-facebook btn-sm"
             name="facebook"
             type="button"
           >
@@ -1172,8 +1116,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="twitter"
+            class="btn btn-twitter btn-sm"
             name="twitter"
             type="button"
           >
@@ -1188,8 +1131,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="linkedin"
+            class="btn btn-linkedin btn-sm"
             name="linkedin"
             type="button"
           >
@@ -1204,8 +1146,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="flickr"
+            class="btn btn-flickr btn-sm"
             name="flickr"
             type="button"
           >
@@ -1220,8 +1161,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="tumblr"
+            class="btn btn-tumblr btn-sm"
             name="tumblr"
             type="button"
           >
@@ -1236,8 +1176,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="xing"
+            class="btn btn-xing btn-sm"
             name="xing"
             type="button"
           >
@@ -1252,8 +1191,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="github"
+            class="btn btn-github btn-sm"
             name="github"
             type="button"
           >
@@ -1268,8 +1206,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="stack-overflow"
+            class="btn btn-stack-overflow btn-sm"
             name="stack-overflow"
             type="button"
           >
@@ -1284,8 +1221,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="youtube"
+            class="btn btn-youtube btn-sm"
             name="youtube"
             type="button"
           >
@@ -1300,8 +1236,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="dribbble"
+            class="btn btn-dribbble btn-sm"
             name="dribbble"
             type="button"
           >
@@ -1316,8 +1251,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="instagram"
+            class="btn btn-instagram btn-sm"
             name="instagram"
             type="button"
           >
@@ -1332,8 +1266,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="pinterest"
+            class="btn btn-pinterest btn-sm"
             name="pinterest"
             type="button"
           >
@@ -1348,8 +1281,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="vk"
+            class="btn btn-vk btn-sm"
             name="vk"
             type="button"
           >
@@ -1364,8 +1296,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="yahoo"
+            class="btn btn-yahoo btn-sm"
             name="yahoo"
             type="button"
           >
@@ -1380,8 +1311,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="behance"
+            class="btn btn-behance btn-sm"
             name="behance"
             type="button"
           >
@@ -1396,8 +1326,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="reddit"
+            class="btn btn-reddit btn-sm"
             name="reddit"
             type="button"
           >
@@ -1412,8 +1341,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-sm"
-            color="vimeo"
+            class="btn btn-vimeo btn-sm"
             name="vimeo"
             type="button"
           >
@@ -1435,13 +1363,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn"
-            color="facebook"
+            class="btn btn-facebook"
             name="facebook"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1451,13 +1378,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="twitter"
+            class="btn btn-twitter"
             name="twitter"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1467,13 +1393,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="linkedin"
+            class="btn btn-linkedin"
             name="linkedin"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1483,13 +1408,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="flickr"
+            class="btn btn-flickr"
             name="flickr"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1499,13 +1423,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="tumblr"
+            class="btn btn-tumblr"
             name="tumblr"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 320 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1515,13 +1438,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="xing"
+            class="btn btn-xing"
             name="xing"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 384 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1531,13 +1453,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="github"
+            class="btn btn-github"
             name="github"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 496 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1547,13 +1468,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="stack-overflow"
+            class="btn btn-stack-overflow"
             name="stack-overflow"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 384 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1563,13 +1483,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="youtube"
+            class="btn btn-youtube"
             name="youtube"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 576 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1579,13 +1498,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="dribbble"
+            class="btn btn-dribbble"
             name="dribbble"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1595,13 +1513,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="instagram"
+            class="btn btn-instagram"
             name="instagram"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1611,13 +1528,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="pinterest"
+            class="btn btn-pinterest"
             name="pinterest"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 496 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1627,13 +1543,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="vk"
+            class="btn btn-vk"
             name="vk"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 576 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1643,13 +1558,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="yahoo"
+            class="btn btn-yahoo"
             name="yahoo"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1659,13 +1573,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="behance"
+            class="btn btn-behance"
             name="behance"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 576 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1675,13 +1588,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="reddit"
+            class="btn btn-reddit"
             name="reddit"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 512 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1691,13 +1603,12 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn"
-            color="vimeo"
+            class="btn btn-vimeo"
             name="vimeo"
             type="button"
           >
             <svg
-              class="c-icon c-icon-undefined"
+              class="c-icon"
               viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -1720,8 +1631,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn btn-lg"
-            color="facebook"
+            class="btn btn-facebook btn-lg"
             name="facebook"
             type="button"
           >
@@ -1736,8 +1646,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="twitter"
+            class="btn btn-twitter btn-lg"
             name="twitter"
             type="button"
           >
@@ -1752,8 +1661,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="linkedin"
+            class="btn btn-linkedin btn-lg"
             name="linkedin"
             type="button"
           >
@@ -1768,8 +1676,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="flickr"
+            class="btn btn-flickr btn-lg"
             name="flickr"
             type="button"
           >
@@ -1784,8 +1691,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="tumblr"
+            class="btn btn-tumblr btn-lg"
             name="tumblr"
             type="button"
           >
@@ -1800,8 +1706,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="xing"
+            class="btn btn-xing btn-lg"
             name="xing"
             type="button"
           >
@@ -1816,8 +1721,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="github"
+            class="btn btn-github btn-lg"
             name="github"
             type="button"
           >
@@ -1832,8 +1736,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="stack-overflow"
+            class="btn btn-stack-overflow btn-lg"
             name="stack-overflow"
             type="button"
           >
@@ -1848,8 +1751,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="youtube"
+            class="btn btn-youtube btn-lg"
             name="youtube"
             type="button"
           >
@@ -1864,8 +1766,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="dribbble"
+            class="btn btn-dribbble btn-lg"
             name="dribbble"
             type="button"
           >
@@ -1880,8 +1781,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="instagram"
+            class="btn btn-instagram btn-lg"
             name="instagram"
             type="button"
           >
@@ -1896,8 +1796,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="pinterest"
+            class="btn btn-pinterest btn-lg"
             name="pinterest"
             type="button"
           >
@@ -1912,8 +1811,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="vk"
+            class="btn btn-vk btn-lg"
             name="vk"
             type="button"
           >
@@ -1928,8 +1826,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="yahoo"
+            class="btn btn-yahoo btn-lg"
             name="yahoo"
             type="button"
           >
@@ -1944,8 +1841,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="behance"
+            class="btn btn-behance btn-lg"
             name="behance"
             type="button"
           >
@@ -1960,8 +1856,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="reddit"
+            class="btn btn-reddit btn-lg"
             name="reddit"
             type="button"
           >
@@ -1976,8 +1871,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </svg>
           </button>
           <button
-            class="btn btn-lg"
-            color="vimeo"
+            class="btn btn-vimeo btn-lg"
             name="vimeo"
             type="button"
           >
@@ -2019,8 +1913,6 @@ exports[`BrandButtons.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <small>
           Usage 
         </small>
@@ -2045,8 +1937,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn btn-sm"
-            color="facebook"
+            class="btn btn-facebook btn-sm"
             name="facebook"
             type="button"
           >
@@ -2055,8 +1946,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="twitter"
+            class="btn btn-twitter btn-sm"
             name="twitter"
             type="button"
           >
@@ -2065,8 +1955,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="linkedin"
+            class="btn btn-linkedin btn-sm"
             name="linkedin"
             type="button"
           >
@@ -2075,8 +1964,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="flickr"
+            class="btn btn-flickr btn-sm"
             name="flickr"
             type="button"
           >
@@ -2085,8 +1973,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="tumblr"
+            class="btn btn-tumblr btn-sm"
             name="tumblr"
             type="button"
           >
@@ -2095,8 +1982,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="xing"
+            class="btn btn-xing btn-sm"
             name="xing"
             type="button"
           >
@@ -2105,8 +1991,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="github"
+            class="btn btn-github btn-sm"
             name="github"
             type="button"
           >
@@ -2115,8 +2000,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="stack-overflow"
+            class="btn btn-stack-overflow btn-sm"
             name="stack-overflow"
             type="button"
           >
@@ -2125,8 +2009,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="youtube"
+            class="btn btn-youtube btn-sm"
             name="youtube"
             type="button"
           >
@@ -2135,8 +2018,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="dribbble"
+            class="btn btn-dribbble btn-sm"
             name="dribbble"
             type="button"
           >
@@ -2145,8 +2027,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="instagram"
+            class="btn btn-instagram btn-sm"
             name="instagram"
             type="button"
           >
@@ -2155,8 +2036,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="pinterest"
+            class="btn btn-pinterest btn-sm"
             name="pinterest"
             type="button"
           >
@@ -2165,8 +2045,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="vk"
+            class="btn btn-vk btn-sm"
             name="vk"
             type="button"
           >
@@ -2175,8 +2054,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="yahoo"
+            class="btn btn-yahoo btn-sm"
             name="yahoo"
             type="button"
           >
@@ -2185,8 +2063,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="behance"
+            class="btn btn-behance btn-sm"
             name="behance"
             type="button"
           >
@@ -2195,8 +2072,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="reddit"
+            class="btn btn-reddit btn-sm"
             name="reddit"
             type="button"
           >
@@ -2205,8 +2081,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-sm"
-            color="vimeo"
+            class="btn btn-vimeo btn-sm"
             name="vimeo"
             type="button"
           >
@@ -2222,8 +2097,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn"
-            color="facebook"
+            class="btn btn-facebook"
             name="facebook"
             type="button"
           >
@@ -2232,8 +2106,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="twitter"
+            class="btn btn-twitter"
             name="twitter"
             type="button"
           >
@@ -2242,8 +2115,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="linkedin"
+            class="btn btn-linkedin"
             name="linkedin"
             type="button"
           >
@@ -2252,8 +2124,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="flickr"
+            class="btn btn-flickr"
             name="flickr"
             type="button"
           >
@@ -2262,8 +2133,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="tumblr"
+            class="btn btn-tumblr"
             name="tumblr"
             type="button"
           >
@@ -2272,8 +2142,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="xing"
+            class="btn btn-xing"
             name="xing"
             type="button"
           >
@@ -2282,8 +2151,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="github"
+            class="btn btn-github"
             name="github"
             type="button"
           >
@@ -2292,8 +2160,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="stack-overflow"
+            class="btn btn-stack-overflow"
             name="stack-overflow"
             type="button"
           >
@@ -2302,8 +2169,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="youtube"
+            class="btn btn-youtube"
             name="youtube"
             type="button"
           >
@@ -2312,8 +2178,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="dribbble"
+            class="btn btn-dribbble"
             name="dribbble"
             type="button"
           >
@@ -2322,8 +2187,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="instagram"
+            class="btn btn-instagram"
             name="instagram"
             type="button"
           >
@@ -2332,8 +2196,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="pinterest"
+            class="btn btn-pinterest"
             name="pinterest"
             type="button"
           >
@@ -2342,8 +2205,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="vk"
+            class="btn btn-vk"
             name="vk"
             type="button"
           >
@@ -2352,8 +2214,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="yahoo"
+            class="btn btn-yahoo"
             name="yahoo"
             type="button"
           >
@@ -2362,8 +2223,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="behance"
+            class="btn btn-behance"
             name="behance"
             type="button"
           >
@@ -2372,8 +2232,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="reddit"
+            class="btn btn-reddit"
             name="reddit"
             type="button"
           >
@@ -2382,8 +2241,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn"
-            color="vimeo"
+            class="btn btn-vimeo"
             name="vimeo"
             type="button"
           >
@@ -2405,8 +2263,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
          
         <p>
           <button
-            class="btn btn-lg"
-            color="facebook"
+            class="btn btn-facebook btn-lg"
             name="facebook"
             type="button"
           >
@@ -2415,8 +2272,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="twitter"
+            class="btn btn-twitter btn-lg"
             name="twitter"
             type="button"
           >
@@ -2425,8 +2281,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="linkedin"
+            class="btn btn-linkedin btn-lg"
             name="linkedin"
             type="button"
           >
@@ -2435,8 +2290,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="flickr"
+            class="btn btn-flickr btn-lg"
             name="flickr"
             type="button"
           >
@@ -2445,8 +2299,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="tumblr"
+            class="btn btn-tumblr btn-lg"
             name="tumblr"
             type="button"
           >
@@ -2455,8 +2308,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="xing"
+            class="btn btn-xing btn-lg"
             name="xing"
             type="button"
           >
@@ -2465,8 +2317,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="github"
+            class="btn btn-github btn-lg"
             name="github"
             type="button"
           >
@@ -2475,8 +2326,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="stack-overflow"
+            class="btn btn-stack-overflow btn-lg"
             name="stack-overflow"
             type="button"
           >
@@ -2485,8 +2335,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="youtube"
+            class="btn btn-youtube btn-lg"
             name="youtube"
             type="button"
           >
@@ -2495,8 +2344,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="dribbble"
+            class="btn btn-dribbble btn-lg"
             name="dribbble"
             type="button"
           >
@@ -2505,8 +2353,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="instagram"
+            class="btn btn-instagram btn-lg"
             name="instagram"
             type="button"
           >
@@ -2515,8 +2362,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="pinterest"
+            class="btn btn-pinterest btn-lg"
             name="pinterest"
             type="button"
           >
@@ -2525,8 +2371,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="vk"
+            class="btn btn-vk btn-lg"
             name="vk"
             type="button"
           >
@@ -2535,8 +2380,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="yahoo"
+            class="btn btn-yahoo btn-lg"
             name="yahoo"
             type="button"
           >
@@ -2545,8 +2389,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="behance"
+            class="btn btn-behance btn-lg"
             name="behance"
             type="button"
           >
@@ -2555,8 +2398,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="reddit"
+            class="btn btn-reddit btn-lg"
             name="reddit"
             type="button"
           >
@@ -2565,8 +2407,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
             </span>
           </button>
           <button
-            class="btn btn-lg"
-            color="vimeo"
+            class="btn btn-vimeo btn-lg"
             name="vimeo"
             type="button"
           >
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
index 8797e0fb..0b516a34 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
@@ -44,17 +44,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <div>
             <div
               class="m-2 dropdown"
-              color="secondary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-secondary"
               >
                 Dropdown Button
               </button>
@@ -120,12 +117,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
           <div>
             <div
               class="m-2 dropdown"
-              color="secondary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-secondary"
               >
                 Dropdown with divider
               </button>
@@ -171,12 +167,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
           <div>
             <div
               class="m-2 dropdown"
-              color="secondary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-secondary"
               >
                 Dropdown with header
               </button>
@@ -241,17 +236,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <div>
             <div
               class="m-2 d-inline-block dropdown"
-              color="primary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-primary"
               >
                 Left align
               </button>
@@ -290,12 +282,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              
             <div
               class="m-2 d-inline-block dropdown"
-              color="primary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-primary"
               >
                 Right align
               </button>
@@ -336,12 +327,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
           <div>
             <div
               class="m-2 dropup"
-              color="info"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-info"
               >
                 Drop-Up
               </button>
@@ -382,12 +372,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
           <div>
             <div
               class="m-2 dropdown"
-              color="secondary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-secondary"
               >
                 Offset Dropdown
               </button>
@@ -428,17 +417,16 @@ exports[`Dropdowns.vue renders correctly 1`] = `
           <div>
             <div
               class="m-2 dropdown btn-group"
-              color="secondary"
             >
               <button
-                class="btn"
+                class="btn btn-secondary"
               >
                 Split Dropdown
               </button>
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="dropdown-toggle dropdown-toggle-split btn"
+                class="dropdown-toggle dropdown-toggle-split btn btn-secondary"
               />
               <div
                 class="dropdown-menu"
@@ -507,17 +495,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <div>
             <div
               class="dropdown"
-              color="link"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn btn-lg"
+                class="btn btn-lg btn-link"
               >
                 
                 🔍
@@ -592,17 +577,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <div>
             <div
               class="m-2 d-inline-block dropdown"
-              color="secondary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle btn-lg"
+                class="btn dropdown-toggle btn-lg btn-secondary"
               >
                 Large
               </button>
@@ -641,17 +623,16 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              
             <div
               class="m-2 dropdown btn-group"
-              color="secondary"
             >
               <button
-                class="btn btn-lg"
+                class="btn btn-lg btn-secondary"
               >
                 Large Split
               </button>
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="dropdown-toggle dropdown-toggle-split btn btn-lg"
+                class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary"
               />
               <div
                 class="dropdown-menu"
@@ -689,12 +670,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              
             <div
               class="m-2 d-inline-block dropdown"
-              color="secondary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle btn-sm"
+                class="btn dropdown-toggle btn-sm btn-secondary"
               >
                 Small
               </button>
@@ -733,17 +713,16 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              
             <div
               class="m-2 dropdown btn-group"
-              color="secondary"
             >
               <button
-                class="btn btn-sm"
+                class="btn btn-sm btn-secondary"
               >
                 Small Split
               </button>
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="dropdown-toggle dropdown-toggle-split btn btn-sm"
+                class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary"
               />
               <div
                 class="dropdown-menu"
@@ -812,17 +791,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <div>
             <div
               class="m-2 dropdown"
-              color="primary"
             >
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle btn-primary"
               >
                 Dropdown ARIA
               </button>
@@ -941,16 +917,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
         <div
           class="card-body"
         >
-          <!---->
-          <!---->
           <div
             class="m-0 d-inline-block dropdown"
-            color="primary"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-primary"
             >
               Primary
             </button>
@@ -989,12 +962,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="secondary"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-secondary"
             >
               Secondary
             </button>
@@ -1033,12 +1005,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="success"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-success"
             >
               Success
             </button>
@@ -1077,12 +1048,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="warning"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-warning"
             >
               Warning
             </button>
@@ -1121,12 +1091,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="danger"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-danger"
             >
               Danger
             </button>
@@ -1165,12 +1134,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="info"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-info"
             >
               Info
             </button>
@@ -1209,12 +1177,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="light"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-light"
             >
               Light
             </button>
@@ -1253,12 +1220,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="dark"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-dark"
             >
               Dark
             </button>
@@ -1297,12 +1263,11 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            
           <div
             class="m-0 d-inline-block dropdown"
-            color="link"
           >
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="btn dropdown-toggle btn-sm"
+              class="btn dropdown-toggle btn-sm btn-link"
             >
               Link
             </button>
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
index a79e09fe..aaf959c3 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
@@ -1,19 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ButtonGroups.vue renders correctly 1`] = `
-<crow-stub>
+<crow-stub
+  gutters="true"
+>
   <ccol-stub
     col="12"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -40,10 +36,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
         </div>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <cbuttongroup-stub>
             <cbutton-stub
@@ -195,14 +188,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     col="12"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -214,10 +201,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
       
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <cbuttongroup-stub>
             <cbutton-stub
@@ -351,14 +335,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     col="12"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -369,10 +347,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
       
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <cbuttongroup-stub>
             <cbutton-stub
@@ -402,7 +377,9 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cdropdown-stub
+              caret="true"
               color="success"
+              flip="true"
               placement="bottom-start"
               right=""
               text="Menu"
@@ -457,7 +434,9 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cdropdown-stub
+              caret="true"
               color="info"
+              flip="true"
               placement="bottom-start"
               right=""
               split="true"
@@ -508,14 +487,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     col="12"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -527,10 +500,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
       
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <cbuttongroup-stub
             vertical="true"
@@ -580,14 +550,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
     col="12"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -601,10 +565,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
         </small>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <cbuttontoolbar-stub
           aria-label="Toolbar with button groups"
         >
@@ -745,19 +706,21 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
             </cbutton-stub>
           </cbuttongroup-stub>
            
-          <cinput
-            append-html=".00"
+          <cinput-stub
+            appendhtml=".00"
             class="mb-0 w-25 mx-1"
-            prepend-html="$"
+            lazy="400"
+            prependhtml="$"
             size="sm"
+            type="text"
             value="100"
           />
            
-          <cselect
+          <cselect-stub
             class="mb-0 w-25 mx-1"
-            custom=""
+            custom="true"
             options="Large,Medium,Small"
-            prepend-html="Size"
+            prependhtml="Size"
             size="sm"
             value="Medium"
           />
@@ -839,8 +802,10 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
            
           <cdropdown-stub
             button-content="Menu"
+            caret="true"
             class="mx-1"
             color="secondary"
+            flip="true"
             placement="bottom-end"
             togglertext="Dropdown"
           >
diff --git a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
index c16d26cf..97c547ae 100644
--- a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`StandardButtons.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Standard buttons
       </strong>
@@ -32,12 +26,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -251,6 +243,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -482,6 +475,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -704,23 +698,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Outline Buttons
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <p>
         
         Use 
@@ -733,6 +718,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -941,6 +927,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -1165,6 +1152,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -1381,23 +1369,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Ghost Buttons
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <p>
         
         Use
@@ -1411,6 +1390,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -1619,6 +1599,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -1843,6 +1824,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -2059,23 +2041,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Square Buttons
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <p>
         
         Use
@@ -2089,6 +2062,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -2311,6 +2285,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -2551,6 +2526,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -2782,23 +2758,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Pill Buttons
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <p>
         
         Use
@@ -2812,6 +2779,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -3034,6 +3002,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -3274,6 +3243,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -3505,23 +3475,14 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Sizes
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <p>
         Fancy larger or smaller buttons? Add 
         <code>
@@ -3536,6 +3497,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -3650,6 +3612,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -3759,6 +3722,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
        
       <crow-stub
         class="align-items-center mt-3"
+        gutters="true"
       >
         <ccol-stub
           class="mb-3 mb-xl-0"
@@ -3873,25 +3837,17 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         With Icons
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <crow-stub
         class="align-items-center"
+        gutters="true"
       >
         <ccol-stub
           class="text-center mt-3"
@@ -4014,24 +3970,17 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <strong>
         Toggle pressed state
       </strong>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <crow-stub>
+    <ccardbody-stub>
+      <crow-stub
+        gutters="true"
+      >
         <ccol-stub
           class="text-center mt-3"
           sm="true"
@@ -4155,20 +4104,16 @@ exports[`StandardButtons.vue renders correctly 1`] = `
     </ccardbody-stub>
   </ccard-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="6"
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <strong>
             Block Level CButtons 
           </strong>
@@ -4180,10 +4125,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cbutton-stub
             activeclass="active"
             block="true"
@@ -4290,14 +4232,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
       tag="div"
       xs="12"
     >
-      <ccard-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <ccardheader-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+      <ccard-stub>
+        <ccardheader-stub>
           <strong>
             Block Level CButtons 
           </strong>
@@ -4309,10 +4245,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
           </small>
         </ccardheader-stub>
          
-        <ccardbody-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
+        <ccardbody-stub>
           <cbutton-stub
             activeclass="active"
             block="true"
diff --git a/tests/unit/views/charts/__snapshots__/Charts.spec.js.snap b/tests/unit/views/charts/__snapshots__/Charts.spec.js.snap
index c0e6038a..cfb81ae9 100644
--- a/tests/unit/views/charts/__snapshots__/Charts.spec.js.snap
+++ b/tests/unit/views/charts/__snapshots__/Charts.spec.js.snap
@@ -6,14 +6,8 @@ exports[`Charts.vue renders correctly 1`] = `
     class="card-columns cols-2"
     columns="true"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         
         Line Chart
         
@@ -35,10 +29,7 @@ exports[`Charts.vue renders correctly 1`] = `
         </div>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <cchartlineexample-stub />
       </ccardbody-stub>
     </ccard-stub>
@@ -46,8 +37,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Bar Chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartbarexample-stub />
     </ccard-stub>
@@ -55,8 +44,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Doughnut Chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartdoughnutexample-stub />
     </ccard-stub>
@@ -64,8 +51,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Radar Chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartradarexample-stub />
     </ccard-stub>
@@ -73,8 +58,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Pie Chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartpieexample-stub />
     </ccard-stub>
@@ -82,8 +65,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Polar Area Chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartpolarareaexample-stub />
     </ccard-stub>
@@ -91,8 +72,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Simple line chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartlinesimple-stub
         backgroundcolor="transparent"
@@ -106,8 +85,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Simple pointed chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartlinesimple-stub
         backgroundcolor="transparent"
@@ -121,8 +98,6 @@ exports[`Charts.vue renders correctly 1`] = `
     <ccard-stub
       bodywrapper="true"
       headerhtml="Simple bar chart"
-      subtitletag="h6"
-      titletag="h4"
     >
       <cchartbarsimple-stub
         backgroundcolor="danger"
diff --git a/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap b/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
index 9502db99..e2800e6f 100644
--- a/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
+++ b/tests/unit/views/icons/__snapshots__/Brands.spec.js.snap
@@ -19,8 +19,6 @@ exports[`Brands.vue renders correctly 1`] = `
     <div
       class="card-body"
     >
-      <!---->
-      <!---->
       <div
         class="row text-center"
       >
diff --git a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
index 66a889e2..45170b2f 100644
--- a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
+++ b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`CoreUIIcons.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="cui-pencil"
       />
@@ -45,12 +39,10 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       </div>
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <crow-stub
         class="text-center "
+        gutters="true"
       >
         <ccol-stub
           col="6"
diff --git a/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap b/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
index 79f0cdc9..be5991cb 100644
--- a/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
+++ b/tests/unit/views/icons/__snapshots__/Flags.spec.js.snap
@@ -2,14 +2,8 @@
 
 exports[`Flags.vue renders correctly 1`] = `
 <div>
-  <ccard-stub
-    subtitletag="h6"
-    titletag="h4"
-  >
-    <ccardheader-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+  <ccard-stub>
+    <ccardheader-stub>
       <i
         class="cui-globe"
       />
@@ -17,12 +11,10 @@ exports[`Flags.vue renders correctly 1`] = `
     
     </ccardheader-stub>
      
-    <ccardbody-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
+    <ccardbody-stub>
       <crow-stub
         class="text-center"
+        gutters="true"
       >
         <ccol-stub
           class="mb-5"
@@ -188,6 +180,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#703d29' stroke-width='.5' d='M264.1 175.5h52.6V228h-52.6zm58.2 0h52.6V228h-52.6zm-58 98c.1 1 .5 2.6 1.4 4.3 1 1.5.6 1.4 2.7 3.8a15.3 15.3 0 0 0 4 2.9 32.7 32.7 0 0 0 15 2.6c2.7-.1 4.8-.4 6.6-.7a71 71 0 0 1 11-.6c1.5 0 3 .3 4.7.6 3.5.7 7 2 7 2v-54.7h-52.6V271l.2 2.4zm110.4 0a13 13 0 0 1-1.4 4.3c-1 1.5-.6 1.4-2.7 3.8a15.4 15.4 0 0 1-4 2.9c-1.3.7-2.3 1-4.4 1.6a32.6 32.6 0 0 1-10.6 1c-2.7-.1-4.8-.5-6.5-.7a71 71 0 0 0-7.2-.6 40.5 40.5 0 0 0-3.9 0c-1.5 0-3 .3-4.7.6-3.5.7-7 2-7 2v-54.8H375v37.5l-.2 2.4z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -209,6 +202,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='red' d='M0 0h220v480H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -305,6 +299,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#bf0000' d='M350.8 319.4c.4.4.6.8.7 1.2l.4 1.6-.8.1a7.8 7.8 0 0 0-1-1.5 18.8 18.8 0 0 0-1.1-1.2 46 46 0 0 0-1.7-1.5 34.4 34.4 0 0 0-2-1.7c-.4-.2-.6-.4-.6-.5a1.9 1.9 0 0 1-.3-.8 11.2 11.2 0 0 1-.2-1.6l2.7 2.2a44.3 44.3 0 0 1 2.5 2.2l1.4 1.5m-9.5-5.8l-.2 2H338l.3-2h3m8.4 8.9l-7.6 2.3-1.3-2 6.5-2-.7-.8a2.8 2.8 0 0 0-.9-.6 1.4 1.4 0 0 1-.4 1 2 2 0 0 1-1 .6 3.4 3.4 0 0 1-1.8 0 2 2 0 0 1-1.3-.7 4 4 0 0 1-.7-2.2c0-1 .3-1.6.9-1.8.7-.2 1.8 0 3 .7a8.1 8.1 0 0 1 3 2.4l2.3 3.1m-5.8-4a3.8 3.8 0 0 0-.8-.3 1.1 1.1 0 0 0-.6 0 .7.7 0 0 0-.5.3.5.5 0 0 0 0 .6l.5.2h.6l.4-.3.4-.5m-8-1.6l-.5 2-3.2-.3.5-2 3.1.3m7.5 7.7l-1.7.4a5.3 5.3 0 0 1-1.7 0 3.6 3.6 0 0 1-1.5-.4c-.3.5-.8 1-1.5 1.2a7.4 7.4 0 0 1-1.6.6l-1.2.3-1-2 1.1-.3a9.1 9.1 0 0 0 1.3-.4l.9-.5-1-.5h-.7a.4.4 0 0 0-.2 0 .6.6 0 0 0-.2.3h-.5c-.5-.8-.6-1.5-.3-2s.9-.8 2-1a6.8 6.8 0 0 1 2.6-.2c.8.1 1.3.4 1.5.9.2.2.2.5.2.7l-.4 1.2h.5a2 2 0 0 0 .6 0l1.7-.3 1 2m-8 1.8l-1.6.3a3 3 0 0 1-2.2-.4 5.5 5.5 0 0 1-1.7-2.6l-.8-2.2a2 2 0 0 0-.8-1 4.6 4.6 0 0 0-.9-.5l.6-2.1c.6.3 1 .6 1.4 1l1 1.7.5 1.5 1.1 2.2c.3.3.7.4 1 .3l1.7-.2.7 2m-7-7.5l-1 1.9-3-.7 1-1.9 3 .7m1.8 8.4l-7.5.7-.4-2 6.2-.7a2.3 2.3 0 0 0-.6-.8 8.3 8.3 0 0 0-1-.6l.5-2c.7.4 1.2.9 1.6 1.3.3.5.6 1.2.8 2.1l.4 2m-6 1a17 17 0 0 1-2.2-.2 10.5 10.5 0 0 1-1.7-.5 5.6 5.6 0 0 1-1.3.4 9.9 9.9 0 0 1-1.7 0h-2a2.5 2.5 0 0 1-1.2-.3c-.3-.2-.5-.5-.8-1a4.1 4.1 0 0 1-1.5 1l-1.7.1h-1.7l.2-2.1h1.7c.8 0 1.5 0 2.1-.4a2 2 0 0 0 1.3-1.8l.7.1a30.2 30.2 0 0 0-.1 1.3c0 .3 0 .5.3.7.3.2.6.3 1 .3h1.5c1 0 1.6 0 2-.2.6-.2.9-.5 1-1.1l.1-.4s.3 0 .5-.2l.5-.2v.4a8.9 8.9 0 0 1 0 .3l-.3 1.1a12.4 12.4 0 0 0 2 .5c.1-.2 0-.4-.1-.7l-.3-.6a.5.5 0 0 1 .1-.3l.3-.2 1-.9.5 1v1l-.2 2.9m-11.3-8.7l-2 1.3-1.3-.9-1.4 1-1.9-1 1.8-1.3 1.5.8 1.5-1 1.8 1m-3 8.2l-7.3-1.2.8-2 6.2 1c0-.4 0-.7-.2-1a5.2 5.2 0 0 0-.5-.8l1.6-1.7c.4.6.6 1 .7 1.6 0 .5-.2 1.2-.5 2.1l-.8 2m-6.1-1l-1.6-.3c-.9-.2-1.4-.6-1.5-1.2-.2-.6.1-1.5.8-2.8l1.2-2c.3-.5.4-.9.3-1.2a2.2 2.2 0 0 0-.3-.7l2.2-1.6c.3.5.3 1 .3 1.4 0 .5-.3 1.1-.7 1.8l-.8 1.4a5.8 5.8 0 0 0-.9 2.2c0 .4.2.6.5.7l1.6.4-1.1 2m-3.8-8l-2.5 1.1-1.8-1.7 2.6-1 1.7 1.7m-1 6.6a6.8 6.8 0 0 1-1.6 1.4 4.2 4.2 0 0 1-1.7.6l-2.4-.1a14.8 14.8 0 0 1-2.8-.7 7.7 7.7 0 0 1-3.4-2c-.6-.8-.6-1.5 0-2.2a7 7 0 0 1 2-1.6c.8-.5 2-1 3.8-1.6l.4.5-2.8 1.2c-.5.3-1 .6-1.3 1-.4.4-.3 1 .2 1.6a10.5 10.5 0 0 0 6.3 2.2c1.2 0 2-.3 2.3-.7.3-.3.4-.6.5-1l.2-1.6 2.5-1.5a8 8 0 0 1-.1 1.5 4.4 4.4 0 0 1-1 1.6l-1.2 1.4'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -334,6 +329,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1116,6 +1112,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1136,6 +1133,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' transform='matrix(-1 0 0 1 640 0)' xlink:href='#a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1156,6 +1154,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='orange' d='M0 320h640v160H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1184,6 +1183,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#000' stroke-width='3' d='M331.5 348.8l-125-75.5m109.6 58.1L274 304.1m18.2 42.7L249.3 322'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1230,6 +1230,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path id='g' fill='#85340a' d='M305.9 237.5c3.5 2.7 7 2.5 9 1.3 2-1.3 2-1.7 1.6-1.7-.4 0-.8.4-2.4 1.3-1.7.8-4.1.8-8.2-.9z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1278,6 +1279,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1299,6 +1301,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1323,6 +1326,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1524,6 +1528,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#9cc' d='M139.7 234.7l3 3-3-3m5.9 0l3 3-3-3m-3 6l3 2.9-3-3z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1557,6 +1562,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1580,6 +1586,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' d='M384 200l7.7 21.5 20.6-9.8-9.8 20.7L424 240l-21.5 7.7 9.8 20.6-20.6-9.8L384 280l-7.7-21.5-20.6 9.8 9.8-20.6L344 240l21.5-7.7-9.8-20.6 20.6 9.8L384 200z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1607,6 +1614,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1628,6 +1636,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' transform='matrix(-1 0 0 1 639.5 0)' xlink:href='#a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1647,6 +1656,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <circle cx='280' cy='240' r='160' fill='#f42a41'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1669,6 +1679,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1691,6 +1702,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1713,6 +1725,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1739,6 +1752,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1769,6 +1783,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1798,6 +1813,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1820,6 +1836,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1933,6 +1950,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#000' stroke-width='1.3' d='M554 148.3v135.5c0 36.2-72.3 48-72.3 48s-72.4-11.8-72.4-48V148.3h144.8z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -1984,6 +2002,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2675,6 +2694,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#574f4c' d='M323.3 194l.7.5a.5.5 0 0 0-.1-.1 6.5 6.5 0 0 0-.7-.6.6.6 0 0 0 0 .1'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2735,6 +2755,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2763,6 +2784,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2867,6 +2889,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2895,6 +2918,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2917,6 +2941,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -2952,6 +2977,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3112,6 +3138,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#000' d='M366 205.1v53c0 10.6-1.4 52.6-46.5 69-45.3-16.4-46.7-58.4-46.7-69v-53H366'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3131,6 +3158,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#f00' d='M-100 0H81.1v512H-100zm543.4 0h181.1v512h-181zm-308 247.4l-14.2 4.8 65.5 57.5c5 14.7-1.7 19-6 26.8l71-9L250 399l14.8-.4-3.3-71 71.2 8.5c-4.4-9.3-8.3-14.2-4.3-29l65.4-54.5-11.4-4.2c-9.4-7.2 4-34.7 6-52.1 0 0-38.1 13.1-40.6 6.2l-9.8-18.7-34.7 38.2c-3.8.9-5.4-.6-6.3-3.8l16-79.8-25.4 14.3c-2.1 1-4.2.2-5.6-2.3l-24.5-49-25.2 50.9c-1.9 1.8-3.8 2-5.4.8l-24.2-13.6 14.6 79.1c-1.2 3.2-4 4-7.2 2.3l-33.3-37.7c-4.3 7-7.2 18.3-13 20.9-5.7 2.4-25-4.8-37.9-7.6 4.4 15.9 18.2 42.3 9.5 51z' transform='translate(74.1) scale(.9375)'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3151,6 +3179,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#ce1021' d='M640 0L0 384v96L640 96V0'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3181,6 +3210,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3208,6 +3238,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3232,6 +3263,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3254,6 +3286,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3278,6 +3311,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' fill-rule='evenodd' d='M471.6 213l5.2-16.7-14-10.6 17.6-.2 6-16.5 5.6 16.5 17.7.5-14.1 10.5 5 16.7-14.5-10m27.1 13l10.4-13.9-9.7-14.8 16.7 5.8 11-13.5v17.6l16.4 6.4-16.8 5-.8 17.5-10.2-14.4m-98.4 15l-.7-17.5-16.8-5.2L431 198v-17.4l10.9 13.5 16.8-5.6-9.8 14.7 10.3 14-17-4.5m-39.6 40.9l-7.4-15.8-17.4 1.8 12.8-12.3L384 211l15.2 8.2 13.3-11.8-3.4 17.4 14.9 8.9-17.3 2.5M389 291.8l-13.3-11.1-15 9.2 6.4-16.7-12.9-11.6 17.3.7 7-16.4 4.3 17.2 17.2 1.5-14.6 9.8m3.2 60.4l-16.5-4.8-10.1 14.5-.7-17.9-16.4-5.5 16.1-6.2v-18l10.7 14.1 16.4-5.6-9.6 15m29.5 50.8l-17 2.4-3.5 17.4-7.8-16-17.1 1.6 12.2-12.3-7.1-16.4 15.3 8.5 12.8-11.8L393 362m45 38l-15.1 8.2 2.6 17.6-12.7-12.4-15.6 7.6 7.3-15.9-12.3-12.9 17.3 2.6 8-15.5 3.4 17.4m53.8 9l-8.3 15.3 11.7 13.2-17.4-3.3-8.9 15-2.4-17.3-17.2-4 15.8-7.4-1.7-17.5 12.2 12.8m57.4-13.1l-.5 17.4 16.3 6.4-17 5-1.2 17.5-10-14.3-17 4.4 10.8-13.9-9.4-14.7 16.6 5.7M559 209.8l12 12.6 15.9-7.4-8.3 15.8 11.5 13.1-17-2.8-9 15.5L562 239l-17-3.5 15.7-8m34.2 21l5.5 16.6 17.5.3-14.2 10.7 4.7 16.8-14.1-10-14.6 10.1 5.4-16.8-13.8-10.6 17.6-.4m19.5 33.2l-2 17.4 15.7 7.7-17.3 3.6-2.7 17.3-8.7-15.1-17.4 2.9 12-13-8.1-15.5 16 7.2m3 39.8l-7.8 15.6L603 379l-17.4-2.7-8.4 15.3-3-17.3-17.4-3.3 15.6-8-2.3-17.4 12.6 12.3m-9.8 39.1l-14.7 9.2 3.8 17.3-13.5-11.5-15 8.6 6.3-16.3-13.1-12.1 17.4 1.5 7-16 4.4 17.2'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3306,6 +3340,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3336,6 +3371,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3362,6 +3398,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='30' height='20' transform='matrix(14.9991 -18.73557 18.73533 14.99929 240 216)' xlink:href='#a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3384,6 +3421,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3406,6 +3444,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3434,6 +3473,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3462,6 +3502,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3491,6 +3532,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3521,6 +3563,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3542,6 +3585,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#d47600' d='M519 76.4l-1.8.7-.8.3-2.2-.1-2.2 1-3.8 2.6-.1.1-1.5.4-1.3-.6-.7.4-.3 1.5-.7 1.1-.9.6-3 .3-2.5 1.4-3.4-1-1.5.7-3.3 3-1.7.7h-.5l-2.3-.1-.9.3-1.4 1.3-2.6.2-.9.6-1.3 2.6L476 96l-.8.1-.8-.3-.7.1-.3 1.7-.6.7-1.8.6-1.4 1.2-1.3.6h-2l-1.7 1-3.1.2-1.3 1.2-.3.3-.6.3-1 .6-.2.2-1.2-.2-1.4.5-.6-.8-1 .5-1.2.1-1.6-.7-1.3-.6-.9.2-.3 1.5v.2l-1 1.2-1.7 1.1-.2.3-2 2.6-3.8 4-3.2 1.6-3.3 1-2.3 1.9-6 3-9.7 4.8-2 .6-2.8.4-5 1.9-4.4 1.3-.3.1-.8.3-6.3 1.9-2.9-.4-1.7.7-4.5-.5h-3.1l-2 .4-3.7 1.8-6.3 3-2 2-3.2 1.6-3.8 1.2v-1.6l-1.3.4-1 .3-3 .4h-1.7l-1.1-.3h-.2l-6.2 2.1-7 .7-3.5 1.1H333l-1.6.5-3.2.4-1.2-.3-.2-.1-9.4.4-4.3-.5-2 .5-3.5-1.2-5-.6-1.2-.3-2.6-.8-1.2.7-1 .1-2-.8h-.8l-1.8.6-1-.2-1-.8-2.1-.3-1.4-1.1-7.5 1-2-.6-6.9-2h-1l-1.4 1-2 .8-1.9.4-2.4.1-2.8-.7-2.8-1.4-1.1-.3-2.4.3h-.7l-4.4-2.3-5.6-3.5-3.8-1.9-1.5-.2-.2.7.7 2.2.3 2.3v2l-.1 1.3.3 1.1 1.4 1.6.6 1.5.4 4.2v4.3l-.7 6.8-.2 1-.8 3.6-.7 3.3-2.9 8.7-.7 1-2 1.3-4.3 3-3.2 1.8-1 .4-2.6.2H219l-2-1.1-2-.5-2.6-1.9-2.8-.6-3.2-1.8-.8-1-1.7-.2-2.4-.7-.9-.3-.6-.1-3-.1-2.9-1.3-1.5-.4h-2l-2.1 1-1.1.4-1.4-.5h-1l-1 1.7-.2.3-.8.4h-1.7l-.8.3-1.1.5-1 .4-.5.2h-.3l-.5.2h-.6l-1.2-.6-.6-.3-1-.2-.5.3-.1 1.9-.5 1.1-1.6 1.4-1.6 1.4-1 1.6-3 6.7-1.9 2.7-.5.7-2 2.1-1.7 1.3-3.9 3-3.7 1.5-3.2.6h-1.6l-3-.4-2.6-.8-3-1.8-3.1-2.6-4.7-4.5-.6-.4-.2-.1-1.4-1h-1.1l-.4.8-.3 1-.2.9-.5 5v.3l.3 2.1 3.6 5 1 2.6.2.3.7 1.2.6 1 1.3 3.6-.9 2 .4 1.4-1 .8-.2 1.2 3.1 4 .7 1.7-.7 2.4-1.3 1.4-.3.3.2 1 1.4 1.4 2.5 2.2 1.3 3.2 1 1 1.2-.3.6.5h1l1 1 .6.2 1 .5.8 1 .1 3.2 1.5 3.8v2.5l1 1.5.2 1.2-.5 3.3 1.2 1 1.2-.2.8.1 1.3 1.1 1.6 2.4 1.6-.2 1 .4 4.7 4.3 1 .6.9.4 1 1 1.4-1h.2l1.6-.2.7.5 1.4.9h1.7l4 1.2 1.6.4 3.4 2.1 1.5.9.8.7 1.2 1 2.2 1 2 .4 1 .2.9.3 4.2 1.7 2.3.5 2 .8 1.6.5h1.2l1.6-1.3h1.5l1.3.2 1.3-.2 2-1.2.3-.6 1.4-.6 4.8-.6 1.4.4 3.6-1.5 2.4.6 2-.7 4.7 1 1.2.9 1.4 1.5h1.7l-.7 1.1 2 2.2 1.9 2.7.1.4 1.3 3.9 1 1.4.7 1.9v1.2l-1 .9-.2.4v.2l.2.5.4-.2.7-.4 1-.2 1.6.2 1.1.1 1.7-.8 1.2-.6 1.8.8h2l.9.3 2.4 1.1 1.2.1.4-.3.3-.6-.1-.8-1-1.1-2-2.4-.8-1.2-.6-1.7-.2-2.2-.2-1.5.3-2 .5-.7.4-1.6.1-.4 1.2-1.5 3-2 3.2-2.8 2.5-1.7 2.6-1.1v-.3l.4.1 6.6-2.3 3-.5 20 1.4.7-.2.7-1.9.3-.3.3-.2 2.2-1 1-.2 2.8.7 1.2.3 1.9-1h1.3l2.7-1.5h1.7l.7-.2 3.3-2.4 3.1-.9.8-.4.3-.2 3.3-1.7 2-1.6 1.8-1 2-.4 5-.4 1.1-1.7 2.2-.3 1.3-1.5 1.5-.6 1.1-1.6 1-1.3 1.2-.7 4.1-.3 4.8.6.7-.4 1-3.9 1.2-.7 3-4.5v-1.6l.1-1.4.5-2-.3-3.4.4-3.6 1.9-4.5 1.7-1.8 2.7-1.9 1.4-.6 2-.3h.2l.5-.2h9.2l2.3-.1 5.7 1h.4l1.9.7 2.2 1.7 2.4 2.3.4.4 1.5.7.5.2 1.2-.2 1.8-1 1.4-1 1.8-1v-.2l1.1-1.5.4-.7 3.6-1.4 4.2-.2.5-.3h.2l1.1-1.4h1l2.6 1 1.7-.4 1.4.5 1.1-.1 2-.3 2.3 1.6 1.3.2 4.5 2.6h.4l.2.1.5-.2.8-.2h.1l.1.1.6.7.7.1.8-1-.3-.6-.1-.2-1.7-.3-1.4-2.5 1.4-1.5-2.2-2.6-.4-.5v-.1l-.8-1.2-3.8-5.8-5-4-1.7-1.3-.6-.5-2.7-2.7-1.9-2.5-.2-.5-.4-.9-1.1-2.4-2-1.5-1.6-1.8-3.4-4.6-.5-.7-.8-.5h-1.7l-.1-.2h-.1v-.1l.8-.8 1-.2.3-.9-1.7-4.9v-.2l-.1-1.5 1.3-7.1.2-.9 2.4-4.7 1.4-1.2 1.6-3.1 1.4-2 1.3-1.3.2-.1 2.3-1.4 2-.3 1.9-.3 3.3 1h3l.7-.1 1.4-.2 2.3-.7 1.1-.7.6-.8 1.2-4 .4-1.3.7-1.4 4.3-4.9 3.2-3 7.2-5.2 3.5-2.1 1.8-1.1 16.1-7.2 4.2-4.2 2.2-2.2 3.8-2.6 4.5-1.9 4-3 .8-1.1 1-3.5 1-.2.7-1.7.3-.5 3.1-2.2.4-.2 12.3-6.2 1.8.3 1-1.5 3.5-.6h.7l.9-.5.7-1.3v-.3l.1-3.4.8-.9.4-2.2.4-.6.4-.5 1-.7-.2-.4z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3569,6 +3613,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3589,6 +3634,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#d00' d='M0 160h640v160H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3617,6 +3663,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3637,6 +3684,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' d='M0 205.7h640.1v68.6H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3804,6 +3852,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3838,6 +3887,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -3858,6 +3908,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#d21034' d='M424 180a120 120 0 1 0 0 120 96 96 0 1 1 0-120m4 60l-108-35.2 67.2 92V183.2l-67.2 92z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10618,6 +10669,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10771,6 +10823,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#812e00' fill-rule='evenodd' d='M307.6 125.5s-.4 5-3.6 8.3-9.8 7.1-9.8 7.1 8.9-4.2 9.8-3.3c1 1-5.7 8.3-5.7 8.3s8.7-7.7 9.8-7.7 3.6 7.5 4.6 7.3c.9-.2-2-9.5-1.6-11 .4-1.4 0-9.3 0-9.3l-3.4.3zm20.5-.6s-.4 5.3-3.6 8.8-9.8 7.6-9.8 7.6 8.9-4.5 9.8-3.5c1 1-5.7 8.8-5.7 8.8s8.7-8.2 9.8-8.2 3.6 8 4.6 7.8c.9-.2-2-10.2-1.6-11.7.4-1.6 0-10 0-10l-3.5.4zm-28.7-48c0 .9-1 1.7-2.1 1.7s-2.2-.8-2.2-1.8 1-1.8 2.2-1.8 2.1.8 2.1 1.8z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10793,6 +10846,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10846,6 +10900,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10876,6 +10931,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10899,6 +10955,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -10918,6 +10975,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path stroke='#da121a' stroke-width='60' d='M0 90h810m0 120H0m0 120h810m0 120H0' transform='scale(.79012 .88889)'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11477,6 +11535,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#000' stroke-width='0' d='M279.1 217v-1m-.6 1v-1m-.4 1.1V216'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11506,6 +11565,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11549,6 +11609,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11569,6 +11630,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#003580' d='M175.5 0h130.9v480h-131z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11704,6 +11766,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path style='line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal' fill='#ce1126' d='M161.1 0v96.1H0v48.1h161.1v96.1H197v-96.1h161v-48H197V0h-36z' color='#000' font-family='sans-serif' font-weight='400' overflow='visible'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11808,6 +11871,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11834,6 +11898,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11861,6 +11926,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11883,6 +11949,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11905,6 +11972,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -11925,6 +11993,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#ce1124' d='M0 201.6h640v76.8H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12072,6 +12141,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12091,6 +12161,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path stroke='#fff' stroke-width='.6' d='M0 0l5 3M0 3l5-3' transform='scale(128 160)'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12115,6 +12186,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12145,6 +12217,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12187,6 +12260,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' x='100' transform='translate(30.3 414.6)' xlink:href='#d'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12208,6 +12282,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='red' fill-rule='evenodd' d='M146.8 373.1c1-16.8 4-31.1 4-31.1s-9.8 1-14.8 1c-4.9 0-14.8-1-14.8-1s3 14.3 4 31.2c-16.9-1-31.2-4-31.2-4s1 7.4 1 14.8-1 14.8-1 14.8 14.3-3 31.2-4c-1 16.9-4 31.2-4 31.2s7.4-1 14.8-1 14.8 1 14.8 1-3-14.3-4-31.2c16.9 1 31.2 4 31.2 4s-1-9.8-1-14.8c0-4.9 1-14.8 1-14.8s-14.3 3-31.1 4zm368-288c1-16.8 4-31.1 4-31.1s-9.8 1-14.8 1c-4.9 0-14.8-1-14.8-1s3 14.3 4 31.1c-16.9-1-31.2-3.9-31.2-3.9s1 7.4 1 14.8-1 14.8-1 14.8 14.3-3 31.2-4c-1 16.9-4 31.2-4 31.2s7.4-1 14.8-1 14.8 1 14.8 1-3-14.3-4-31.1c16.9 1 31.2 4 31.2 4s-1-10-1-14.9 1-14.8 1-14.8-14.3 3-31.2 4zm-368 0c1-16.8 4-31.1 4-31.1s-9.8 1-14.8 1c-4.9 0-14.8-1-14.8-1s3 14.3 4 31.2c-16.9-1-31.2-4-31.2-4s1 7.4 1 14.8-1 14.8-1 14.8 14.3-3 31.2-4c-1 16.9-4 31.2-4 31.2s7.4-1 14.8-1 14.8 1 14.8 1-3-14.3-4-31.2c16.9 1 31.2 4 31.2 4s-1-9.8-1-14.8c0-4.9 1-14.8 1-14.8s-14.3 3-31.1 4zm368 288c1-16.8 4-31.1 4-31.1s-9.8 1-14.8 1c-4.9 0-14.8-1-14.8-1s3 14.3 4 31.2c-16.9-1-31.2-4-31.2-4s1 7.4 1 14.8-1 14.8-1 14.8 14.3-3 31.2-4c-1 16.9-4 31.2-4 31.2s7.4-1 14.8-1 14.8 1 14.8 1-3-14.3-4-31.2c16.9 1 31.2 4 31.2 4s-1-9.8-1-14.8c0-4.9 1-14.8 1-14.8s-14.3 3-31.2 4z' style='mix-blend-mode:multiply'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12228,6 +12303,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#da121a' d='M252.4 218h135.2l-109.4 79.5L320 169l41.8 128.6z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12252,6 +12328,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='36' height='24' transform='rotate(180 320 240)' xlink:href='#a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12273,6 +12350,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path d='M320 160l52 160-136.1-98.9H404L268 320z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12320,6 +12398,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12339,6 +12418,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#d00c33' d='M0 240h640v240H0zm80 0a160 160 0 1 0 320 0 160 160 0 0 0-320 0'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12368,6 +12448,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12390,6 +12471,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12412,6 +12494,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12449,6 +12532,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12665,6 +12749,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#2b2b2b' stroke-width='1.1' d='M424.1 288.7s-2.5 7.7-9.3 13.5'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12884,6 +12969,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12938,6 +13024,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </text>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12966,6 +13053,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' transform='rotate(-72 110 240)' xlink:href='#b'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -12990,6 +13078,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13035,6 +13124,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13059,6 +13149,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13092,6 +13183,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' transform='translate(-133.3 37.3)' xlink:href='#c'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13165,6 +13257,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#f7db17' d='M400.6 103l3.5-3 4.4 1.4zm8.5-1.7l3.4-3 4.4 1.5zm7.8-1.3l-3.4 3-4.4-1.5zm-8.4 1.6l-3.5 3-4.3-1.5zm-5-6.4l4.3 1.4.8 4.6zm5.5 6.4l4.4 1.5.9 4.5zm5.1 6.1l-4.3-1.5-.9-4.5zm-5.6-6.4l-4.3-1.5-.9-4.5zm3-7.7l1 4.6-3.5 3zm-2.7 8.1l.8 4.6-3.4 3zm-2.8 7.5l-.9-4.5 3.5-3zm2.8-8l-.9-4.6 3.5-3z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13296,6 +13389,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13318,6 +13412,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13339,6 +13434,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13361,6 +13457,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13390,6 +13487,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13441,6 +13539,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13481,6 +13580,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13634,6 +13734,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13868,6 +13969,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13895,6 +13997,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13917,6 +14020,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13961,6 +14065,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -13984,6 +14089,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14015,6 +14121,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14041,6 +14148,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14079,6 +14187,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14109,6 +14218,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14185,6 +14295,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14236,6 +14347,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14267,6 +14379,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14296,6 +14409,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14326,6 +14440,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14365,6 +14480,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14393,6 +14509,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14471,6 +14588,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path d='M373.1 377.9l11-6.2 1 2.2-4.3 2.5 1.5 3.1 4.3-2.4 1 2.2-11 6.2-1-2.2 5-2.8-1.5-3.2-5 2.9-1-2.3m4.6 9.6L388 380l3.5 5.9-1.7 1.2-2.2-3.7-2.4 1.8 2 3.4-1.5 1.2-2.1-3.4-2.9 2 2.3 3.9-1.7 1.3-3.6-6m7.2 11l9-9.2 1.6 1.8-3.5 3.7 2.1 2.5 3.5-3.6 1.6 1.9-9 9.3-1.6-1.9 4-4.2-2-2.6-4.1 4.2-1.6-1.8m11.8 5.5l1.5 1.4 2.7-5-4.2 3.6m-5.7 1.7l10.2-8.3 2.3 2.3-6 12.4-1.9-1.9 1.6-3-2-2-2.5 2.2-1.7-1.7m9 8.3l6-9.2-2.1-1.8 1.2-1.8 6.1 5-1.2 1.8-2.1-1.7-6.1 9.2-1.9-1.5m5 4l6.5-11.7 1.9 1.3-2.5 4.6 2.7 1.8 2.5-4.6 2 1.4-6.5 11.7-2-1.3 3-5.4-2.7-1.8-3 5.3-1.9-1.3m12.1 7.7l5.2-12.5 5.9 3-.9 2-3.8-1.9-1.2 3 3.6 1.8-.9 2-3.5-1.9-2.3 5.5-2-1m11.4-2a15 15 0 0 0-1 4.2c0 .6.3 1 .9 1.3.6.3 1 .2 1.5-.3.4-.4 1-1.7 1.7-3.8s1-3.5 1-4.2a1.4 1.4 0 0 0-1-1.3c-.5-.3-1-.2-1.4.3-.4.4-1 1.7-1.7 3.9m-2.2-1a16 16 0 0 1 2.4-4.8 3 3 0 0 1 1.7-.7c.5 0 1.2 0 2 .4s1.2.7 1.6 1.1c.4.5.7 1 .8 1.8.1.5 0 1.2-.1 2a25.2 25.2 0 0 1-1 3.4l-1.2 3.2c-.4.7-.8 1.3-1.2 1.6-.5.4-1 .7-1.6.7-.6.1-1.2 0-2-.4s-1.3-.7-1.7-1.1a3.7 3.7 0 0 1-.8-1.8l.1-2 1-3.4m10.6-2.9l2.2.8-2.4 8.8a4.7 4.7 0 0 0-.2 2.2c.1.4.5.7 1 1 .6.1 1 0 1.4-.2.3-.3.6-1 .9-2l2.3-8.8 2.2.7-2.4 9a9.8 9.8 0 0 1-.7 2 2.9 2.9 0 0 1-.7.9 2.9 2.9 0 0 1-1.6.6 4.8 4.8 0 0 1-2-.3c-1.3-.4-2.1-1-2.5-1.9-.4-.8-.4-2 0-3.7l2.5-9m5.9 16.1l2.7-13.4 2.3.6 1.3 10.1 1.8-9.3 2 .5-2.6 13.4-2.3-.6-1.3-10.2-1.8 9.4-2.1-.5m12 .7l1 .2h1.2a1 1 0 0 0 .5-.3c.3-.3.5-.8.7-1.4a24.1 24.1 0 0 0 .8-5.8 3 3 0 0 0-.4-1.4 1 1 0 0 0-.4-.5l-1-.2-1-.2-1.3 9.6m-2.5 1.6l1.9-13.6 3.6.7c.8.1 1.3.3 1.8.5.4.2.7.5 1 .9.3.5.5 1.2.6 1.9 0 .7 0 1.8-.2 3.3a31 31 0 0 1-.7 4 6.4 6.4 0 0 1-1 2c-.3.5-.7.8-1.3 1-.5.1-1.4 0-2.6-.2l-3.1-.5m9.5 1.6l1.2-13.7 6.3.7-.2 2.3-4-.5-.3 3.2 3.8.4-.2 2.1-3.8-.4-.3 3.8 4.1.4-.2 2.3-6.4-.6m10.4-1.1h2.2a1 1 0 0 0 .5-.5c.2-.3.4-.8.5-1.4a23 23 0 0 0 .2-3v-3a3 3 0 0 0-.6-1.3 1 1 0 0 0-.5-.3l-1-.2h-1l-.3 9.7M470 441l.5-13.7 3.7.1a6 6 0 0 1 1.7.3c.5.2.8.4 1.1.8a4 4 0 0 1 .9 1.8l.2 3.3a31.6 31.6 0 0 1-.4 4.1 4 4 0 0 1-.7 2c-.3.6-.7 1-1.2 1.2-.5.2-1.4.3-2.6.2l-3.2-.1m13.8.2l-.5-13.7 2.3-.1.5 13.7h-2.3m6.1-.3l-.8-11.4-2.7.2-.1-2.2 7.5-.7.2 2.2-2.6.3.8 11.4-2.3.2M498 426l2.3-.4 1.4 9c.2 1.1.4 1.8.7 2.1.3.4.7.5 1.3.3.6 0 1-.3 1.1-.8.2-.4.2-1.1 0-2.2l-1.4-9 2.2-.5 1.5 9.4.2 2-.3 1.2a3.3 3.3 0 0 1-1.2 1.3 5 5 0 0 1-1.8.7c-1.4.3-2.4.1-3.1-.4-.7-.6-1.2-1.7-1.4-3.4L498 426m12.3 3.5l1-.3c.6-.2 1-.4 1.3-.8.2-.4.2-1 0-1.7 0-.7-.3-1.2-.7-1.4-.3-.2-.8-.3-1.5 0l-1 .2.9 4m-.5 8l-3-13.3 4-1c1.1-.3 2-.3 2.7.2.6.4 1.1 1.3 1.4 2.6.3 1.4.2 2.4-.2 3.2-.4.8-1.2 1.4-2.3 1.7l-1.7.4 1.3 5.7-2.2.6m8.8-9.7a15 15 0 0 0 1.5 4c.4.4.9.5 1.5.3s1-.6 1-1.2-.2-2-.9-4.2-1-3.5-1.5-4c-.3-.5-.8-.6-1.4-.4-.6.2-1 .7-1 1.3-.1.6.2 2 .8 4.2m-2.3.8c-.4-1.4-.6-2.5-.7-3.4a5.6 5.6 0 0 1 0-2c.2-.8.4-1.3.8-1.8a5 5 0 0 1 1.8-1 4.1 4.1 0 0 1 2-.3c.5.1 1 .4 1.6.9.4.3.7.9 1 1.6a24.7 24.7 0 0 1 1.9 6.6 6 6 0 0 1 0 2.1 3.7 3.7 0 0 1-.8 1.7 4 4 0 0 1-1.8 1.1c-.8.3-1.4.4-2 .3a3 3 0 0 1-1.5-.9 5 5 0 0 1-1.1-1.6c-.4-.8-.8-2-1.2-3.3m11.3 3.1l-4.6-12.7 2.2-1 6.2 7.6-3.2-8.9 2-.9 4.6 12.7-2.2 1-6.2-7.6 3.2 9-2 .8m14.3-7l-4.8-10.1-2.3 1.3-1-2 6.7-3.9 1 2-2.3 1.4 4.8 10.1-2 1.2m5.4-3.2l-6.6-11.6 2-1.4 2.5 4.6 2.7-2-2.6-4.5 2-1.3 6.5 11.6-2 1.3-3-5.2-2.6 1.8 3 5.3-2 1.4m8.3-6l-7.4-11 5-4.2 1.3 1.9-3.3 2.7 1.7 2.5 3-2.5 1.2 1.7-3 2.5 2 3 3.4-2.7 1.2 1.8-5 4.3M562 404l1.6-1.8.6.6c.5.6 1 1 1.2 1 .4 0 .7 0 1-.4.4-.4.6-.8.6-1.2a2 2 0 0 0-.5-1.2 2 2 0 0 0-.9-.5 4.2 4.2 0 0 0-1.5 0l-1.4.3a6.4 6.4 0 0 1-2.6.2 3.3 3.3 0 0 1-1.5-1 3.8 3.8 0 0 1-1.1-2.7 4.1 4.1 0 0 1 1.2-2.7c.8-1 1.7-1.3 2.5-1.3s1.7.5 2.6 1.4a3.8 3.8 0 0 1 .3.4l-1.6 1.7-.2-.3a3 3 0 0 0-1.3-.9c-.3 0-.7.1-1 .5-.3.3-.4.6-.4 1 0 .3.1.6.4 1 .3.3 1 .4 2.2.2l1.5-.3a5.3 5.3 0 0 1 2.5-.1c.6.1 1.2.6 1.8 1.2a4 4 0 0 1 1.1 2.8 4.5 4.5 0 0 1-1.3 2.9c-.9 1-1.8 1.4-2.6 1.4-1 0-1.8-.6-2.7-1.6l-.5-.6m9.5-3.9l-9.5-8.8 4.1-5.4 1.6 1.5-2.6 3.4 2.2 2 2.4-3.2 1.5 1.4-2.4 3.2 2.6 2.5 2.6-3.6 1.6 1.5-4 5.5m2.3-12.3l1.1-1.8-4.8-2.3 3.7 4.1m2.3 6.1l-8.7-10.2 1.7-2.8 11.8 5-1.4 2.3-2.9-1.3-1.5 2.4 2.3 2.5-1.3 2.1m1.4-11.1l1.1-2.3.7.4c.7.4 1.2.6 1.5.5.3 0 .6-.3.8-.7.2-.5.3-1 .2-1.3 0-.4-.4-.7-.8-1a1.5 1.5 0 0 0-1-.2c-.3 0-.8.3-1.4.6l-1.3.8a6.6 6.6 0 0 1-2.4 1 3 3 0 0 1-1.7-.5 3.5 3.5 0 0 1-1.8-2.1 4.3 4.3 0 0 1 .4-3c.5-1.1 1.2-1.8 2-2 .9-.4 1.8-.2 2.8.4a3.5 3.5 0 0 1 .4.2l-1 2.2-.3-.2c-.6-.3-1-.5-1.4-.4-.3 0-.6.3-.9.8-.1.4-.2.7 0 1 0 .4.2.6.6.8.4.3 1.2.1 2.2-.5l1.3-.8c1-.6 1.8-1 2.4-1 .6 0 1.3.2 2 .6 1 .5 1.6 1.3 1.9 2.2.2 1 0 2-.5 3.2-.5 1.3-1.2 2-2 2.3-1 .3-2 0-3.1-.6a11.5 11.5 0 0 1-.6-.4'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14509,6 +14627,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14536,6 +14655,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14566,6 +14686,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14589,6 +14710,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14647,6 +14769,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14684,6 +14807,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14713,6 +14837,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14736,6 +14861,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' d='M260.5 292.1c-.6.7-4.7 8.9-4.7 8.9l7-1.5-2.3-7.4zm4 10.5l-7.4 2.4 8.9 3.5-1.5-5.9zm3.3-10.3l3.7 10.9 9-2.6-2.3-5.2-10.4-3.1zm5.8 14.8l1.2 4.4 12 3-4.8-10.2-8.4 2.8zm13.2-9.3l4.3 10.2 9-3.5-3-4.5-10.3-2.2zm6 13.9l1.4 3.8 14 2-5.9-9.2-9.6 3.4zm13.4-11l5.2 9.1 13-4.8-1.4-3.5-16.8-.7zm7.6 12.4l2.7 4.8 16.2-.5-6-9-13 4.7zm17.1-12l4.4 7.6 10.4-5-2.8-4-12 1.4zm17 5.8l-10.3 5.1 2.7 4.5 13.8-2.2-6.2-7.4zm3.3-8l5.3 6.7 8.7-6.9-3-3-11 3.2zm15.9 3.5l-8.3 6.3 2.2 3.9 11.4-3-5.3-7.2zm11.4-13l2 2.9-5.7 8.5-5.9-7.6 9.6-3.8zm3.9 7.3l3.5 7-7 2.4-.6-3.3 4-6z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14758,6 +14884,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14778,6 +14905,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' d='M0 160h640v160H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14799,6 +14927,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14827,6 +14956,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14846,6 +14976,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#006233' stroke-width='11.7' d='M320 179.4L284.4 289l93.2-67.6H262.4l93.2 67.6z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14867,6 +14998,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -14952,6 +15084,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#ff1900' fill-rule='evenodd' stroke='#000' stroke-width='1.1' d='M209 776c0 7.8-10.2 14.2-23 14.2s-23-6.4-23-14.2 10.3-14.2 23-14.2 23 6.4 23 14.2z' transform='matrix(.57449 -.36357 .38048 .54895 -2.3 4.2)'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15083,6 +15216,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#d4af3a' d='M335.8 113c.7-.2 1.5.2 1.9.8.3.6 0 1.2-1 1.4-1.7.3-2.5-1.8-1-2.2z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15105,6 +15239,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15127,6 +15262,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15149,6 +15285,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15169,6 +15306,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <circle cx='320' cy='240' r='77.1' fill='#ffe600' stroke='#d20000' stroke-width='17.1'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15191,6 +15329,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15222,6 +15361,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='18' height='12' x='9' y='6.4' transform='matrix(40 0 0 40 -40 0)' xlink:href='#b'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15250,6 +15390,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <circle cx='107' cy='323.6' r='6.4' fill='#c4272f'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15274,6 +15415,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' transform='matrix(-1 0 0 1 640 0)' xlink:href='#a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15375,6 +15517,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15396,6 +15539,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#ffc400' d='M320 93.8l-13.5 41.5H263l35.3 25.6-13.5 41.4 35.3-25.6 35.3 25.6-13.5-41.4 35.3-25.6h-43.6z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15450,6 +15594,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15514,6 +15659,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15537,6 +15683,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15558,6 +15705,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <circle cx='380' cy='240' r='80' fill='#007e3a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15583,6 +15731,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -15980,6 +16129,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#977c2e' d='M301 239.1s.3 0 .5-.3-.1.4-.1.4l-.3.1-.2-.2z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16010,6 +16160,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16046,6 +16197,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16077,6 +16229,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16099,6 +16252,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16120,6 +16274,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <circle cx='320' cy='240' r='68' fill='#e05206'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16144,6 +16299,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16165,6 +16321,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16309,6 +16466,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#c8a400' d='M320 179.9l-25.7 44.5L268 270h104l-25.7-44.6L320 180zm0 2.4l25.2 43.7 24.7 42.8h-99.8l25.2-43.8z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16331,6 +16489,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16353,6 +16512,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#002664' d='M0 210h640v60H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16382,6 +16542,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16409,6 +16570,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16450,6 +16612,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16506,6 +16669,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path style='line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal' fill='#cc142b' d='M163.8 0v91.5H0v36.4h163.8v91.5h36.4V128h163.9V91.5H200.2V0z' color='#000' font-family='sans-serif' font-weight='400' overflow='visible'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16636,6 +16800,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16665,6 +16830,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16924,6 +17090,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16958,6 +17125,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -16982,6 +17150,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' fill-rule='evenodd' d='M175 399l-14.2-9-19 9.1 4.3-16.2-14.5-15.1 16.7-1 10-18.4 6.1 15.5 20.7 3.8-13 10.6zm36.2-79l-6.6-3-6.3 3.6 1-7.2-5.4-4.9 7.1-1.3 3-6.6 3.5 6.4 7.2.8-5 5.2zm32-45.2l-14.5-7-13.9 7.8 2.3-15.7-11.8-10.8 15.7-2.8 6.6-14.4 7.6 14 15.8 1.8-11 11.5zm-65.8-63l-17-8.5-16.5 9.1 2.8-18.6-13.8-13 18.7-3 8-17 8.7 16.7 18.8 2.3-13.3 13.4zm-60.8 65.4l-17-10-17 10.3 4.3-19.3-15.1-13 19.7-1.8 7.7-18.3 7.9 18.2 19.8 1.6-14.9 13z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17006,6 +17175,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17036,6 +17206,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17057,6 +17228,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17079,6 +17251,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17156,6 +17329,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17184,6 +17358,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17214,6 +17389,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17286,6 +17462,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17312,6 +17489,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17484,6 +17662,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fedf00' stroke='#000' stroke-width='.4' d='M327.6 249.5l-7.6-5.3-7.6 5.3 2.9-8.4-6.7-5.2h8.6l2.8-8.4 2.8 8.4h8.6l-6.7 5.2 2.9 8.4z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17506,6 +17685,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17528,6 +17708,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17835,6 +18016,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17857,6 +18039,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17885,6 +18068,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17926,6 +18110,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17954,6 +18139,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -17983,6 +18169,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18011,6 +18198,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18042,6 +18230,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18070,6 +18259,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18159,6 +18349,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#000' stroke-width='.3' d='M399.7 640.8c0 16.3-2.6 33.9-23.8 42.3-21.1-8.4-23.7-26-23.8-42.3h47.6zm0 0c0-6.2-.3-12.2-.2-17.4a63.6 63.6 0 0 0-23.6-4.3c-5.3 0-15.7.8-23.6 4.3.2 5.2-.2 11.2-.2 17.4h47.6z' transform='matrix(4.4862 0 0 4.4867 -1190.9 -2609)'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18192,6 +18383,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18214,6 +18406,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#002868' d='M0 210h640v60H0z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18238,6 +18431,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#0b4ea2' d='M233 263.3c-19.9 0-30.5 27.5-30.5 27.5s-6-13-22.2-13c-11 0-19 9.7-24.2 18.8 20 31.7 51.9 51.3 76.9 63.4 25-12 57-31.7 76.9-63.4-5.2-9-13.2-18.8-24.2-18.8-16.2 0-22.2 13-22.2 13S253 263.3 233 263.3z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18260,6 +18454,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18366,6 +18561,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='none' stroke='#00a400' stroke-linecap='round' stroke-width='2.2' d='M231.3 318.6c10.1 1.2 24.1.3 30.2 0M216 284.2c8.6 6.7 27.1 10.7 26.8 10.7m10.7 1.8c-2.8-14-5.8-17.4-8.3-26.2m-43.5-15.8c14.3 6.4 16.5 10.6 25.6 17m5.2-14c1.2-17.3 3.6-21.9 7.9-25.9m-38.7-2c5.2 5.7 22.2 23.7 22.2 23.7m-7-39.6c6.4 4.5 6.4 21 6.4 21'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18389,6 +18585,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#0b7226' d='M342 218.8h71.8l-56.6 43.6 20.7 69.3-56.6-43.6-56.6 41.6 20.7-67.3-56.6-43.6h69.8l22.7-71.3z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18415,6 +18612,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18436,6 +18634,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#ecc81d' d='M320 153.2l56.4 173.6-147.7-107.3h182.6L263.6 326.8z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18459,6 +18658,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fcdd09' d='M200.7 194.8L61.7 240l139 45.1L114.9 167v146z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -18490,6 +18690,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' x='700' transform='translate(-523.2)' xlink:href='#c'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19106,6 +19307,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19177,6 +19379,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19198,6 +19401,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#090' fill-rule='evenodd' d='M201.9 281l-28.8-20.9-28.7 21.1 10.7-34.2-28.7-21.2 35.4-.3 11-34.1 11.3 34h35.4L191 246.9l10.9 34.2zm307.6 0l-28.8-20.9-28.7 21.1 10.7-34.2-28.6-21.2 35.4-.3 11-34.1 11.2 34h35.4l-28.5 21.4 11 34.2z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19258,6 +19462,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19340,6 +19545,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19362,6 +19568,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19392,6 +19599,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' x='499' y='227' transform='scale(1.2)' xlink:href='#a'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19421,6 +19629,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19443,6 +19652,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19480,6 +19690,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='100%' height='100%' fill='#f8c300' transform='matrix(-1 0 0 1 640 0)' xlink:href='#d'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19500,6 +19711,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' d='M106.8 109.1l-4 12.2 10.4-7.5 10.3 7.5-3.9-12.2 10.3-7.5h-12.8l-3.9-12.2-4 12.2H96.4zm78.1 57.4l8.6-6.3h-10.7l-3.3-10.1-3.3 10.1h-10.6l8.6 6.3-3.3 10.1 8.6-6.3 8.7 6.3zm-145.2 13l-4-12.2-3.9 12.2H19l10.3 7.5-3.9 12.2 10.3-7.5 10.4 7.5-4-12.2 10.4-7.5zm78.1 122.3l-4.6-14.2-4.6 14.2h-15l12.1 8.7-4.6 14.3 12.1-8.8 12.1 8.8-4.7-14.3 12.1-8.7z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19528,6 +19740,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19749,6 +19962,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19777,6 +19991,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19802,6 +20017,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19825,6 +20041,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19845,6 +20062,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill-rule='evenodd' d='M27.7.2h118.6l468.2 479.3H492.2L27.7.2z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19887,6 +20105,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19916,6 +20135,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19944,6 +20164,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -19965,6 +20186,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20010,6 +20232,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20040,6 +20263,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20071,6 +20295,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#fff' d='M320 242c.1 0 .3.5.6.4.3 0 .5.6.1.6-.2 0-.2.3-.2.5 0 .1 0 .5-.3.8-.2.2-.4 0-.7-.1-.3-.2-.5-.2-.9-.2-.3 0 0 .6 0 .6s-1.6 0-1.3-.3c.3-.2.6-.3.4-.4-.2-.2 0-.3 0-.6s.7-.2.5-.4c-.2-.2 0-1.1.4-.6l.2-.5c-.2-.3 0-.3-.5-.5s-.1-1-.1-1v-.7c.2-.7 1.7-.8 1.8-.1v1.1l.5.2s-.1.4-.5.4 0 .2-.2.5l.2.4zm-5 .8c.3-.4.8-2.4 1.4-1.8.6.6 1 0 1 0s.3.3.1 1c-.1.5-.3 1.1-.6 1.2-.4 0-.7.3-1.2.4-.4 0-.6-.8-.6-.8z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20096,6 +20321,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20139,6 +20365,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20184,6 +20411,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20678,6 +20906,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20701,6 +20930,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20742,6 +20972,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <use width='180' height='120' transform='rotate(-80 320 336)' xlink:href='#f'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20785,6 +21016,7 @@ exports[`Flags.vue renders correctly 1`] = `
   <path fill='#162667' stroke='#010002' stroke-miterlimit='10' stroke-width='1.5' d='M399.1 145.8s-36.4 19-74.3-1.6c-37.9 20.6-74.3 1.6-74.3 1.6V201h148.6v-55.2z'/>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20927,6 +21159,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20953,6 +21186,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -20986,6 +21220,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21008,6 +21243,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21030,6 +21266,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21061,6 +21298,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21083,6 +21321,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21105,6 +21344,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21137,6 +21377,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21179,6 +21420,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
@@ -21215,6 +21457,7 @@ exports[`Flags.vue renders correctly 1`] = `
   </g>
 
 "
+            fonticontag="i"
             height="42"
           />
            
diff --git a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
index beb5bf57..48291e43 100644
--- a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
@@ -1,20 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alerts.vue renders correctly 1`] = `
-<crow-stub>
+<crow-stub
+  gutters="true"
+>
   <ccol-stub
     col="12"
     md="6"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -41,10 +37,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         </div>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <p />
            
@@ -113,14 +106,8 @@ exports[`Alerts.vue renders correctly 1`] = `
     md="6"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -135,10 +122,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         </small>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <calert-stub
             color="primary"
@@ -285,14 +269,8 @@ exports[`Alerts.vue renders correctly 1`] = `
     md="6"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -302,10 +280,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         </small>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <calert-stub
           color="success"
           show="true"
@@ -343,14 +318,8 @@ exports[`Alerts.vue renders correctly 1`] = `
     md="6"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -361,10 +330,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         </small>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <calert-stub
           closebutton="true"
           color="secondary"
@@ -409,14 +375,8 @@ exports[`Alerts.vue renders correctly 1`] = `
       </ccardbody-stub>
     </ccard-stub>
      
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         <i
           class="fa fa-align-justify"
         />
@@ -427,10 +387,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         </small>
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <div>
           <calert-stub
             closebutton="true"
diff --git a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
index 16ddf37c..e0926c70 100644
--- a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
@@ -43,13 +43,10 @@ exports[`Badges.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <h2>
           Example heading 
           <span
-            class="badge"
-            color="primary"
+            class="badge badge-primary"
           >
             New
           </span>
@@ -58,8 +55,7 @@ exports[`Badges.vue renders correctly 1`] = `
         <h3>
           Example heading 
           <span
-            class="badge"
-            color="primary"
+            class="badge badge-primary"
           >
             New
           </span>
@@ -68,8 +64,7 @@ exports[`Badges.vue renders correctly 1`] = `
         <h4>
           Example heading 
           <span
-            class="badge"
-            color="primary"
+            class="badge badge-primary"
           >
             New
           </span>
@@ -78,8 +73,7 @@ exports[`Badges.vue renders correctly 1`] = `
         <h5>
           Example heading 
           <span
-            class="badge"
-            color="primary"
+            class="badge badge-primary"
           >
             New
           </span>
@@ -88,8 +82,7 @@ exports[`Badges.vue renders correctly 1`] = `
         <h6>
           Example heading 
           <span
-            class="badge"
-            color="primary"
+            class="badge badge-primary"
           >
             New
           </span>
@@ -100,16 +93,14 @@ exports[`Badges.vue renders correctly 1`] = `
         class="card-footer"
       >
         <button
-          class="btn"
-          color="primary"
+          class="btn btn-primary"
           type="button"
         >
           
           Notifications
           
           <span
-            class="badge ml-2 position-static"
-            color="light"
+            class="badge ml-2 position-static badge-light"
           >
             4
           </span>
@@ -142,60 +133,50 @@ exports[`Badges.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <span
-          class="badge"
-          color="primary"
+          class="badge badge-primary"
         >
           Primary
         </span>
          
         <span
-          class="badge"
-          color="secondary"
+          class="badge badge-secondary"
         >
           Secondary
         </span>
          
         <span
-          class="badge"
-          color="success"
+          class="badge badge-success"
         >
           Success
         </span>
          
         <span
-          class="badge"
-          color="danger"
+          class="badge badge-danger"
         >
           Danger
         </span>
          
         <span
-          class="badge"
-          color="warning"
+          class="badge badge-warning"
         >
           Warning
         </span>
          
         <span
-          class="badge"
-          color="info"
+          class="badge badge-info"
         >
           Info
         </span>
          
         <span
-          class="badge"
-          color="light"
+          class="badge badge-light"
         >
           Light
         </span>
          
         <span
-          class="badge"
-          color="dark"
+          class="badge badge-dark"
         >
           Dark
         </span>
@@ -223,60 +204,50 @@ exports[`Badges.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <span
-          class="badge badge-pill"
-          color="primary"
+          class="badge badge-primary badge-pill"
         >
           Primary
         </span>
          
         <span
-          class="badge badge-pill"
-          color="secondary"
+          class="badge badge-secondary badge-pill"
         >
           Secondary
         </span>
          
         <span
-          class="badge badge-pill"
-          color="success"
+          class="badge badge-success badge-pill"
         >
           Success
         </span>
          
         <span
-          class="badge badge-pill"
-          color="danger"
+          class="badge badge-danger badge-pill"
         >
           Danger
         </span>
          
         <span
-          class="badge badge-pill"
-          color="warning"
+          class="badge badge-warning badge-pill"
         >
           Warning
         </span>
          
         <span
-          class="badge badge-pill"
-          color="info"
+          class="badge badge-info badge-pill"
         >
           Info
         </span>
          
         <span
-          class="badge badge-pill"
-          color="light"
+          class="badge badge-light badge-pill"
         >
           Light
         </span>
          
         <span
-          class="badge badge-pill"
-          color="dark"
+          class="badge badge-dark badge-pill"
         >
           Dark
         </span>
@@ -304,11 +275,8 @@ exports[`Badges.vue renders correctly 1`] = `
       <div
         class="card-body"
       >
-        <!---->
-        <!---->
         <a
-          class="badge"
-          color="primary"
+          class="badge badge-primary"
           href="#"
           target="_self"
         >
@@ -316,8 +284,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="secondary"
+          class="badge badge-secondary"
           href="#"
           target="_self"
         >
@@ -325,8 +292,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="success"
+          class="badge badge-success"
           href="#"
           target="_self"
         >
@@ -334,8 +300,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="danger"
+          class="badge badge-danger"
           href="#"
           target="_self"
         >
@@ -343,8 +308,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="warning"
+          class="badge badge-warning"
           href="#"
           target="_self"
         >
@@ -352,8 +316,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="info"
+          class="badge badge-info"
           href="#"
           target="_self"
         >
@@ -361,8 +324,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="light"
+          class="badge badge-light"
           href="#"
           target="_self"
         >
@@ -370,8 +332,7 @@ exports[`Badges.vue renders correctly 1`] = `
         </a>
          
         <a
-          class="badge"
-          color="dark"
+          class="badge badge-dark"
           href="#"
           target="_self"
         >
diff --git a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
index 56c30a69..200a76eb 100644
--- a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
@@ -5,19 +5,15 @@ exports[`Modals.vue renders correctly 1`] = `
   class="wrapper"
 >
   <div>
-    <crow-stub>
+    <crow-stub
+      gutters="true"
+    >
       <ccol-stub
         col="12"
         tag="div"
       >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
+        <ccard-stub>
+          <ccardheader-stub>
             <i
               class="fa fa-align-justify"
             />
@@ -41,10 +37,7 @@ exports[`Modals.vue renders correctly 1`] = `
             </div>
           </ccardheader-stub>
            
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
+          <ccardbody-stub>
             <cbutton-stub
               activeclass="active"
               class="mr-1"
@@ -188,6 +181,9 @@ exports[`Modals.vue renders correctly 1`] = `
   </div>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
+    fade="true"
     title="Modal title"
   >
     
@@ -201,6 +197,9 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
+    fade="true"
     size="lg"
     title="Modal title"
   >
@@ -215,6 +214,9 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
+    fade="true"
     size="sm"
     title="Modal title"
   >
@@ -229,6 +231,9 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
+    fade="true"
     title="Modal title"
   >
     
@@ -242,7 +247,10 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
     color="success"
+    fade="true"
     title="Modal title"
   >
     
@@ -256,7 +264,10 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
     color="warning"
+    fade="true"
     title="Modal title"
   >
     
@@ -270,7 +281,10 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
     color="danger"
+    fade="true"
     title="Modal title"
   >
     
@@ -284,7 +298,10 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
+    closeonbackdrop="true"
     color="info"
+    fade="true"
     title="Modal title"
   >
     
@@ -298,9 +315,12 @@ exports[`Modals.vue renders correctly 1`] = `
   </cmodal-stub>
    
   <cmodal-stub
+    backdrop="true"
     centered="true"
+    closeonbackdrop="true"
     color="dark"
-    nocloseonbackdrop="true"
+    fade="true"
+    no-close-on-backdrop="true"
     size="lg"
     title="Modal title 2"
   >
diff --git a/tests/unit/views/pages/__snapshots__/Login.spec.js.snap b/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
index 1e053046..9fca7a9b 100644
--- a/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Login.spec.js.snap
@@ -6,6 +6,7 @@ exports[`Login.vue renders correctly 1`] = `
 >
   <crow-stub
     class="justify-content-center"
+    gutters="true"
   >
     <ccol-stub
       md="8"
@@ -14,13 +15,8 @@ exports[`Login.vue renders correctly 1`] = `
       <ccardgroup-stub>
         <ccard-stub
           class="p-4"
-          subtitletag="h6"
-          titletag="h4"
         >
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
+          <ccardbody-stub>
             <cform-stub>
               <h1>
                 Login
@@ -32,20 +28,25 @@ exports[`Login.vue renders correctly 1`] = `
                 Sign In to your account
               </p>
                
-              <cinput
+              <cinput-stub
                 autocomplete="username email"
+                lazy="400"
                 placeholder="Username"
                 prependhtml=<i class='cui-user'></i>
+                type="text"
               />
                
-              <cinput
+              <cinput-stub
                 autocomplete="curent-password"
+                lazy="400"
                 placeholder="Password"
                 prependhtml=<i class='cui-lock-locked'></i>
                 type="password"
               />
                
-              <crow-stub>
+              <crow-stub
+                gutters="true"
+              >
                 <ccol-stub
                   col="6"
                   tag="div"
@@ -90,8 +91,6 @@ exports[`Login.vue renders correctly 1`] = `
         <ccard-stub
           bodywrapper="true"
           class="text-white text-center bg-primary py-5 d-md-down-none"
-          subtitletag="h6"
-          titletag="h4"
         >
           <h2>
             Sign up
diff --git a/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap b/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
index 2a219889..49d8bde4 100644
--- a/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Page404.spec.js.snap
@@ -6,6 +6,7 @@ exports[`Page404.vue renders correctly 1`] = `
 >
   <crow-stub
     class="w-100 justify-content-center"
+    gutters="true"
   >
     <ccol-stub
       md="6"
@@ -36,10 +37,12 @@ exports[`Page404.vue renders correctly 1`] = `
           </p>
         </div>
          
-        <cinput
+        <cinput-stub
           class="mb-3"
+          lazy="400"
           placeholder="What are you looking for?"
           prependhtml=<i class='cui-magnifying-glass'></i>
+          type="text"
         />
       </div>
     </ccol-stub>
diff --git a/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap b/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
index 9967a255..427954e0 100644
--- a/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Page500.spec.js.snap
@@ -6,6 +6,7 @@ exports[`Page500.vue renders correctly 1`] = `
 >
   <crow-stub
     class="w-100 justify-content-center"
+    gutters="true"
   >
     <ccol-stub
       md="6"
@@ -33,10 +34,12 @@ exports[`Page500.vue renders correctly 1`] = `
         </p>
       </div>
        
-      <cinput
+      <cinput-stub
         class="mb-3"
+        lazy="400"
         placeholder="What are you looking for?"
         prependhtml=<i class='cui-magnifying-glass'></i>
+        type="text"
       />
     </ccol-stub>
   </crow-stub>
diff --git a/tests/unit/views/pages/__snapshots__/Register.spec.js.snap b/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
index d98cbc4e..892cfced 100644
--- a/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
+++ b/tests/unit/views/pages/__snapshots__/Register.spec.js.snap
@@ -6,6 +6,7 @@ exports[`Register.vue renders correctly 1`] = `
 >
   <crow-stub
     class="w-100 justify-content-center"
+    gutters="true"
   >
     <ccol-stub
       md="6"
@@ -14,13 +15,9 @@ exports[`Register.vue renders correctly 1`] = `
     >
       <ccard-stub
         class="mx-4 mb-0"
-        subtitletag="h6"
-        titletag="h4"
       >
         <ccardbody-stub
           class="p-4"
-          subtitletag="h6"
-          titletag="h4"
         >
           <cform-stub>
             <h1>
@@ -33,28 +30,34 @@ exports[`Register.vue renders correctly 1`] = `
               Create your account
             </p>
              
-            <cinput
+            <cinput-stub
               autocomplete="username"
+              lazy="400"
               placeholder="Username"
               prependhtml=<i class='cui-user'></i>
+              type="text"
             />
              
-            <cinput
+            <cinput-stub
               autocomplete="email"
+              lazy="400"
               placeholder="Email"
-              prepend-html="@"
+              prependhtml="@"
+              type="text"
             />
              
-            <cinput
+            <cinput-stub
               autocomplete="new-password"
+              lazy="400"
               placeholder="Password"
               prependhtml=<i class='cui-lock-locked'></i>
               type="password"
             />
              
-            <cinput
+            <cinput-stub
               autocomplete="new-password"
               class="mb-4"
+              lazy="400"
               placeholder="Repeat password"
               prependhtml=<i class='cui-lock-locked'></i>
               type="password"
@@ -77,10 +80,10 @@ exports[`Register.vue renders correctly 1`] = `
          
         <ccardfooter-stub
           class="p-4"
-          subtitletag="h6"
-          titletag="h4"
         >
-          <crow-stub>
+          <crow-stub
+            gutters="true"
+          >
             <ccol-stub
               col="6"
               tag="div"
diff --git a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
index a7b5f0db..7a11c3f5 100644
--- a/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
+++ b/tests/unit/views/theme/__snapshots__/Colors.spec.js.snap
@@ -19,8 +19,6 @@ exports[`Colors.vue renders correctly 1`] = `
     <div
       class="card-body"
     >
-      <!---->
-      <!---->
       <div
         class="row"
       >
@@ -421,8 +419,6 @@ exports[`Colors.vue renders correctly 1`] = `
     <div
       class="card-body"
     >
-      <!---->
-      <!---->
       <div
         class="row"
       >
diff --git a/tests/unit/views/users/__snapshots__/User.spec.js.snap b/tests/unit/views/users/__snapshots__/User.spec.js.snap
index 4fe8c7c1..9867fdc8 100644
--- a/tests/unit/views/users/__snapshots__/User.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/User.spec.js.snap
@@ -1,44 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`User.vue renders correctly 1`] = `
-<crow-stub>
+<crow-stub
+  gutters="true"
+>
   <ccol-stub
     col="12"
     lg="6"
     tag="div"
   >
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+    <ccard-stub>
+      <ccardheader-stub>
         
         User id:  
       
       </ccardheader-stub>
        
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardbody-stub>
         <ctable-stub
           defaultsorter="[object Object]"
           fields="[object Object],[object Object]"
           fixed="true"
           items="[object Object]"
           itemsperpage="10"
-          small="true"
+          responsive="true"
+          small=""
           striped="true"
         />
       </ccardbody-stub>
        
-      <ccardfooter-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
+      <ccardfooter-stub>
         <cbutton-stub
           activeclass="active"
           color="primary"
diff --git a/tests/unit/views/users/__snapshots__/Users.spec.js.snap b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
index 2cdeb417..5f921553 100644
--- a/tests/unit/views/users/__snapshots__/Users.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Users.vue renders correctly 1`] = `
-<crow-stub>
+<crow-stub
+  gutters="true"
+>
   <ccol-stub
     col="12"
     tag="div"
@@ -11,8 +13,6 @@ exports[`Users.vue renders correctly 1`] = `
       bodywrapper="true"
       headerhtml="Users"
       name="slide"
-      subtitletag="h6"
-      titletag="h4"
     >
       <ctable-stub
         clickablerows="true"
@@ -23,6 +23,7 @@ exports[`Users.vue renders correctly 1`] = `
         items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         itemsperpage="5"
         pagination="[object Object]"
+        responsive="true"
         striped="true"
       />
     </ccard-stub>
diff --git a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
index 07809d2e..115cc521 100644
--- a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
+++ b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
@@ -2,7 +2,9 @@
 
 exports[`Widgets.vue renders correctly 1`] = `
 <div>
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="3"
       sm="6"
@@ -67,7 +69,9 @@ exports[`Widgets.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="3"
       sm="6"
@@ -129,7 +133,93 @@ exports[`Widgets.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        color="primary"
+        header="$1.999,50"
+        iconpadding="true"
+        text="Income"
+      >
+        <cicon-stub
+          fonticontag="i"
+          name="settings"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        color="info"
+        header="$1.999,50"
+        iconpadding="true"
+        text="Income"
+      >
+        <cicon-stub
+          fonticontag="i"
+          name="laptop"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        color="warning"
+        header="$1.999,50"
+        iconpadding="true"
+        text="Income"
+      >
+        <cicon-stub
+          fonticontag="i"
+          name="moon"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+     
+    <ccol-stub
+      col="12"
+      lg="3"
+      sm="6"
+      tag="div"
+    >
+      <cwidgeticon-stub
+        color="danger"
+        header="$1.999,50"
+        iconpadding="true"
+        text="Income"
+      >
+        <cicon-stub
+          fonticontag="i"
+          name="bell"
+          width="24"
+        />
+      </cwidgeticon-stub>
+    </ccol-stub>
+  </crow-stub>
+   
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       col="12"
       lg="3"
@@ -142,6 +232,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
+          fonticontag="i"
           name="settings"
           width="24"
         />
@@ -160,6 +251,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
+          fonticontag="i"
           name="laptop"
           width="24"
         />
@@ -178,6 +270,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
+          fonticontag="i"
           name="moon"
           width="24"
         />
@@ -196,6 +289,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         text="Income"
       >
         <cicon-stub
+          fonticontag="i"
           name="bell"
           width="24"
         />
@@ -203,81 +297,9 @@ exports[`Widgets.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="danger"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          name="bell"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       col="12"
       lg="4"
@@ -291,6 +313,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           class="mx-5 "
+          fonticontag="i"
           name="settings"
           width="24"
         />
@@ -310,6 +333,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           class="mx-5 "
+          fonticontag="i"
           name="laptop"
           width="24"
         />
@@ -329,6 +353,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       >
         <cicon-stub
           class="mx-5 "
+          fonticontag="i"
           name="moon"
           width="24"
         />
@@ -352,6 +377,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="people"
       />
@@ -364,6 +390,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="userFollow"
       />
@@ -376,6 +403,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="basketLoaded"
       />
@@ -387,6 +415,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="chartPie"
       />
@@ -399,6 +428,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="speedometer"
       />
@@ -416,6 +446,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="people"
       />
@@ -429,6 +460,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="userFollow"
       />
@@ -442,6 +474,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="basketLoaded"
       />
@@ -455,6 +488,7 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="chartPie"
       />
@@ -468,13 +502,16 @@ exports[`Widgets.vue renders correctly 1`] = `
       value="25"
     >
       <cicon-stub
+        fonticontag="i"
         height="36"
         name="speedometer"
       />
     </cwidgetprogressicon-stub>
   </ccardgroup-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="2"
       sm="6"
@@ -487,6 +524,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="people"
         />
@@ -505,6 +543,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="userFollow"
         />
@@ -523,6 +562,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="basketLoaded"
         />
@@ -541,6 +581,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="chartPie"
         />
@@ -559,6 +600,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="speedometer"
         />
@@ -577,6 +619,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="speech"
         />
@@ -584,7 +627,9 @@ exports[`Widgets.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       md="2"
       sm="6"
@@ -598,6 +643,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="people"
         />
@@ -617,6 +663,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="userFollow"
         />
@@ -636,6 +683,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="basketLoaded"
         />
@@ -655,6 +703,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="chartPie"
         />
@@ -674,6 +723,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="speedometer"
         />
@@ -693,6 +743,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cicon-stub
+          fonticontag="i"
           height="36"
           name="speech"
         />
@@ -702,7 +753,9 @@ exports[`Widgets.vue renders correctly 1`] = `
    
   <widgetsdropdown-stub />
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="3"
       sm="6"
@@ -820,7 +873,9 @@ exports[`Widgets.vue renders correctly 1`] = `
     </ccol-stub>
   </crow-stub>
    
-  <crow-stub>
+  <crow-stub
+    gutters="true"
+  >
     <ccol-stub
       lg="2"
       sm="4"