cssd-back/resources/js/vue/components/material/Cards.vue

<template>
   <v-card :class="color">
     <v-container>
       <v-layout row wrap>
         <v-flex xs7>
           <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>
</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 {

        }
    },

  computed: {

  }
}
</script>
<style scoped>
.headline {
  font-size : 30px !important;
  text-transform: uppercase !important;
  font-family : 'Montserrat-Bold' !important;
}
@media screen and (max-width:1536px){
  .headline {
    font-size : 22px !important;
    letter-spacing: 2px !important;
   }
  .subheading {
    font-size : 11px !important;
  }
}
</style>