diff --git a/src/Dropdown.vue b/src/Dropdown.vue
index 6e68969c..e4c12146 100644
--- a/src/Dropdown.vue
+++ b/src/Dropdown.vue
@@ -52,7 +52,7 @@ export default {
       type: Boolean,
       default: false
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
@@ -62,7 +62,7 @@ export default {
       return `btn-${this.type}`;
     },
     classes () {
-      return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group', this.customClass]
+      return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group', this.cc]
     },
     menuClasses() {
       return [{show: this.showBool}, {'dropdown-menu-right': this.menuAlignRight}];
diff --git a/src/Modal.vue b/src/Modal.vue
index 11f694a4..5e3eba5b 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <div role="dialog"
-    :class="[customClass,
+    :class="[cc,
     {
       'modal':true,
       'fade':effect === 'fade',
@@ -72,7 +72,7 @@ export default {
     id: {
       type: String
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/Navbar.vue b/src/Navbar.vue
index 9d645a2d..75469ddd 100644
--- a/src/Navbar.vue
+++ b/src/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav ref="navbar" :class="['navbar', 'navbar-expand-md', customClass,
+  <nav ref="navbar" :class="['navbar', 'navbar-expand-md', cc,
   {
     'navbar-dark':(type === 'inverse'),
     'navbar-light':(type === 'default'),
@@ -40,7 +40,7 @@ export default {
       type: String,
       default: ''
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/Panel.vue b/src/Panel.vue
index 05fcd0a6..35ae5316 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="['card-container', customClass]" ref="cardContainer">
+    <span :class="['card-container', cc]" ref="cardContainer">
         <div class="morph" v-show="localMinimized">
             <button :class="['morph-display-wrapper', 'btn', btnType, 'card-title']" @click="open()">
                 <template v-if="altContent">
@@ -136,7 +136,7 @@
         type: Boolean,
         default: false
       },
-      customClass: {
+      cc: {
         type: String,
         default: ''
       }
diff --git a/src/Pic.vue b/src/Pic.vue
index 019b70ec..6ea78454 100644
--- a/src/Pic.vue
+++ b/src/Pic.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['image-wrapper', customClass]">
+    <div :class="['image-wrapper', cc]">
         <img ref="pic" @load.once="computeWidth" :src="src" :alt="alt" :width="computedWidth" class="img-fluid rounded">
         <div class="image-caption">
             <slot></slot>
@@ -26,7 +26,7 @@
         type: String,
         default: ''
       },
-      customClass: {
+      cc: {
         type: String,
         default: ''
       }
diff --git a/src/Popover.vue b/src/Popover.vue
index e201d27f..4259f939 100644
--- a/src/Popover.vue
+++ b/src/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="[customClass]">
+  <span :class="[cc]">
     <span ref="trigger" v-if="hasSlot" v-on:click="false"><slot></slot></span><!--
     -->
     <transition :name="effect">
@@ -29,7 +29,7 @@ export default {
       type: String,
       default: 'hover'
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/Question.vue b/src/Question.vue
index 74611251..a4b3a835 100644
--- a/src/Question.vue
+++ b/src/Question.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['question-wrapper', customClass]">
+    <div :class="['question-wrapper', cc]">
         <div class="body-wrapper">
             <!-- Default slot is question body -->
             <slot></slot>
@@ -43,7 +43,7 @@
         type: Boolean,
         default: false
       },
-      customClass: {
+      cc: {
         type: String,
         default: ''
       }
diff --git a/src/Tab.vue b/src/Tab.vue
index 90310a61..7f8cfa5a 100644
--- a/src/Tab.vue
+++ b/src/Tab.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div role="tabpanel" class="tab-pane active" v-show="show"
-      :class="[{hide:!show}, customClass]"
+      :class="[{hide:!show}, cc]"
     >
       <slot></slot>
       <hr />
@@ -22,7 +22,7 @@ export default {
       type: Boolean,
       default: false
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/TabGroup.vue b/src/TabGroup.vue
index accb9936..977fda7e 100644
--- a/src/TabGroup.vue
+++ b/src/TabGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[customClass]">
+  <div :class="[cc]">
     <slot></slot>
   </div>
 </template>
@@ -17,7 +17,7 @@ export default {
     header: {
       type: String
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/Tabset.vue b/src/Tabset.vue
index 376d5e6e..ddcfdf88 100644
--- a/src/Tabset.vue
+++ b/src/Tabset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[customClass]">
+  <div :class="[cc]">
     <!-- Nav tabs -->
     <ul class="nav nav-tabs" :class="getNavStyleClass" role="tablist">
       <template v-for="t in headers">
@@ -34,7 +34,7 @@ export default {
       type: Number,
       default: 0
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/TipBox.vue b/src/TipBox.vue
index fc235a81..18c33bab 100644
--- a/src/TipBox.vue
+++ b/src/TipBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="alert container" :class="[boxStyle, customClass]" :style="customStyle">
+    <div class="alert container" :class="[boxStyle, cc]" :style="customStyle">
         <div class="icon-wrapper" v-if="!isDefault">
             <span v-html="iconType"></span>
         </div>
@@ -37,7 +37,7 @@
         type: String,
         default: 'none'
       },
-      customClass: {
+      cc: {
         type: String,
         default: ''
       }
diff --git a/src/Tooltip.vue b/src/Tooltip.vue
index 358d96a0..b58cd62a 100644
--- a/src/Tooltip.vue
+++ b/src/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="[customClass]">
+  <span :class="[cc]">
     <span ref="trigger" v-on:click="false"><slot></slot></span><!--
     -->
     <transition :name="effect">
@@ -34,7 +34,7 @@ export default {
       type: String,
       default: 'top'
     },
-    customClass: {
+    cc: {
       type: String,
       default: ''
     }
diff --git a/src/trigger.vue b/src/trigger.vue
index df04762c..afac7582 100644
--- a/src/trigger.vue
+++ b/src/trigger.vue
@@ -1,5 +1,5 @@
 <template>
-    <span ref="trigger" :class="[customClass]"><slot></slot></span>
+    <span ref="trigger" :class="[cc]"><slot></slot></span>
 </template>
 
 <script>
@@ -17,7 +17,7 @@
       _triggerBy: {
         type: Object
       },
-      customClass: {
+      cc: {
         type: String,
         default: ''
       }