mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
Vue
<script setup>
|
|
defineProps({
|
|
image: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
button: {
|
|
type: Object,
|
|
label: String,
|
|
color: String,
|
|
default: () => ({
|
|
label: "Get started",
|
|
color: "btn-white",
|
|
}),
|
|
},
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="cursor-pointer">
|
|
<div class="card card-background">
|
|
<div
|
|
class="full-background"
|
|
:style="{ backgroundImage: `url(${image})` }"
|
|
loading="lazy"
|
|
></div>
|
|
<div class="card-body pt-7 text-center">
|
|
<p class="text-white text-uppercase">{{ label }}</p>
|
|
<h3 class="text-white mb-0">{{ title }}</h3>
|
|
<p class="text-white opacity-8">
|
|
{{ description }}
|
|
</p>
|
|
<button type="button" class="btn btn-sm mt-3" :class="button.color">
|
|
{{ button.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|