fix : items & package & style

src/components/material/Cards.vue

@@ -1,83 +1,86 @@
 <template>
-   <v-card :class="color">
-     <v-container>
-       <v-layout row wrap>
-         <v-flex xs12>
-           <v-card-text primary-text :class="aligntext">
-             <div>
-               <div class="headline WM-NoLetterSpacing-7">{{title}}</div>
-               <div class="subheading WM-LightGray-color">{{text}}</div>
-               <div></div>
-             </div>
-           </v-card-text>
-         </v-flex>
-         <!-- <v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'100px'}">
-         </v-flex> -->
-       </v-layout>
-     </v-container>
-   </v-card>
+    <v-card :class="color" class="tile-section">
+        <v-container class="py-1">
+            <v-layout row wrap>
+                <v-flex xs12>
+                    <v-card-text primary-text :class="aligntext" class="d-flex align-center">
+                        <v-icon v-if="icon" size="20" class="mr-2" style="max-width: 30px;">{{ icon }}</v-icon>
+                        <v-img v-if="image" src="image"/>
+                        <div>
+                            <div class="headline WM-NoLetterSpacing-7" v-if="title" v-html="title"></div>
+                            <div class="subheading WM-LightGray-color" v-if="text">{{ text }}</div>
+                        </div>
+                    </v-card-text>
+                </v-flex>
+                <!-- <v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'100px'}">
+                </v-flex> -->
+            </v-layout>
+        </v-container>
+    </v-card>
 </template>
 
 <script>
 export default {
     props: {
-      bordercolor: {
-        type: String,
-        default: () => ''
-      },
-      title: {
-        type: String,
-        default: () => ''
-      },
-      text: {
-        type: String,
-        default: () => ''
-      },
-      icon: {
-        type: String,
-        default: () => ''
-      },
-      color : {
-        type: String,
-        default: () => ''
-      },
-      column : {
-        type: String,
-        default: () => ''
-      },
-      aligntext : {
-        type: String,
-        default: () => ''
-      },
-      alignimg : {
-        type: String,
-        default: () => ''
-      }
-  },
-    data () {
-        return {
-
+        bordercolor: {
+            type: String,
+            default: () => ''
+        },
+        title: {
+            type: String,
+            default: () => ''
+        },
+        text: {
+            type: String,
+            default: () => ''
+        },
+        icon: {
+            type: String,
+            default: () => ''
+        },
+        image: {
+            type: String,
+            default: () => ''
+        },
+        color: {
+            type: String,
+            default: () => ''
+        },
+        column: {
+            type: String,
+            default: () => ''
+        },
+        aligntext: {
+            type: String,
+            default: () => ''
+        },
+        alignimg: {
+            type: String,
+            default: () => ''
         }
     },
+    data() {
+        return {}
+    },
 
-  computed: {
-
-  }
+    computed: {}
 }
 </script>
 <style scoped>
 .headline {
-  font-size : 30px !important;
-  text-transform: uppercase !important;
-  font-family : 'Montserrat-Bold' !important;
+    font-size: 22px !important;
+    text-transform: uppercase !important;
+    font-family: 'Montserrat-Regular' !important;
 }
-@media screen and (max-width:1536px){
-  .headline {
-    font-size : 22px !important;
-    letter-spacing: 2px !important;
-   }
-  .subheading {
-    font-size : 14px !important;
-  }
+
+.subheading {
+    font-size: 14px !important;
+    color: #7b7b7b;
+    font-family: 'Montserrat-Regular' !important;
+
+}
+
+.tile-section {
+    border-radius: 10px;
 }
 </style>