<template> <div class="discover-grid-card"> <div class="discover-grid-card-body" :class="{ 'dark': dark, 'small': small }" > <div class="section-copy"> <p class="subtitle">{{ subtitle }}</p> <h1 class="title">{{ title }}</h1> <button v-if="buttonText" class="btn btn-outline-dark rounded-pill py-1" @click.prevent="handleLink()">{{ buttonText }}</button> </div> <div class="section-icon"> <i :class="iconClass"></i> </div> </div> </div> </template> <script type="text/javascript"> export default { props: { small: { type: Boolean, default: false }, dark: { type: Boolean, default: false }, subtitle: { type: String }, title: { type: String }, buttonText: { type: String }, buttonLink: { type: String }, buttonEvent: { type: Boolean, default: false }, iconClass: { type: String } }, methods: { handleLink() { if(this.buttonEvent == true) { this.$emit('btn-click'); return; } if(!this.buttonLink || this.buttonLink == undefined) { swal('Oops', 'This is embarassing, we cannot redirect you to the proper page at the moment', 'warning'); return; } this.$router.push(this.buttonLink); } } } </script> <style lang="scss"> .discover-grid-card { width: 100%; &-body { width: 100%; padding: 3rem 3rem 0; border-radius: 8px; text-align: center; color: #212529; background: #f8f9fa; overflow: hidden; .section-copy { margin-top: 1rem; margin-bottom: 1rem; padding-top: 1rem; padding-bottom: 1rem; .subtitle { font-size: 16px; margin-bottom: 0; color: #6c757d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: -0.7px; } .title, .btn { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: -0.7px; } } .section-icon { display: flex; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; width: 80%; height: 300px; border-radius: 21px 21px 0 0; background: #232526; background: linear-gradient(to right, #414345, #232526); box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important; i { color: #fff; font-size: 10rem; } } &.small { .section-icon { height: 120px; i { font-size: 4rem; } } } &.dark { color: #fff; background: #232526; background: linear-gradient(to right, #414345, #232526); .section-icon { color: #fff; background: #f8f9fa; i { color: #232526; } } .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; } } } } </style>