cssd-front/src/components/material/Cards.vue

<template>
    <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: () => ''
        },
        image: {
            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: 22px !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat-Regular' !important;
    line-height: 23px !important;
}

.subheading {
    font-size: 14px !important;
    color: #7b7b7b;
    font-family: 'Montserrat-Regular' !important;

}

.tile-section {
    border-radius: 10px;
}
</style>