Master Card

The MasterCard component helps you to simply create a beautiful master card.

Demo

7852 4594 1122 4562

Card Holder

Jack Peterson

Expires

11/22

<template>
<MasterCard
 :card="{
   number: '7852 4594 1122 4562',
   holderName: 'Jack Peterson',
   expiryDate: '11/22',
   background: 'dark',
 }"
/>
</template>

<script setup>
import MasterCard from "@/examples/cards/MasterCard.vue";
</script>

1<template>
2<MasterCard
3 :card="{
4   number: '7852 4594 1122 4562',
5   holderName: 'Jack Peterson',
6   expiryDate: '11/22',
7   background: 'dark',
8 }"
9/>
10</template>
11
12<script setup>
13import MasterCard from "@/examples/cards/MasterCard.vue";
14</script>

Props Information

Name	Type	Default	Description
card	numberholderNameexpiryDateholderTextexpiryTextbackground		`card` is an object used to set the details for the `MasterCard` component.