diff --git a/src/components/admin/app-breadcrumbs/AppBreadcrumbs.vue b/src/components/admin/app-breadcrumbs/AppBreadcrumbs.vue
index 46174b4b5..3dc3e62da 100644
--- a/src/components/admin/app-breadcrumbs/AppBreadcrumbs.vue
+++ b/src/components/admin/app-breadcrumbs/AppBreadcrumbs.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="va-row">
     <div class="flex md12 xs12">
-      <vuestic-widget class="no-padding no-v-padding">
+      <va-card no-padding-v>
         <vuestic-breadcrumbs
           :breadcrumbs="breadcrumbs"
           :currentRouteName="currentRouteName"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
index cf8f35062..ea5635042 100644
--- a/src/components/dashboard/Dashboard.vue
+++ b/src/components/dashboard/Dashboard.vue
@@ -1,28 +1,28 @@
 <template>
   <div class="dashboard">
 
-    <dashboard-info-widgets></dashboard-info-widgets>
+    <dashboard-info-widgets />
 
-    <vuestic-widget class="no-padding no-v-padding">
+    <va-card no-padding>
       <vuestic-tabs
         :names="[$t('dashboard.dataVisualization'), $t('dashboard.usersAndMembers'), $t('dashboard.setupProfile'), $t('dashboard.features')]"
         ref="tabs">
         <div :slot="$t('dashboard.dataVisualization')">
-          <data-visualisation-tab></data-visualisation-tab>
+          <data-visualisation-tab />
         </div>
         <div :slot="$t('dashboard.usersAndMembers')">
-          <users-members-tab></users-members-tab>
+          <users-members-tab />
         </div>
         <div :slot="$t('dashboard.setupProfile')">
-          <setup-profile-tab></setup-profile-tab>
+          <setup-profile-tab />
         </div>
         <div :slot="$t('dashboard.features')">
-          <features-tab></features-tab>
+          <features-tab />
         </div>
       </vuestic-tabs>
-    </vuestic-widget>
+    </va-card>
 
-    <dashboard-bottom-widgets></dashboard-bottom-widgets>
+    <dashboard-bottom-widgets />
 
   </div>
 </template>
diff --git a/src/components/dashboard/DashboardBottomWidgets.vue b/src/components/dashboard/DashboardBottomWidgets.vue
index 8f287bdd2..18a9cf336 100644
--- a/src/components/dashboard/DashboardBottomWidgets.vue
+++ b/src/components/dashboard/DashboardBottomWidgets.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="va-row dashboard-bottom-widgets">
     <div class="flex md6 xs12">
-      <vuestic-widget class="no-h-padding no-v-padding">
-        <vuestic-feed :initialPosts="posts"></vuestic-feed>
-      </vuestic-widget>
+      <va-card no-padding>
+        <vuestic-feed :initialPosts="posts" />
+      </va-card>
     </div>
     <div class="flex md6 xs12">
-      <vuestic-widget class="business-posts">
+      <va-card class="business-posts">
         <vuestic-social-news
           class="vuestic-social-news" :news="news"
           :url="'http://instagram.com/smartapant'"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/dashboard/DashboardInfoWidgets.vue b/src/components/dashboard/DashboardInfoWidgets.vue
index ed72e1d7e..a36aa754a 100644
--- a/src/components/dashboard/DashboardInfoWidgets.vue
+++ b/src/components/dashboard/DashboardInfoWidgets.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="va-row dashboard-info-widgets">
     <div class="flex md6 xl3 xs12">
-      <vuestic-widget class="info-widget">
+      <va-card class="info-widget" stripe="success">
         <div class="info-widget-inner flex-center">
           <div class="stats fill-height flex-center">
             <div class="stats-number mb-2 flex-center">
@@ -11,10 +11,10 @@
             <div class="stats-title">{{'dashboard.elements' | translate}}</div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
     <div class="flex md6 xl3 xs12">
-      <vuestic-widget class="info-widget">
+      <va-card class="info-widget" stripe="success">
         <div class="info-widget-inner flex-center">
           <div class="stats fill-height flex-center">
             <div class="stats-number mb-2 flex-center">
@@ -24,10 +24,10 @@
             <div class="stats-title">{{'dashboard.versions' | translate}}</div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
     <div class="flex md6 xl3 xs12">
-      <vuestic-widget class="info-widget brand-danger">
+      <va-card class="info-widget brand-danger">
         <div class="info-widget-inner d-flex justify--space-between align--center">
           <div class="stats fill-height d-flex align--center">
             <div class="stats-number mb-2 flex-center">
@@ -41,10 +41,10 @@
             </va-progress-circle>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
     <div class="flex md6 xl3 xs12">
-      <vuestic-widget class="info-widget brand-info">
+      <va-card class="info-widget brand-info">
         <div class="info-widget-inner flex-center">
           <div class="stats fill-height flex-center">
             <div class="stats-number mb-2 flex-center">
@@ -55,7 +55,7 @@
             </div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/extra/Extra.vue b/src/components/extra/Extra.vue
index fce192ffe..7568faa90 100644
--- a/src/components/extra/Extra.vue
+++ b/src/components/extra/Extra.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="extra">
-    <vuestic-widget :headerText="'extra.tabs.title' | translate"
-                    class="no-v-padding">
+    <va-card :title="$t('extra.tabs.title')">
       <vuestic-tabs class="tabs mt-2"
                     :names="[$t('extra.tabs.maps'), $t('extra.tabs.setupProfile'), $t('extra.tabs.overview')]">
         <div :slot="'extra.tabs.overview' | translate"
@@ -16,38 +15,40 @@
           <setup-profile-tab wizardType="simple"></setup-profile-tab>
         </div>
       </vuestic-tabs>
-    </vuestic-widget>
+    </va-card>
 
     <div class="va-row">
       <div class="flex md4">
-        <vuestic-widget :headerText="$t('extra.profileCard')"
-                        class="profile-card-widget">
+        <va-card :title="$t('extra.profileCard')"
+                 class="profile-card-widget">
           <vuestic-profile-card :name="'Veronique Lee'"
                                 :location="'Malaga, Spain'"
                                 photoSource="https://i.imgur.com/NLrdqsk.png"
                                 :social="{twitter: 'twitter.com', facebook: 'facebook.com',
                                   instagram: 'instagram.com'}">
           </vuestic-profile-card>
-        </vuestic-widget>
+        </va-card>
       </div>
       <div class="flex md8">
-        <vuestic-widget :headerText="$t('extra.chat')" class="chat-widget">
+        <va-card :title="$t('extra.chat')" class="chat-widget">
           <vuestic-chat v-model="chatMessages"></vuestic-chat>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row bottom-widgets">
       <div class="flex md6">
-        <vuestic-widget class="no-h-padding no-v-padding">
-          <vuestic-feed :initialPosts="posts"></vuestic-feed>
-        </vuestic-widget>
+        <va-card no-padding>
+          <vuestic-feed :initialPosts="posts" />
+        </va-card>
       </div>
       <div class="flex md6">
-        <vuestic-widget class="business-posts">
-          <vuestic-social-news :news="news"
-                               :url="'https://instagram.com/smartapant'"></vuestic-social-news>
-        </vuestic-widget>
+        <va-card class="business-posts">
+          <vuestic-social-news
+            :news="news"
+            :url="'https://instagram.com/smartapant'"
+          />
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/forms/form-elements/FormElements.vue b/src/components/forms/form-elements/FormElements.vue
index dc94eacee..2d4308136 100644
--- a/src/components/forms/form-elements/FormElements.vue
+++ b/src/components/forms/form-elements/FormElements.vue
@@ -2,7 +2,7 @@
   <div class="form-elements">
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="'forms.inputs.title' | translate">
+        <va-card :title="'forms.inputs.title' | translate">
           <form>
 
             <div class="va-row">
@@ -128,13 +128,13 @@
             </div>
 
           </form>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="$t('forms.dateTimePicker.title')">
+        <va-card :title="$t('forms.dateTimePicker.title')">
           <form>
             <div class="va-row">
               <div class="flex md4">
@@ -239,13 +239,13 @@
               </div>
             </div>
           </form>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="'forms.selects.title' | translate">
+        <va-card :title="$t('forms.selects.title')">
           <form>
             <div class="va-row">
               <div class="flex md4">
@@ -280,13 +280,13 @@
               </div>
             </div>
           </form>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="'forms.controls.title' | translate">
+        <va-card :title="$t('forms.controls.title')">
           <form>
             <div class="va-row">
               <div class="flex md3">
@@ -361,7 +361,7 @@
               </div>
             </div>
           </form>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/forms/form-wizard/FormWizard.vue b/src/components/forms/form-wizard/FormWizard.vue
index 16a2e3070..98caa0546 100644
--- a/src/components/forms/form-wizard/FormWizard.vue
+++ b/src/components/forms/form-wizard/FormWizard.vue
@@ -2,8 +2,10 @@
   <div class="form-wizard">
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget class="no-h-padding"
-                        :headerText="$t('forms.wizard.simple')">
+        <va-card
+          :title="$t('forms.wizard.simple')"
+          no-padding
+        >
           <vuestic-wizard
             :steps="hsSteps">
             <div slot="page1" class="form-wizard-tab-content">
@@ -75,14 +77,16 @@
               </p>
             </div>
           </vuestic-wizard>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget class="no-h-padding"
-                        :headerText="$t('forms.wizard.rich')">
+        <va-card
+          class="no-h-padding"
+          :title="$t('forms.wizard.rich')"
+        >
           <vuestic-wizard
             :steps="hrSteps"
             wizard-type="rich">
@@ -155,13 +159,13 @@
               </p>
             </div>
           </vuestic-wizard>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="$t('forms.wizard.verticalRich')">
+        <va-card :title="$t('forms.wizard.verticalRich')">
           <vuestic-wizard
             :steps="vrSteps"
             wizard-layout="vertical"
@@ -235,14 +239,16 @@
               </p>
             </div>
           </vuestic-wizard>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget class="simple-vertical-wizard-widget"
-                        :headerText="$t('forms.wizard.verticalSimple')">
+        <va-card
+          class="simple-vertical-wizard-widget"
+          :title="$t('forms.wizard.verticalSimple')"
+        >
           <vuestic-wizard
             :steps="vsSteps"
             wizard-layout="vertical"
@@ -316,7 +322,7 @@
               </div>
             </div>
           </vuestic-wizard>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/forms/medium-editor/MediumEditor.vue b/src/components/forms/medium-editor/MediumEditor.vue
index 313b88670..ce3e47443 100644
--- a/src/components/forms/medium-editor/MediumEditor.vue
+++ b/src/components/forms/medium-editor/MediumEditor.vue
@@ -2,7 +2,7 @@
   <div class="medium-editor">
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="'forms.mediumEditor.title' | translate">
+        <va-card :title="$t('forms.mediumEditor.title')">
           <vuestic-medium-editor @initialized="handleEditorInitialization"
                                  :editor-options="editorOptions">
             <h1>Girl, no you don’t</h1>
@@ -85,7 +85,7 @@
               href="https://medium.com/@dorn.anna/girl-no-you-dont-2e21e826c62c">Medium</a>
             </p>
           </vuestic-medium-editor>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/maps/bubble-maps/BubbleMapsPage.vue b/src/components/maps/bubble-maps/BubbleMapsPage.vue
index 436a8d70c..45ee1b7cf 100644
--- a/src/components/maps/bubble-maps/BubbleMapsPage.vue
+++ b/src/components/maps/bubble-maps/BubbleMapsPage.vue
@@ -2,12 +2,12 @@
   <div class="bubble-maps-page">
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="bubble-maps-page__widget"
-          headerText="Bubble Maps"
+          title="Bubble Maps"
         >
           <bubble-map v-bind:map-data="bubbleMapData"/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
@@ -33,7 +33,7 @@ export default {
 <style lang="scss">
 .bubble-maps-page {
   &__widget {
-    .vuestic-widget-body {
+    .va-card__body {
       height: 65vh;
     }
   }
diff --git a/src/components/maps/google-maps/GoogleMapsPage.vue b/src/components/maps/google-maps/GoogleMapsPage.vue
index 8037f9062..a30710524 100644
--- a/src/components/maps/google-maps/GoogleMapsPage.vue
+++ b/src/components/maps/google-maps/GoogleMapsPage.vue
@@ -2,12 +2,12 @@
   <div class="google-maps-page">
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="google-maps-page__widget"
-          headerText="Google Maps"
+          title="Google Maps"
         >
           <google-map/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
@@ -27,7 +27,7 @@ export default {
 <style lang="scss">
  .google-maps-page{
    &__widget {
-     .vuestic-widget-body {
+     .va-card__body {
        height: 65vh;
      }
    }
diff --git a/src/components/maps/leaflet-maps/LeafletMapsPage.vue b/src/components/maps/leaflet-maps/LeafletMapsPage.vue
index 43a984312..9c9a0f272 100644
--- a/src/components/maps/leaflet-maps/LeafletMapsPage.vue
+++ b/src/components/maps/leaflet-maps/LeafletMapsPage.vue
@@ -2,12 +2,12 @@
   <div class="leaflet-maps-page">
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="leaflet-maps-page__widget"
-          headerText="Leaflet Maps"
+          title="Leaflet Maps"
         >
           <leaflet-map/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
@@ -27,7 +27,7 @@ export default {
 <style lang="scss">
 .leaflet-maps-page {
   &__widget {
-    .vuestic-widget-body {
+    .va-card__body {
       height: 65vh;
     }
   }
diff --git a/src/components/maps/line-maps/LineMapsPage.vue b/src/components/maps/line-maps/LineMapsPage.vue
index db7a28891..c17dc8197 100644
--- a/src/components/maps/line-maps/LineMapsPage.vue
+++ b/src/components/maps/line-maps/LineMapsPage.vue
@@ -2,12 +2,12 @@
   <div class="line-maps-page">
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="line-maps-page__widget"
-          headerText="Line Maps"
+          title="Line Maps"
         >
           <line-map v-bind:map-data="lineMapData"/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
@@ -33,7 +33,7 @@ export default {
 <style lang="scss">
 .line-maps-page {
   &__widget {
-    .vuestic-widget-body {
+    .va-card__body {
       height: 65vh;
     }
   }
diff --git a/src/components/maps/yandex-maps/YandexMapsPage.vue b/src/components/maps/yandex-maps/YandexMapsPage.vue
index f68214973..b54e61308 100644
--- a/src/components/maps/yandex-maps/YandexMapsPage.vue
+++ b/src/components/maps/yandex-maps/YandexMapsPage.vue
@@ -2,9 +2,9 @@
   <div class="yandex-maps-page">
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="yandex-maps-page__widget"
-          headerText="Yandex Maps"
+          title="Yandex Maps"
         >
           <yandex-map
             :use-object-manager:="true"
@@ -16,7 +16,7 @@
             :placemarks="placemarks"
             map-type="hybrid">
           </yandex-map>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
@@ -54,7 +54,7 @@ export default {
 <style lang="scss">
 .yandex-maps-page {
   &__widget {
-    .vuestic-widget-body {
+    .va-card__body {
       height: 65vh;
     }
   }
diff --git a/src/components/pages/404-pages/404PagesPage.vue b/src/components/pages/404-pages/404PagesPage.vue
index e34aaef8f..13578d67d 100644
--- a/src/components/pages/404-pages/404PagesPage.vue
+++ b/src/components/pages/404-pages/404PagesPage.vue
@@ -2,7 +2,7 @@
   <div class="not-found-pages va-row">
     <div class="flex md12">
       <div class="va-row">
-        <vuestic-card
+        <va-card
           class="not-found-pages__cards text--center"
           :image="item.imageUrl"
           v-for="item in items"
@@ -15,7 +15,7 @@
               {{ 'View Example' }}
             </va-button>
           </div>
-        </vuestic-card>
+        </va-card>
       </div>
     </div>
   </div>
@@ -57,7 +57,7 @@ export default {
 .not-found-pages {
   $cardGutter: #{(19/16)}rem;
 
-  .vuestic-card.not-found-pages__cards {
+  .va-card.not-found-pages__cards {
     min-width: 220px;
     margin: 0 $cardGutter calc(#{$cardGutter} * 2) $cardGutter;
   }
diff --git a/src/components/statistics/charts/Charts.vue b/src/components/statistics/charts/Charts.vue
index 9c6bb377e..eb442aef1 100644
--- a/src/components/statistics/charts/Charts.vue
+++ b/src/components/statistics/charts/Charts.vue
@@ -2,61 +2,61 @@
   <div class="charts">
     <div class="va-row">
       <div class="flex md6 xs12">
-        <vuestic-widget
+        <va-card
           class="chart-widget"
-          :headerText="$t('charts.verticalBarChart')"
+          :title="$t('charts.verticalBarChart')"
         >
           <vuestic-chart :data="verticalBarChartData" type="vertical-bar"/>
-        </vuestic-widget>
+        </va-card>
       </div>
       <div class="flex md6 xs12">
-        <vuestic-widget
+        <va-card
           class="chart-widget"
-          :headerText="$t('charts.horizontalBarChart')"
+          :title="$t('charts.horizontalBarChart')"
         >
           <vuestic-chart :data="horizontalBarChartData" type="horizontal-bar"/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="chart-widget"
-          :headerText="$t('charts.lineChart')"
+          :title="$t('charts.lineChart')"
         >
           <vuestic-chart :data="lineChartData" type="line"/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md6 xs12">
-        <vuestic-widget
+        <va-card
           class="chart-widget"
-          :headerText="$t('charts.pieChart')"
+          :title="$t('charts.pieChart')"
         >
           <vuestic-chart :data="pieChartData" type="pie"/>
-        </vuestic-widget>
+        </va-card>
       </div>
       <div class="flex md6 xs12">
-        <vuestic-widget
+        <va-card
           class="chart-widget"
-          :headerText="$t('charts.donutChart')"
+          :title="$t('charts.donutChart')"
         >
           <vuestic-chart :data="donutChartData" type="donut"/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget
+        <va-card
           class="chart-widget"
-          :headerText="$t('charts.bubbleChart')"
+          :title="$t('charts.bubbleChart')"
         >
           <vuestic-chart :data="bubbleChartData" type="bubble"/>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
@@ -94,7 +94,7 @@ export default {
 
 <style lang="scss">
 .chart-widget {
-  .vuestic-widget-body {
+  .va-card__body {
     height: 550px;
   }
 }
diff --git a/src/components/statistics/progress-bars/Widgets/CircleBars.vue b/src/components/statistics/progress-bars/Widgets/CircleBars.vue
index 63759186c..f9a26139e 100644
--- a/src/components/statistics/progress-bars/Widgets/CircleBars.vue
+++ b/src/components/statistics/progress-bars/Widgets/CircleBars.vue
@@ -1,5 +1,8 @@
 <template>
-  <vuestic-widget class="circle-bars progress-bar-widget" :headerText="$t('progressBars.circle')">
+  <va-card
+    class="circle-bars progress-bar-widget"
+    :title="$t('progressBars.circle')"
+  >
     <div class="va-row">
       <div v-for="n in 10" :key="n" class="flex xs2 md1">
         <va-progress-circle :value="value * n / 10"/>
@@ -16,7 +19,7 @@
         <va-progress-circle indeterminate theme="Info"/>
       </div>
     </div>
-  </vuestic-widget>
+  </va-card>
 </template>
 
 <script>
diff --git a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
index b13bf5bb2..d1238e315 100644
--- a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
+++ b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
@@ -1,5 +1,8 @@
 <template>
-  <vuestic-widget class="colorful-bars progress-bar-widget" :headerText="$t('progressBars.colors')">
+  <va-card
+    class="colorful-bars progress-bar-widget"
+    :title="$t('progressBars.colors')"
+  >
     <div class="va-row">
       <div v-for="n in 3" :key="n" class="flex md3 xs12">
         <va-progress-bar
@@ -11,7 +14,7 @@
         <va-progress-bar indeterminate theme="Black">Black</va-progress-bar>
       </div>
     </div>
-  </vuestic-widget>
+  </va-card>
 </template>
 
 <script>
diff --git a/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue b/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue
index cbebff295..8b746748c 100644
--- a/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue
+++ b/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue
@@ -1,5 +1,8 @@
 <template>
-  <vuestic-widget class="horizontal-bars progress-bar-widget" :headerText="$t('progressBars.horizontal')">
+  <va-card
+    class="horizontal-bars progress-bar-widget"
+    :title="$t('progressBars.horizontal')"
+  >
     <div class="va-row">
       <div class="flex md4 xs12">
         <va-progress-bar :value="value / 3"/>
@@ -26,7 +29,7 @@
         <va-progress-bar indeterminate theme="Info">Loading...</va-progress-bar>
       </div>
     </div>
-  </vuestic-widget>
+  </va-card>
 </template>
 
 <script>
diff --git a/src/components/tables/Tables.vue b/src/components/tables/Tables.vue
index d704e8a40..6eb3eff3c 100644
--- a/src/components/tables/Tables.vue
+++ b/src/components/tables/Tables.vue
@@ -2,7 +2,7 @@
   <div class="tables">
     <div class="va-row">
       <div class="flex xs12 md12">
-        <vuestic-widget :headerText="$t('tables.basic')">
+        <va-card :title="$t('tables.basic')">
           <div class="table-responsive">
             <table class="table table-striped first-td-padding">
               <thead>
@@ -74,13 +74,13 @@
               </tbody>
             </table>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget :headerText="$t('tables.styled')">
+        <va-card :title="$t('tables.styled')">
           <div class="table-responsive">
             <table class="table table-striped table-sm color-icon-label-table">
               <thead>
@@ -173,13 +173,13 @@
               </tbody>
             </table>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget :headerText="$t('tables.advanced')">
+        <va-card :title="$t('tables.advanced')">
           <vuestic-data-table
             :apiUrl="apiUrl"
             :tableFields="tableFields"
@@ -197,7 +197,7 @@
               color="#4ae387"
             />
           </vuestic-data-table>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
diff --git a/src/components/ui/buttons/Buttons.vue b/src/components/ui/buttons/Buttons.vue
index 35ccfabaf..23f58eacb 100644
--- a/src/components/ui/buttons/Buttons.vue
+++ b/src/components/ui/buttons/Buttons.vue
@@ -2,8 +2,10 @@
   <div class="buttons">
     <div class="va-row">
       <div class="flex md12 xl12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.types')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.types')"
+        >
           <div class="va-row">
             <div class="flex">
               <va-button> {{ $t('buttons.default') }} </va-button>
@@ -14,12 +16,14 @@
               <va-button flat disabled> {{ $t('buttons.disabled') }} </va-button>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="flex md12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.size')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.size')"
+        >
           <div class="va-row">
             <div class="flex">
               <va-button small> {{ $t('buttons.small') }} </va-button>
@@ -27,11 +31,13 @@
               <va-button large> {{ $t('buttons.large') }} </va-button>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
       <div class="flex md12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.tags')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.tags')"
+        >
           <div class="va-row">
             <div class="flex">
               <va-button> {{ $t('buttons.button') }} </va-button>
@@ -47,11 +53,13 @@
               </va-button>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
       <div class="flex md12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.advanced')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.advanced')"
+        >
           <div class="va-row">
             <div class="flex">
               <va-button icon="ion-md-close ion"> {{ $t('buttons.button') }} </va-button>
@@ -64,12 +72,14 @@
               <va-button icon="ion-md-close ion"/>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="flex md12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.colors')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.colors')"
+        >
           <div class="va-row">
             <div class="flex">
               <va-button color="danger"> {{ $t('buttons.danger') }} </va-button>
@@ -100,12 +110,14 @@
               <va-button flat color="gray"> {{ $t('buttons.gray') }} </va-button>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="flex md12 xl12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.buttonGroups')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.buttonGroups')"
+        >
           <div class="va-row">
             <div class="flex xs12 lg12 xl6">
               <va-button-group>
@@ -153,12 +165,14 @@
               </va-button-group>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="flex md12 xl12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.buttonToggles')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.buttonToggles')"
+        >
           <div class="va-row">
             <div class="flex xs12 md6 lg6">
               <va-button-toggle
@@ -197,12 +211,14 @@
               />
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="flex md12 xl12">
-        <vuestic-widget class="larger-padding"
-                        :headerText="$t('buttons.pagination')">
+        <va-card
+          class="larger-padding"
+          :title="$t('buttons.pagination')"
+        >
           <div class="va-row">
             <div class="flex xs12 lg12 xl6">
               <va-pagination
@@ -235,7 +251,7 @@
                 color="success"/>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/ui/cards/Cards.vue b/src/components/ui/cards/Cards.vue
index 836e847d7..064e4d24d 100644
--- a/src/components/ui/cards/Cards.vue
+++ b/src/components/ui/cards/Cards.vue
@@ -1,182 +1,125 @@
 <template>
   <div class="cards">
-    <div class="flex md12">
       <div class="cards-container va-row d-flex wrap align--start">
         <!-- eslint-disable vue/valid-v-for -->
         <template v-for="loop in listLoops">
-          <vuestic-card
-            :key="loop"
-            title-on-image
-            overlay
-            image="https://picsum.photos/300/200/?image=1043">
-            <template slot="title">
-              {{ $t('cards.title.overlayAndTextOnImage') }}
-            </template>
-            {{ $t('cards.contentText') }}
-            <p class="pt-3 mb-0">
-              <va-button flat color="gray" href="#">
-                {{ $t('cards.link.secondaryAction') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=898"
-          >
-            <template slot="title">
-              {{ $t('cards.title.normal') }}
-            </template>
-            {{ $t('cards.contentText') }}
-            <p class="pt-3 mb-0">
-              <va-button flat href="#">
-                {{ $t('cards.link.readFull') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=1052"
-            title-on-image
-            overlay
-          >
-            <template slot="title">
-              {{ $t('cards.title.titleOnImageNoOverlay') }}
-            </template>
-            {{ $t('cards.contentText') }}
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=1067"
-          >
-            Short one
-            <p class="mb-0 mt-2">
-              <va-button flat href="#">
-                {{ $t('cards.link.action1') }}
-              </va-button>
-              <va-button color="gray" flat href="#">
-                {{ $t('cards.link.action2') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            stripe="warning"
-            image="https://picsum.photos/300/200/?image=1058"
-          >
-            <p class="mb-0">
-              <va-button flat href="#">
-                {{ $t('cards.link.edit') }}
-              </va-button>
-              <va-button flat href="#">
-                {{ $t('cards.link.setAsDefault') }}
-              </va-button>
-              <va-button flat href="#">
-                {{ $t('cards.link.delete') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            theme="bright"
-          >
-            <template slot="title">
-              {{ $t('cards.title.bright') }}
-            </template>
-            {{ $t('cards.contentText') }}
-            <p class="pt-3 mb-0">
-              <va-button color="dark" flat href="#">
-                {{ $t('cards.link.edit') }}
-              </va-button>
-              <va-button color="dark" flat href="#">
-                {{ $t('cards.link.setAsDefault') }}
-              </va-button>
-              <va-button color="dark" flat href="#">
-                {{ $t('cards.link.delete') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=997"
-          >
-            {{ $t('cards.contentText') }}
-            <p class="pt-3 mb-0">
-              <va-button>
-                {{ $t('cards.button.main') }}
-              </va-button>
-              <va-button flat href="#">
-                {{ $t('cards.button.cancel') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            stripe="success"
-          >
-            <p slot="title">{{ $t('cards.title.stripeNoImage') }}</p>
-            {{ $t('cards.contentText') }}
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=1013"
-            theme="dark"
-          >
-            <p slot="title">{{ $t('cards.title.dark') }}</p>
-            {{ $t('cards.contentText') }}
-            <p class="pt-3 mb-0">
-              <va-button flat href="#">
-                {{ $t('cards.link.edit') }}
-              </va-button>
-              <va-button flat href="#">
-                {{ $t('cards.link.setAsDefault') }}
-              </va-button>
-              <va-button flat href="#">
-                {{ $t('cards.link.delete') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=885"
-          >
-            <div class="flex">
-              <p>{{ $t('cards.contentText') }}</p>
-              <va-button icon="ion-md-cloud-outline ion"/>
-            </div>
-          </vuestic-card>
-
-          <vuestic-card
-            image="https://picsum.photos/300/200/?image=1003"
-          >
-            <p>{{ $t('cards.contentText') }}</p>
-            <div class="card-separator"/>
-            <p class="mb-0">
-              <va-button flat href="#">
-                {{ $t('cards.link.traveling') }}
-              </va-button>
-              /
-              <va-button flat href="#">
-                {{ $t('cards.link.france') }}
-              </va-button>
-            </p>
-          </vuestic-card>
-
-          <vuestic-card theme="dark">
-            <p slot="title">{{ $t('cards.title.dark') }}</p>
-            {{ $t('cards.contentText') }}
-            <p class="pt-3 mb-0">
-              <va-button flat href="#">
-                {{ $t('cards.link.review') }}
-              </va-button>
-              <va-button flat href="#">
-                {{ $t('cards.link.feedback') }}
-              </va-button>
-            </p>
-          </vuestic-card>
+          <div class="flex xs12 sm6" :key="loop">
+            <va-card
+              :title="$t('cards.title.default')"
+            >
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6" :key="loop">
+            <va-card
+              :title="$t('cards.title.withControls')"
+            >
+              <template slot="actions">
+                <va-button icon="fa fa-refresh" />
+                <va-button icon="fa fa-gear" />
+              </template>
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6" :key="loop">
+            <va-card>
+              <template slot="header">
+                <va-icon icon="fa fa-cogs mr-3" color="success" />
+                <h5 class="mt-0 mb-0">{{ $t('cards.title.customHeader') }}</h5>
+              </template>
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6" :key="loop">
+            <va-card>
+              <p>{{ $t('cards.title.withoutHeader') }}</p>
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              image="https://picsum.photos/300/200/?image=1043"
+              :title="$t('cards.title.withImage')"
+            >
+              {{ $t('cards.contentText') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              overlay
+              titleOnImage
+              image="https://picsum.photos/300/200/?image=898"
+              :title="$t('cards.title.withTitleOnImage')"
+            >
+              {{ $t('cards.contentText') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              overlay
+              titleOnImage
+              image="https://picsum.photos/300/200/?image=898"
+              :title="$t('cards.title.withCustomTitleOnImage')"
+            >
+              <va-button slot="header">
+                Read More
+              </va-button>
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              stripe="danger"
+              :title="$t('cards.title.withStripe')"
+            >
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              color="success"
+            >
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              color="danger"
+            >
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              stripe="info"
+              :title="$t('cards.title.withStripe')"
+            >
+              {{ $t('cards.contentTextLong') }}
+            </va-card>
+          </div>
+
+          <div class="flex xs12 sm6 lg4 xl3" :key="loop">
+            <va-card
+              overlay
+              titleOnImage
+              image="https://picsum.photos/300/200/?image=1067"
+              :title="$t('cards.title.withTitleOnImage')"
+            >
+              {{ $t('cards.contentText') }}
+            </va-card>
+          </div>
         </template>
       </div>
-    </div>
-    <div class="flex md12">
+
       <div class="pre-loader-container flex-center my-5">
         <vuestic-pre-loader
           v-show="isShown"
@@ -187,19 +130,12 @@
           </va-button>
         </div>
       </div>
-    </div>
   </div>
 </template>
 
 <script>
-import VuesticCard
-  from '../../../vuestic-theme/vuestic-components/vuestic-card/VuesticCard'
-
 export default {
   name: 'cards',
-  components: {
-    VuesticCard,
-  },
   data () {
     return {
       listLoops: 1,
@@ -219,30 +155,9 @@ export default {
 </script>
 
 <style lang="scss">
-$singleGutter: #{(19/16)}rem;
-
 .cards-container {
-  margin: -$singleGutter;
-  .vuestic-card {
-    margin: $singleGutter;
-
-    width: calc(33% - #{$singleGutter} * 2);
-
-    @include media-breakpoint-only(xl) {
-      width: calc(25% - #{$singleGutter} * 2);
-    }
-
-    @include media-breakpoint-only(lg) {
-      width: calc(33.3% - #{$singleGutter} * 2);
-    }
-
-    @include media-breakpoint-only(sm) {
-      width: calc(50% - #{$singleGutter} * 2);
-    }
-
-    @include media-breakpoint-only(xs) {
-      width: calc(100% - #{$singleGutter} * 2);
-    }
+  .va-card {
+    margin: 0;
   }
 }
 </style>
diff --git a/src/components/ui/chips/Chips.vue b/src/components/ui/chips/Chips.vue
index b1442ac40..d7d5c0ea6 100644
--- a/src/components/ui/chips/Chips.vue
+++ b/src/components/ui/chips/Chips.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tags">
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('chips.chips')">
+      <va-card :title="$t('chips.chips')">
         <div class="va-row mb-3">
           <va-chip>
             Success chip
@@ -42,11 +42,11 @@
             Dark chip
           </va-chip>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('chips.badges')">
+      <va-card :title="$t('chips.badges')">
         <div class="va-row mb-3">
           <va-badge>
             Paid
@@ -87,7 +87,7 @@
             New Label
           </va-badge>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/ui/collapse/Collapses.vue b/src/components/ui/collapse/Collapses.vue
index 540cdb7a7..d6db8b93c 100644
--- a/src/components/ui/collapse/Collapses.vue
+++ b/src/components/ui/collapse/Collapses.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="collapse-page">
-    <vuestic-widget :headerText="$t('collapse.basic')">
+    <va-card :title="$t('collapse.basic')">
       <va-accordion>
         <va-collapse>
           <span slot="header"> Expand This Block </span>
@@ -25,8 +25,8 @@
           </div>
         </va-collapse>
       </va-accordion>
-    </vuestic-widget>
-    <vuestic-widget :headerText="$t('collapse.collapseWithBackground')">
+    </va-card>
+    <va-card :title="$t('collapse.collapseWithBackground')">
       <va-accordion>
         <va-collapse withBackground>
           <span slot="header"> Expand This Block </span>
@@ -51,8 +51,8 @@
           </div>
         </va-collapse>
       </va-accordion>
-    </vuestic-widget>
-    <vuestic-widget :headerText="$t('collapse.collapseWithCustomHeader')">
+    </va-card>
+    <va-card :title="$t('collapse.collapseWithCustomHeader')">
       <va-accordion>
         <va-collapse customHeader>
           <span slot="header">
@@ -85,7 +85,7 @@
           </div>
         </va-collapse>
       </va-accordion>
-    </vuestic-widget>
+    </va-card>
   </div>
 </template>
 
diff --git a/src/components/ui/color-pickers/ColorPickers.vue b/src/components/ui/color-pickers/ColorPickers.vue
index d22792362..2431e164e 100644
--- a/src/components/ui/color-pickers/ColorPickers.vue
+++ b/src/components/ui/color-pickers/ColorPickers.vue
@@ -2,7 +2,7 @@
   <div class="color-pickers vuestic-color-picker-page">
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget :headerText="$t('menu.colorPickers')">
+        <va-card :title="$t('menu.colorPickers')">
           <div class="va-row">
             <div class="flex md2">
               <span class="title">simple</span>
@@ -47,12 +47,12 @@
               </div>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget headerText="Simple Inline">
+        <va-card title="Simple Inline">
           <div class="va-row">
             <div class="flex md1">
               <vuestic-color-square :value="simpleColor"/>
@@ -61,12 +61,12 @@
               <vuestic-pallet-custom :palette="palette" v-model="simpleColor"/>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget headerText="Slider">
+        <va-card title="Slider">
           <div class="va-row">
             <div class="flex md1">
               <vuestic-color-square :value="sliderColor"/>
@@ -75,12 +75,12 @@
               <vuestic-slider-color-picker v-model="sliderColor"/>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
     <div class="va-row">
       <div class="flex md12 xs12">
-        <vuestic-widget headerText="Advanced">
+        <va-card title="Advanced">
           <div class="va-row">
             <div class="flex md1">
               <vuestic-color-square :value="advancedColor"/>
@@ -89,7 +89,7 @@
               <vuestic-advanced-color-picker v-model="advancedColor"/>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/ui/dropdowns/Dropdowns.vue b/src/components/ui/dropdowns/Dropdowns.vue
index 8f2cdd1a0..a39062543 100644
--- a/src/components/ui/dropdowns/Dropdowns.vue
+++ b/src/components/ui/dropdowns/Dropdowns.vue
@@ -2,7 +2,7 @@
   <div class="dropdowns">
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget :headerText="$t('dropdown.default')">
+        <va-card :title="$t('dropdown.default')">
           <div class="va-row btn-margin-row">
             <div
               class="flex sm6 lg6 xl3 mb4 justify--center"
@@ -29,7 +29,7 @@
               </va-button>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/ui/file-upload/FileUpload.vue b/src/components/ui/file-upload/FileUpload.vue
index 879350023..d7a1a9925 100644
--- a/src/components/ui/file-upload/FileUpload.vue
+++ b/src/components/ui/file-upload/FileUpload.vue
@@ -1,50 +1,50 @@
 <template>
   <div class="file-upload">
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('fileUpload.advancedMediaGallery')">
+      <va-card :title="$t('fileUpload.advancedMediaGallery')">
         <vuestic-file-upload
           type="gallery"
           :file-types="'.png, .jpg, .jpeg, .gif'"
           dropzone
           v-model="advancedGallery"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('fileUpload.advancedUploadList')">
+      <va-card :title="$t('fileUpload.advancedUploadList')">
         <vuestic-file-upload
           dropzone
           v-model="advancedList"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('fileUpload.single')">
+      <va-card :title="$t('fileUpload.single')">
         <vuestic-file-upload
           type="single"
           v-model="single"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('fileUpload.mediaGallery')">
+      <va-card :title="$t('fileUpload.mediaGallery')">
         <vuestic-file-upload
           type="gallery"
           :file-types="'.png, .jpg, .jpeg, .gif'"
           v-model="gallery"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('fileUpload.uploadList')">
+      <va-card :title="$t('fileUpload.uploadList')">
         <vuestic-file-upload
           v-model="list"
         />
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/ui/filters/Filters.vue b/src/components/ui/filters/Filters.vue
index 0d96b5e01..e990f5ad4 100644
--- a/src/components/ui/filters/Filters.vue
+++ b/src/components/ui/filters/Filters.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filters">
-    <vuestic-widget headerText="Show filters">
+    <va-card title="Show filters">
       <div class="va-row">
         <div class="flex md3">
           <filter-bar
@@ -48,8 +48,8 @@
           </va-button>
         </div>
       </div>
-    </vuestic-widget>
-    <vuestic-widget>
+    </va-card>
+    <va-card>
       <div class="table-responsive">
         <table class="table table-striped first-td-padding">
           <thead>
@@ -72,13 +72,13 @@
           </tbody>
         </table>
       </div>
-    </vuestic-widget>
+    </va-card>
   </div>
 </template>
 
 <script>
-import VuesticWidget
-  from '../../../vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget'
+import VaCard
+  from '../../../vuestic-theme/vuestic-components/va-card/VaCard'
 import FilterBar
   from '../../../vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue'
 import VuesticSimpleSelect
@@ -88,7 +88,7 @@ import { cityList, itemList } from './filtersData'
 export default {
   name: 'filters',
   components: {
-    VuesticWidget, FilterBar, SpringSpinner, VuesticSimpleSelect
+    VaCard, FilterBar, SpringSpinner, VuesticSimpleSelect
   },
   data () {
     return {
diff --git a/src/components/ui/grid/Grid.vue b/src/components/ui/grid/Grid.vue
index f6c7aa0b9..3cd305f5b 100644
--- a/src/components/ui/grid/Grid.vue
+++ b/src/components/ui/grid/Grid.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid va-row">
     <div class="flex xs12 md12">
-      <vuestic-widget headerText="Fixed Grid">
+      <va-card title="Fixed Grid">
         <div>
           <div class="va-row">
             <div class="flex xs12">
@@ -21,10 +21,10 @@
             </div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
     <div class="flex md12 xs12">
-      <vuestic-widget headerText="Desktop Grid">
+      <va-card title="Desktop Grid">
         <div class="va-row">
           <div class="flex xs4" v-for="i in 3" :key="`4${i}`">
             <div class="grid__container flex-center">
@@ -42,11 +42,11 @@
             <div class="grid__container flex-center">xs1</div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12 xs12">
-      <vuestic-widget headerText="Mobile and Desktop Grid">
+      <va-card title="Mobile and Desktop Grid">
         <div class="va-row">
           <div class="flex xs12 md4">
             <div class="grid__container flex-center">xs12 md4</div>
@@ -71,11 +71,11 @@
             <div class="grid__container flex-center">xs2 md4</div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
 
     <div class="flex md12 xs12">
-      <vuestic-widget headerText="Offsets">
+      <va-card title="Offsets">
         <div class="va-row">
           <div class="flex xs6 md6 offset--md6">
             <div class="grid__container flex-center">xs6 md6 offset--md6</div>
@@ -92,7 +92,7 @@
             <div class="grid__container flex-center">md4 offset--md4</div>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/ui/icons/IconSet.vue b/src/components/ui/icons/IconSet.vue
index c86df90d8..07a35ab01 100644
--- a/src/components/ui/icons/IconSet.vue
+++ b/src/components/ui/icons/IconSet.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="icon-set">
-    <vuestic-widget class="icon-set__header mb-4 py-3">
+    <va-card class="icon-set__header mb-4 py-3">
       <div class="va-row">
         <div class="flex md4 xs12 pl-5 icon-set__header__text">
           <h2 class="my-0">{{ set.name }}</h2>
@@ -40,12 +40,12 @@
           <h2 class="ma-2 shrink">A</h2>
         </div>
       </div>
-    </vuestic-widget>
+    </va-card>
 
-    <vuestic-widget
+    <va-card
       v-for="(list, index) in filteredLists"
       :key="index"
-      :headerText="list.name"
+      :title="list.name"
       class="flex md12"
     >
       <span v-if="list.icons.length === 0">
@@ -65,7 +65,7 @@
           </div>
         </div>
       </div>
-    </vuestic-widget>
+    </va-card>
   </div>
 </template>
 
diff --git a/src/components/ui/icons/SetsList.vue b/src/components/ui/icons/SetsList.vue
index 22dc52970..c61c26bd6 100644
--- a/src/components/ui/icons/SetsList.vue
+++ b/src/components/ui/icons/SetsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <vuestic-widget class="sets-list" :headerText="$t('icons.title')">
+  <va-card class="sets-list" :title="$t('icons.title')">
     <div class="va-row">
       <div
         class="flex lg6 xs12 mb-4 sets-list__set fill-height"
@@ -50,7 +50,7 @@
         </div>
       </div>
     </div>
-  </vuestic-widget>
+  </va-card>
 </template>
 
 <script>
diff --git a/src/components/ui/modals/Modals.vue b/src/components/ui/modals/Modals.vue
index c7bc94f0c..dca088cb1 100644
--- a/src/components/ui/modals/Modals.vue
+++ b/src/components/ui/modals/Modals.vue
@@ -2,9 +2,9 @@
   <div class="modals">
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget
+        <va-card
           class="modals-list larger-padding"
-          :header-text="$t('modal.title')"
+          :title="$t('modal.title')"
         >
           <va-button color="danger" @click="showSmallModal = true">
             {{ $t('modal.small') }}
@@ -18,14 +18,14 @@
           <va-button color="success" @click="showStaticModal = true">
             {{ $t('modal.static') }}
           </va-button>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget
+        <va-card
           class="modals-list larger-padding"
-          :header-text="$t('modal.titlePosition')"
+          :title="$t('modal.titlePosition')"
         >
           <va-button color="danger" @click="showTopModal = true">
             {{ $t('modal.top') }}
@@ -39,7 +39,7 @@
           <va-button color="success" @click="showLeftModal = true">
             {{ $t('modal.left') }}
           </va-button>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
diff --git a/src/components/ui/notifications/Notifications.vue b/src/components/ui/notifications/Notifications.vue
index 498660d15..6ea221692 100644
--- a/src/components/ui/notifications/Notifications.vue
+++ b/src/components/ui/notifications/Notifications.vue
@@ -2,8 +2,8 @@
   <div class="notifications">
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget
-          :headerText="'notificationsPage.popovers.title' | translate">
+        <va-card
+          :title="'notificationsPage.popovers.title' | translate">
           <div class="va-row">
             <div class="flex md6">
               <fieldset>
@@ -63,14 +63,13 @@
               </p>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex md12">
-        <vuestic-widget
-          :headerText="'notificationsPage.notifications.title' | translate">
+        <va-card :title="$t('notificationsPage.notifications.title')">
           <div class="mb-3">
             <va-notification closeable>
               <va-badge>
@@ -119,13 +118,13 @@
               {{ $t('notificationsPage.notifications.dangerMessage') }}
             </va-notification>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
 
     <div class="va-row">
       <div class="flex xs12">
-        <vuestic-widget :headerText="$t('notificationsPage.toasts.title')">
+        <va-card :title="$t('notificationsPage.toasts.title')">
           <div class="va-row">
             <div class="flex xs12 md6">
               <fieldset>
@@ -189,7 +188,7 @@
               </div>
             </div>
           </div>
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>
diff --git a/src/components/ui/sliders/Sliders.vue b/src/components/ui/sliders/Sliders.vue
index ca762cd6f..e7c49f33e 100644
--- a/src/components/ui/sliders/Sliders.vue
+++ b/src/components/ui/sliders/Sliders.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sliders">
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('sliders.slider')">
+      <va-card :title="$t('sliders.slider')">
         <div class="va-row">
           <div class="flex xs12 lg6 xl4 mb-2">
             <div class="title mb-3">Simple</div>
@@ -84,10 +84,10 @@
             />
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
     <div class="flex md12">
-      <vuestic-widget :headerText="$t('sliders.range')">
+      <va-card :title="$t('sliders.range')">
         <div class="va-row">
           <div class="flex xs12 lg6 xl4 mb-2">
             <div class="title mb-3">Simple</div>
@@ -179,7 +179,7 @@
             />
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/ui/spacing/Spacing.vue b/src/components/ui/spacing/Spacing.vue
index 3f6348a0d..da5ec14ff 100644
--- a/src/components/ui/spacing/Spacing.vue
+++ b/src/components/ui/spacing/Spacing.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="spacing flex xs12 md12">
-      <vuestic-widget headerText="Spacing">
+      <va-card title="Spacing">
         <spacing-playgroud :title="''"/>
-      </vuestic-widget>
+      </va-card>
   </div>
 </template>
 
diff --git a/src/components/ui/spinners/Spinners.vue b/src/components/ui/spinners/Spinners.vue
index 464a1aef1..f5f7a6000 100644
--- a/src/components/ui/spinners/Spinners.vue
+++ b/src/components/ui/spinners/Spinners.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="va-row spinners">
     <div class="flex md12 xs12">
-      <vuestic-widget :headerText="$t('spinners.title')"
-                      class="spinners__widget">
+      <va-card
+        :title="$t('spinners.title')"
+        class="spinners__widget"
+      >
         <div class="spinners__customization">
           <div class="va-row">
             <div class="flex xs12 md3 lg4">
@@ -69,7 +71,7 @@
               Spinners</a>
           </div>
         </div>
-      </vuestic-widget>
+      </va-card>
     </div>
   </div>
 </template>
diff --git a/src/components/ui/timelines/Timelines.vue b/src/components/ui/timelines/Timelines.vue
index de46a31a8..4f883b3be 100644
--- a/src/components/ui/timelines/Timelines.vue
+++ b/src/components/ui/timelines/Timelines.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="timelines">
-    <vuestic-widget
-      class="no-h-padding no-v-padding"
-      :headerText="$t('timelines.horizontalSimple')"
+    <va-card
+      :title="$t('timelines.horizontalSimple')"
     >
       <vuestic-timeline>
         <vuestic-timeline-item active>
@@ -36,150 +35,147 @@
           </template>
         </vuestic-timeline-item>
       </vuestic-timeline>
-    </vuestic-widget>
+    </va-card>
 
-    <vuestic-widget class="no-h-padding no-v-padding timelines__horizontal-long"
-                    :headerText="$t('timelines.horizontalCards')">
+    <va-card class="timelines__horizontal-long"
+             :title="$t('timelines.horizontalCards')">
       <vuestic-timeline class="timelines__horizontal-long__timeline">
         <vuestic-timeline-item active>
-          <vuestic-card
+          <va-card
             slot="after"
             stripe="success"
           >
             <template slot="title">{{ dateFirst }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
         <vuestic-timeline-item active>
-          <vuestic-card
+          <va-card
             slot="after"
             stripe="success"
           >
             <template slot="title">{{ dateSecond }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
         <vuestic-timeline-item>
-          <vuestic-card
+          <va-card
             slot="after"
             stripe="success"
           >
             <template slot="title">{{ dateThird }}</template>
             {{ contentThird }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
       </vuestic-timeline>
-    </vuestic-widget>
+    </va-card>
 
-    <vuestic-widget class="no-h-padding no-v-padding"
-                    :headerText="$t('timelines.verticalSimple')">
+    <va-card :title="$t('timelines.verticalSimple')">
       <div class="va-row">
         <div class="xs12 md6 flex">
           <vuestic-timeline vertical>
             <vuestic-timeline-item active>
-              <vuestic-card
+              <va-card
                 slot="after"
               >
                 <template slot="title">{{ dateFirst }}</template>
                 {{ contentFirst }}
-              </vuestic-card>
+              </va-card>
             </vuestic-timeline-item>
             <vuestic-timeline-item>
-              <vuestic-card
+              <va-card
                 slot="after"
               >
                 <template slot="title">{{ dateSecond }}</template>
                 {{ contentFirst }}
-              </vuestic-card>
+              </va-card>
             </vuestic-timeline-item>
           </vuestic-timeline>
         </div>
         <div class="xs12 md6 flex">
           <vuestic-timeline vertical>
             <vuestic-timeline-item active>
-              <vuestic-card
+              <va-card
                 theme="dark"
                 slot="after"
               >
                 <template slot="title">{{ dateFirst }}</template>
                 {{ contentFirst }}
-              </vuestic-card>
+              </va-card>
             </vuestic-timeline-item>
             <vuestic-timeline-item>
-              <vuestic-card
+              <va-card
                 theme="dark"
                 slot="after"
               >
                 <template slot="title">{{ dateSecond }}</template>
                 {{ contentFirst }}
-              </vuestic-card>
+              </va-card>
             </vuestic-timeline-item>
           </vuestic-timeline>
         </div>
       </div>
-    </vuestic-widget>
+    </va-card>
 
-    <vuestic-widget class="no-h-padding no-v-padding"
-                    :headerText="$t('timelines.verticalLabel')">
+    <va-card :title="$t('timelines.verticalLabel')">
       <vuestic-timeline vertical>
         <vuestic-timeline-item active>
           <span class="vuestic-timeline-item__text" slot="before">{{ dateFirst }}</span>
-          <vuestic-card
+          <va-card
             slot="after"
             stripe="success"
           >
             <template slot="title">{{ titleFirst }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
         <vuestic-timeline-item>
           <span class="vuestic-timeline-item__text" slot="before">{{ dateSecond }}</span>
-          <vuestic-card
+          <va-card
             slot="after"
             stripe="success"
           >
             <template slot="title">{{ titleSecond }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
       </vuestic-timeline>
-    </vuestic-widget>
+    </va-card>
 
-    <vuestic-widget class="no-h-padding no-v-padding"
-                    :headerText="$t('timelines.verticalCentered')">
+    <va-card :title="$t('timelines.verticalCentered')">
       <vuestic-timeline vertical centered>
         <vuestic-timeline-item active>
           <span class="vuestic-timeline-item__text" slot="before">{{ dateFirst }}</span>
-          <vuestic-card
+          <va-card
             slot="after"
             theme="dark"
           >
             <template slot="title">{{ titleFirst }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
         <vuestic-timeline-item>
           <span class="vuestic-timeline-item__text" slot="before">{{ dateSecond }}</span>
-          <vuestic-card
+          <va-card
             slot="after"
             theme="dark"
           >
             <template slot="title">{{ titleSecond }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
         <vuestic-timeline-item>
           <span class="vuestic-timeline-item__text" slot="before">{{ dateSecond }}</span>
-          <vuestic-card
+          <va-card
             slot="after"
             theme="dark"
           >
             <template slot="title">{{ titleSecond }}</template>
             {{ contentFirst }}
-          </vuestic-card>
+          </va-card>
         </vuestic-timeline-item>
       </vuestic-timeline>
-    </vuestic-widget>
+    </va-card>
 
   </div>
 </template>
diff --git a/src/components/ui/tree-view/TreeView.vue b/src/components/ui/tree-view/TreeView.vue
index 52e4d61a3..92f303049 100644
--- a/src/components/ui/tree-view/TreeView.vue
+++ b/src/components/ui/tree-view/TreeView.vue
@@ -4,35 +4,35 @@
       <div class="va-row">
 
         <div class="small-set flex lg6 xs12">
-          <vuestic-widget :headerText="$t('treeView.basic')">
+          <va-card :title="$t('treeView.basic')">
             <tree-view-basic-preview/>
-          </vuestic-widget>
+          </va-card>
         </div>
 
         <div class="small-set flex lg6 xs12">
-          <vuestic-widget :headerText="$t('treeView.icons')">
+          <va-card :title="$t('treeView.icons')">
             <tree-view-icons-preview/>
-          </vuestic-widget>
+          </va-card>
         </div>
       </div>
 
       <div class="va-row">
         <div class="small-set flex lg6 xs12">
-          <vuestic-widget :headerText="$t('treeView.advanced')">
+          <va-card :title="$t('treeView.advanced')">
             <tree-view-advanced-preview/>
-          </vuestic-widget>
+          </va-card>
         </div>
 
         <div class="small-set flex lg6 xs12">
-          <vuestic-widget :headerText="$t('treeView.editable')">
+          <va-card :title="$t('treeView.editable')">
             <tree-view-editable-preview/>
-          </vuestic-widget>
+          </va-card>
         </div>
       </div>
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('treeView.selectable')">
+        <va-card :title="$t('treeView.selectable')">
           <tree-view-selectable-preview/>
-        </vuestic-widget>
+        </va-card>
       </div>
 
     </div>
@@ -40,8 +40,7 @@
 </template>
 
 <script>
-import VuesticWidget
-  from '../../../vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue'
+import VaCard from '../../../vuestic-theme/vuestic-components/va-card/VaCard'
 import TreeViewBasicPreview from './TreeViewBasicPreview'
 import TreeViewIconsPreview from './TreeViewIconsPreview'
 import TreeViewSelectablePreview from './TreeViewSelectablePreview'
@@ -56,7 +55,7 @@ export default {
     TreeViewSelectablePreview,
     TreeViewIconsPreview,
     TreeViewBasicPreview,
-    VuesticWidget,
+    VaCard,
   },
   data () {
     return {
diff --git a/src/components/ui/typography/Typography.vue b/src/components/ui/typography/Typography.vue
index 6fda51c85..4dbdb5e1a 100644
--- a/src/components/ui/typography/Typography.vue
+++ b/src/components/ui/typography/Typography.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="typography">
-    <vuestic-widget>
+    <va-card>
       <div class="mb-4">
         <p class="display-1">Display 1 Heading</p>
         <p>Of all of the celestial bodies that capture our
@@ -153,7 +153,7 @@
               the moon. When you think about it.</span>
         </div>
       </div>
-    </vuestic-widget>
+    </va-card>
   </div>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f20843e57..496c9ac34 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -349,14 +349,18 @@
     "fixed": "Fixed",
     "floating": "Floating",
     "contentText": "The unique stripes of zebras make them one of the animals most familiar to people.",
+    "contentTextLong": "The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga.",
     "rowHeight": "Row height",
     "title": {
-      "dark": "Dark background",
-      "bright": "Very bright card",
-      "titleOnImageNoOverlay": "Title on image, but no overlay",
-      "normal": "Perfectly normal card",
-      "overlayAndTextOnImage": "Card with overlay and text on top of image",
-      "stripeNoImage": "Striped card without image"
+      "default": "Default",
+      "withControls": "With controls",
+      "customHeader": "Custom header",
+      "withoutHeader": "Without header",
+      "withImage": "With Image",
+      "withTitleOnImage": "With title on image",
+      "withCustomTitleOnImage": "With custom title on image",
+      "withStripe": "With stripe",
+      "withBackground": "With background"
     },
     "button": {
       "main": "Main",
diff --git a/src/services/colors.js b/src/services/colors.js
index e6a2532c3..8c76c00bf 100644
--- a/src/services/colors.js
+++ b/src/services/colors.js
@@ -68,3 +68,8 @@ export const getFocusColor = (theme) => {
 export const getGradientColor = (theme) => {
   return [ hex2rgb(themes[theme], 0.6).css, hex2rgb(themes[theme], 0.95).css ]
 }
+
+export const getGradientBackground = (theme) => {
+  return 'linear-gradient(to right,' + getGradientColor(theme)[0] +
+  ',' + getGradientColor(theme)[1] + ')'
+}
diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.vue b/src/vuestic-theme/vuestic-components/va-button/VaButton.vue
index 409db7e39..f0b70df84 100644
--- a/src/vuestic-theme/vuestic-components/va-button/VaButton.vue
+++ b/src/vuestic-theme/vuestic-components/va-button/VaButton.vue
@@ -44,7 +44,13 @@
 </template>
 
 <script>
-import { getGradientColor, getHoverColor, getFocusColor, getBoxShadowColor } from '../../../services/colors'
+import {
+  getHoverColor,
+  getFocusColor,
+  getBoxShadowColor,
+  getGradientBackground
+} from '../../../services/colors'
+
 import VaIcon from '../va-icon/VaIcon'
 
 export default {
@@ -142,8 +148,7 @@ export default {
         } else {
           return {
             backgroundImage: !this.flat && !this.outline
-              ? 'linear-gradient(to right,' + getGradientColor(this.color)[0] +
-              ',' + getGradientColor(this.color)[1] + ')' : '',
+              ? getGradientBackground(this.color) : '',
           }
         }
       } else if (this.hoverState) {
@@ -156,8 +161,7 @@ export default {
         } else {
           return {
             backgroundImage: !this.flat && !this.outline
-              ? 'linear-gradient(to right,' + getGradientColor(this.color)[0] +
-              ',' + getGradientColor(this.color)[1] + ')' : '',
+              ? getGradientBackground(this.color) : '',
           }
         }
       } else {
@@ -165,8 +169,7 @@ export default {
           color: this.flat || this.outline ? this.$themes[this.color] : '#ffffff',
           borderColor: this.outline ? this.$themes[this.color] : '',
           backgroundImage: !this.flat && !this.outline
-            ? 'linear-gradient(to right,' + getGradientColor(this.color)[0] +
-              ',' + getGradientColor(this.color)[1] + ')' : '',
+            ? getGradientBackground(this.color) : '',
           boxShadow: !this.flat && !this.outline ? '0 0.125rem 0.19rem 0 ' + getBoxShadowColor(this.color) : ''
 
         }
diff --git a/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue b/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue
new file mode 100644
index 000000000..a19680736
--- /dev/null
+++ b/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue
@@ -0,0 +1,211 @@
+<template>
+  <VbDemo>
+    <VbContainer style="max-width: 800px;">
+      <table class="table table-bordered">
+        <tr>
+          <th>Description</th>
+          <th>VaCard</th>
+        </tr>
+        <tr>
+          <td>Default</td>
+          <td>
+            <VbContainer>
+              <va-card
+                title="Default Card"
+              >
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Title only</td>
+          <td>
+            <VbContainer>
+              <va-card
+                title="Title Only Card"
+              />
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Default with controls</td>
+          <td>
+            <VbContainer>
+              <va-card
+                title="Default Card with controls"
+              >
+                <template slot="actions">
+                  <va-button icon="fa fa-refresh" />
+                  <va-button icon="fa fa-gear" />
+                </template>
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Custom header</td>
+          <td>
+            <VbContainer>
+              <va-card
+                title="Custom header"
+              >
+                <template slot="header">
+                  <va-icon icon="fa fa-cogs mr-3" color="success" />
+                  <h5 class="mt-0 mb-0">Custom Header</h5>
+                </template>
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Long text in header</td>
+          <td>
+            <VbContainer>
+              <va-card
+                title="Default Card with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text"
+              >
+                <template slot="actions">
+                  <va-button icon="fa fa-refresh" />
+                  <va-button icon="fa fa-gear" />
+                </template>
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Without header</td>
+          <td>
+            <VbContainer>
+              <va-card>
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>With image<br> (default image ratio 16:9)</td>
+          <td>
+            <VbContainer>
+              <va-card
+                image="https://picsum.photos/300/200/?image=1043"
+                title="Card with image"
+              >
+                The unique stripes of zebras make them one of the animals most familiar to people.
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>With image and overlay</td>
+          <td>
+            <VbContainer>
+              <va-card
+                overlay
+                image="https://picsum.photos/300/200/?image=1043"
+                title="Card with image and overlay"
+              >
+                The unique stripes of zebras make them one of the animals most familiar to people.
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>With title on image</td>
+          <td>
+            <VbContainer>
+              <va-card
+                overlay
+                titleOnImage
+                image="https://picsum.photos/300/200/?image=1043"
+                title="Card with title on image"
+              >
+                The unique stripes of zebras make them one of the animals most familiar to people.
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Image only and custom title</td>
+          <td>
+            <VbContainer>
+              <va-card
+                overlay
+                titleOnImage
+                image="https://picsum.photos/300/200/?image=1043"
+              >
+                <template slot="header">
+                  <va-button>
+                    Read More
+                  </va-button>
+                </template>
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Background</td>
+          <td>
+            <VbContainer>
+              <va-card color="danger">
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills.
+              </va-card>
+
+              <va-card color="success">
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills.
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Stripes</td>
+          <td>
+            <VbContainer>
+              <va-card stripe="danger">
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills.
+              </va-card>
+
+              <va-card stripe="success">
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills.
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+        <tr>
+          <td>Without margin</td>
+          <td>
+            <VbContainer>
+              <va-card class="mb-0" stripe="info" color="success">
+                The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills.
+              </va-card>
+            </VbContainer>
+          </td>
+        </tr>
+      </table>
+    </VbContainer>
+  </VbDemo>
+</template>
+
+<script>
+import VaCard from './VaCard'
+
+export default {
+  components: {
+    VaCard,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  tr {
+    td:first-child {
+      min-width: 200px;
+    }
+    td > div {
+      background-color: #eee;
+    }
+  }
+</style>
diff --git a/src/vuestic-theme/vuestic-components/va-card/VaCard.vue b/src/vuestic-theme/vuestic-components/va-card/VaCard.vue
new file mode 100644
index 000000000..3ea5609a6
--- /dev/null
+++ b/src/vuestic-theme/vuestic-components/va-card/VaCard.vue
@@ -0,0 +1,223 @@
+<template>
+  <div
+    class="va-card"
+    :style="computedCardStyle"
+  >
+    <div
+      v-if="stripe"
+      class="va-card__stripe"
+      :style="computedStripeStyle"
+    ></div>
+    <div v-if="image" class="va-card__image">
+      <img :src="image" :alt="imageAlt">
+      <div class="va-card__image-overlay" v-if="overlay"></div>
+    </div>
+
+    <div
+      v-if="showHeader"
+      class="va-card__header"
+      :class="{'va-card__header--over': image && titleOnImage}"
+    >
+      <div class="va-card__header-inner">
+        <slot name="header">
+          <div class="va-card__header-title">
+            {{ title }}
+          </div>
+          <div class="va-card__header-actions">
+            <slot name="actions" />
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      class="va-card__body"
+      :class="computedCardBodyClass"
+    >
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getGradientBackground } from '../../../services/colors'
+
+export default {
+  name: 'va-card',
+  props: {
+    stripe: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    noPaddingV: {
+      type: Boolean,
+      default: false,
+    },
+    noPadding: {
+      type: Boolean,
+      default: false,
+    },
+    image: {
+      type: String,
+      default: '',
+    },
+    overlay: {
+      type: Boolean,
+      default: false,
+    },
+    imageAlt: {
+      type: String,
+      default: '',
+    },
+    titleOnImage: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    showHeader () {
+      return this.title || this.$slots.header || this.$slots.actions
+    },
+    computedCardBodyClass () {
+      return {
+        'va-card__body--no-padding-v': this.noPaddingV,
+        'va-card__body--no-padding': this.noPadding,
+        'va-card__body--padding-top':
+          (!this.showHeader && !this.noPaddingV && !this.noPadding) ||
+          this.titleOnImage
+      }
+    },
+    computedStripeStyle () {
+      return {
+        background: this.$themes[this.stripe]
+      }
+    },
+    computedCardStyle () {
+      if (this.color) {
+        return {
+          color: '#fff',
+          background: getGradientBackground(this.color)
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import "../../vuestic-sass/resources/resources";
+
+.va-card {
+  border-radius: $card-border-radius;
+  border: none;
+  box-sizing: border-box;
+  box-shadow: $card-box-shadow;
+  word-wrap: break-word;
+  background-color: $white;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2.5rem;
+
+  &__header {
+    &-inner {
+      display: flex;
+      padding: 0.5rem 1.25rem;
+      min-height: 3.5rem;
+      align-items: center;
+    }
+
+    &-title {
+      font-weight: $font-weight-bold;
+      font-size: $card-title-font-size;
+      letter-spacing: $card-title-letter-spacing;
+      text-transform: uppercase;
+      color: $card-title-color;
+    }
+
+    &-actions {
+      margin-left: auto;
+      flex: 0 0 auto;
+    }
+
+    &--over {
+      position: absolute;
+      padding-top: 56%;
+      width: 100%;
+      top: 0;
+      left: 0;
+
+      & > div {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+
+        & * {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  &__body {
+    padding: 0 1.25rem 1.25rem;
+    flex: 1 1 auto;
+
+    &--no-padding-v {
+      padding: 0 1.25rem;
+    }
+
+    &--no-padding {
+      padding: 0;
+    }
+
+    &--padding-top {
+      padding-top: 1.25rem;
+    }
+  }
+
+  &__image {
+    padding-bottom: 56%;
+    position: relative;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      display: block;
+      object-fit: cover;
+    }
+
+    &-overlay {
+      position: absolute;
+      top: 0;
+      left:0;
+      height: 100%;
+      width: 100%;
+      background-color: rgba(0,0,0,.3);
+      pointer-events: none;
+    }
+  }
+
+  &__stripe {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0.5rem;
+    z-index: 1;
+  }
+}
+</style>
diff --git a/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue b/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue
index 95572566e..9e3acd2b7 100644
--- a/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue
+++ b/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue
@@ -174,6 +174,8 @@ export default {
 </script>
 
 <style lang='scss'>
+@import "../../vuestic-sass/resources/resources";
+
   .va-pagination {
     .va-button--disabled {
       i {
diff --git a/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue b/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue
index 701550f31..15f1fa13f 100644
--- a/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue
+++ b/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue
@@ -523,6 +523,8 @@ export default {
 </script>
 
 <style lang='scss'>
+@import "../../vuestic-sass/resources/resources";
+
   .va-slider {
 
     &--disabled {
diff --git a/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.demo.vue
deleted file mode 100644
index d3b6cdaf0..000000000
--- a/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.demo.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="demo-container__item">
-      <div class="va-row">
-        <div class="flex md3">
-          <vuestic-card
-            stripe="warning"
-            title-on-image
-            overlay
-            image="https://picsum.photos/300/200/?random">
-            <template slot="title">
-              Card with overlay and text on top of image
-            </template>
-            Running out of pages in your passport. Two trailer park girls go
-            around the outside.
-          </vuestic-card>
-        </div>
-        <div class="flex md3">
-          <vuestic-card
-            stripe="danger"
-            image="https://picsum.photos/300/200/?random"
-            theme="bright">
-            <template slot="title">
-              Card title that wraps to a new line
-            </template>
-            This is a longer card with supporting text below as a natural
-            lead-in to
-            additional content. This content is a little bit longer.
-            <p slot="footer">Last updated 3 mins ago</p>
-          </vuestic-card>
-        </div>
-      </div>
-    </div>
-    <div class="demo-container__item">
-      <div class="va-row">
-        <div class="flex md4">
-          <vuestic-card
-            stripe="danger"
-            image="https://picsum.photos/300/200/?random"
-            theme="bright">
-            <template slot="title">
-              Card title that wraps to a new line
-            </template>
-            This is a longer card with supporting text below as a natural
-            lead-in to
-            additional content. This content is a little bit longer.
-            <p slot="footer">Last updated 3 mins ago</p>
-          </vuestic-card>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VuesticCard from './VuesticCard.vue'
-
-export default {
-  components: { VuesticCard },
-}
-</script>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue b/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue
deleted file mode 100644
index a1b2fdaed..000000000
--- a/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <div
-    class="vuestic-card card"
-    :class="computedClass"
-  >
-    <template v-if="image">
-      <img v-if="!titleOnImage" class="card-img-top" :src="image"
-           :alt="imageAlt">
-      <div class="vuestic-card__image-container" v-if="titleOnImage">
-        <img class="card-img-top" :src="image" :alt="imageAlt">
-        <div class="vuestic-card__image-container__overlay" v-if="overlay"/>
-        <h5 class="vuestic-card__title card-title">
-          <slot name="title"/>
-        </h5>
-      </div>
-    </template>
-    <div class="card-body">
-      <h5 class="vuestic-card__title card-title"
-          v-if="$slots.title && !(image && titleOnImage)">
-        <slot name="title"/>
-      </h5>
-      <p class="card-text">
-        <slot/>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'vuestic-card',
-  props: {
-    image: {
-      type: String,
-      default: '',
-    },
-    imageAlt: {
-      type: String,
-      default: '',
-    },
-    stripe: {
-      type: String,
-      default: '',
-    },
-    titleOnImage: {
-      type: Boolean,
-      default: false,
-    },
-    overlay: {
-      type: Boolean,
-      default: false,
-    },
-    theme: {
-      type: String,
-      validator: (val) => ['base', 'bright', 'dark'].includes(val),
-      default: 'base',
-    },
-  },
-  computed: {
-    computedClass () {
-      const computedClass = []
-      if (this.stripe) {
-        computedClass.push(`vuestic-card--stripe-${this.stripe}`)
-      }
-      if (this.theme === 'bright') {
-        computedClass.push(`vuestic-card--theme-bright`)
-      }
-      if (this.theme === 'dark') {
-        computedClass.push(`vuestic-card--theme-dark`)
-      }
-      return computedClass
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-@import "../../vuestic-sass/resources/resources";
-
-$card-font-size: 1.375rem;
-
-.card-separator {
-  margin: 1rem -#{(20/16)}rem;
-  height: #{(1/16)}rem;
-  width: calc(100% + #{(2* 20/16)}rem);
-  background-color: $light-gray;
-}
-
-.card-link-secondary {
-  color: #aaa;
-}
-
-.vuestic-card {
-  border-radius: 0;
-  border: none;
-  box-sizing: border-box;
-  box-shadow: $widget-box-shadow;
-  word-wrap: break-word;
-
-  &__title {
-    font-weight: $font-weight-bold;
-    font-size: $card-font-size;
-  }
-
-  .card-img-top {
-    border-radius: 0;
-  }
-
-  &__image-container {
-    position: relative;
-    .vuestic-card__title {
-      position: absolute;
-      bottom: 0px;
-      color: $white;
-      padding: 1rem;
-      margin-bottom: 0;
-    }
-    &__overlay {
-      position: absolute;
-      pointer-events: none;
-      background-color: rgba(0, 0, 0, 0.3);
-      width: 100%;
-      height: 100%;
-      top: 0;
-    }
-  }
-
-  &--theme-bright {
-    background-color: $brand-primary;
-    color: $white;
-    a {
-      color: $vue-darkest-blue;
-      &:hover {
-        color: lighten($vue-darkest-blue, 15);
-      }
-    }
-  }
-
-  &--theme-dark {
-    background-color: $darkest-gray;
-    color: $white;
-  }
-
-  $colors: (
-    primary: $brand-primary,
-    danger: $brand-danger,
-    warning: $brand-warning,
-    info: $brand-info,
-    success: $brand-success,
-  );
-
-  @each $key, $color in $colors {
-    &--stripe-#{$key} {
-      border-top: $color solid 0.5rem;
-    }
-  }
-}
-</style>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-file-upload/VuesticFileUpload.vue b/src/vuestic-theme/vuestic-components/vuestic-file-upload/VuesticFileUpload.vue
index 3ec6cb65f..0cc33102c 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-file-upload/VuesticFileUpload.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-file-upload/VuesticFileUpload.vue
@@ -14,12 +14,12 @@
         @remove="removeFile"
         @remove-single="removeSingleFile"
       />
-      <vuestic-modal ref="mediumModal" :no-buttons="true">
+      <va-modal ref="mediumModal" :no-buttons="true">
         <div slot="title">{{ $t('fileUpload.modalTitle') }}</div>
         <div>
           {{ $t('fileUpload.modalText') }}
         </div>
-      </vuestic-modal>
+      </va-modal>
     </vuestic-file-upload-container>
   </div>
 </template>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-timelines/VuesticTimelineItem.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-timelines/VuesticTimelineItem.demo.vue
index 55707b5f0..2c5efa225 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-timelines/VuesticTimelineItem.demo.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-timelines/VuesticTimelineItem.demo.vue
@@ -3,18 +3,19 @@
     <div class="demo-container__item">
       <vuestic-timeline-item :isFirst="true" :isLast="true">
         <div slot="before">22 February, 2018</div>
-        <vuestic-card
+        <va-card
           slot="after"
           stripe="warning"
           title-on-image
           overlay
-          image="https://picsum.photos/300/200/?random">
+          image="https://picsum.photos/300/200/?random"
+        >
           <template slot="title">
             Card with overlay and text on top of image
           </template>
           Running out of pages in your passport. Two trailer park girls go
           around the outside.
-        </vuestic-card>
+        </va-card>
       </vuestic-timeline-item>
     </div>
   </div>
@@ -22,7 +23,7 @@
 
 <script>
 import VuesticTimelineItem from './VuesticTimelineItem.vue'
-import VuesticCard from '../vuestic-card/VuesticCard'
+import VuesticCard from '../va-card/VaCard'
 
 export default {
   components: {
diff --git a/src/vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue b/src/vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue
deleted file mode 100644
index d0ee41757..000000000
--- a/src/vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="vuestic-widget" :class="{'no-header': !headerText}">
-    <div class="vuestic-widget-header" v-if="headerText">{{headerText}}</div>
-    <div class="vuestic-widget-body" v-if="hasSlotData">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'vuestic-widget',
-  props: ['headerText'],
-  computed: {
-    hasSlotData () {
-      return this.$slots.default
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.vuestic-widget {
-  background: $widget-bg;
-  box-shadow: $widget-box-shadow;
-  margin-bottom: $widget-mb;
-  padding: 0;
-
-  &.no-header {
-    .vuestic-widget-body {
-    }
-  }
-
-  &.larger-padding {
-    .vuestic-widget-body {
-      padding: $widget-larger-padding;
-    }
-  }
-
-  &.no-h-padding {
-    .vuestic-widget-body {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-
-  &.no-v-padding {
-    .vuestic-widget-body {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-
-  &.brand-info {
-    background-color: $brand-info;
-    color: $white;
-    box-shadow: $widget-info-shadow;
-  }
-
-  &.brand-danger {
-    background-color: $brand-danger;
-    color: $white;
-    box-shadow: $widget-danger-shadow;
-  }
-
-  &.info-widget {
-    border-top: $info-widget-border;
-
-    &.brand-info {
-      border-top-color: $brand-info;
-    }
-
-    &.brand-danger {
-      border-top-color: $brand-danger;
-    }
-  }
-
-  .vuestic-widget-body {
-    padding: $widget-padding;
-  }
-
-  .vuestic-widget-header {
-    height: $widget-header-height;
-    padding: 0 $widget-padding;
-    border-bottom: $widget-header-border;
-    font-size: 1.375rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
diff --git a/src/vuestic-theme/vuestic-plugin.js b/src/vuestic-theme/vuestic-plugin.js
index ff6d6f68c..67af1733b 100644
--- a/src/vuestic-theme/vuestic-plugin.js
+++ b/src/vuestic-theme/vuestic-plugin.js
@@ -46,7 +46,6 @@ import SocialNews
 import Switch from './vuestic-components/vuestic-switch/VuesticSwitch.vue'
 import Tabs from './vuestic-components/vuestic-tabs/VuesticTabs.vue'
 import Tooltip from './vuestic-components/vuestic-tooltip/VuesticTooltip.vue'
-import Widget from './vuestic-components/vuestic-widget/VuesticWidget.vue'
 import Wizard from './vuestic-components/vuestic-wizard/VuesticWizard.vue'
 import TreeRoot from './vuestic-components/vuestic-tree-view/VuesticTreeRoot'
 import TreeCategory
@@ -54,7 +53,6 @@ import TreeCategory
 import TreeNode from './vuestic-components/vuestic-tree-view/VuesticTreeNode'
 import DatePicker
   from './vuestic-components/vuestic-date-picker/VuesticDatePicker'
-import Card from './vuestic-components/vuestic-card/VuesticCard'
 import FileUpload
   from './vuestic-components/vuestic-file-upload/VuesticFileUpload'
 import VaIcon from './vuestic-components/va-icon/VaIcon'
@@ -81,7 +79,7 @@ import VuesticPopup
 import VuesticContainer from './vuestic-components/vuestic-grid/VGrid/Container'
 import VuestVaLayout from './vuestic-components/vuestic-grid/VGrid/Layout'
 import VuesticFlex from './vuestic-components/vuestic-grid/VGrid/Flex'
-
+import Card from './vuestic-components/va-card/VaCard'
 import { installQuasarPlatform } from './vuestic-components/vuestic-popup/quasar/install'
 
 // At the moment we use quasar platform install to make its components work.
@@ -93,6 +91,7 @@ const VuesticPlugin = {
     [
       VaNotification,
       Breadcrumbs,
+      Card,
       Chart,
       Chat,
       Checkbox,
@@ -118,7 +117,6 @@ const VuesticPlugin = {
       SocialNews,
       Switch,
       Tabs,
-      Widget,
       Wizard,
       MediumEditor,
       Tooltip,
diff --git a/src/vuestic-theme/vuestic-sass/resources/_variables.scss b/src/vuestic-theme/vuestic-sass/resources/_variables.scss
index 8e9299bbd..dfe037512 100644
--- a/src/vuestic-theme/vuestic-sass/resources/_variables.scss
+++ b/src/vuestic-theme/vuestic-sass/resources/_variables.scss
@@ -348,3 +348,11 @@ $toast-icon-size: $popover-icon-size;
 $toast-icon-color: $popover-icon-color;
 $toast-icon-ml: 0;
 $toast-icon-mr: 0.625rem;
+
+// Cards
+
+$card-border-radius: 0.375rem;
+$card-box-shadow: 0 2px 3px 0 rgba(52, 56, 85, 0.25);
+$card-title-font-size: 0.625rem;
+$card-title-letter-spacing: 0.0375rem;
+$card-title-color: #104fca;