Master Card - Soft UI

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

Demo

Use this example to create a beautiful and versatile master card.

7852 4594 1122 4562

Card Holder

Jack Peterson

Expires

11/22

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

<script>
import MasterCard from '@/examples/Cards/MasterCard.vue";
export default { components: { MasterCard, }, };
</script>

1<template>
2 <master-card
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>
13import MasterCard from '@/examples/Cards/MasterCard.vue";
14export default { components: { MasterCard, }, };
15</script>

Props Information

Name	Type	Default	Description
card	['number' 'holderName' 'expiryDate' 'holderText' 'expiryText' 'background']		`card` is an object used to set the details for the `MasterCard` component.