Awesome Credit Card Form - VueJs snippet: a hand-crafted, open-source Bootstrap 5 card. HTML, CSS & JS included, ready to copy.
1<div class="wrapper" id="app">
2 <div class="card-form">
3 <div class="card-list">
4 <div class="card-item" v-bind:class="{ '-active' : isCardFlipped }">
5 <div class="card-item__side -front">
6 <div class="card-item__focus" v-bind:class="{'-active' : focusElementStyle }" v-bind:style="focusElementStyle" ref="focusElement"></div>
7 <div class="card-item__cover">
8 <img
9 v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'" class="card-item__bg">
10 </div>
11
12 <div class="card-item__wrapper">
13 <div class="card-item__top">
14 <img src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png" class="card-item__chip">
15 <div class="card-item__type">
16 <transition name="slide-fade-up">
17 <img v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'" v-if="getCardType" v-bind:key="getCardType" alt="" class="card-item__typeImg">
18 </transition>
19 </div>
20 </div>
21 <label for="cardNumber" class="card-item__number" ref="cardNumber">
22 <template v-if="getCardType === 'amex'">
23 <span v-for="(n, $index) in amexCardMask" :key="$index">
24 <transition name="slide-fade-up">
25 <div
26 class="card-item__numberItem"
27 v-if="$index > 4 && $index < 14 && cardNumber.length > $index && n.trim() !== ''"
28 >*</div>
29 <div class="card-item__numberItem"
30 :class="{ '-active' : n.trim() === '' }"
31 :key="$index" v-else-if="cardNumber.length > $index">
32 {{cardNumber[$index]}}
33 </div>
34 <div
35 class="card-item__numberItem"
36 :class="{ '-active' : n.trim() === '' }"
37 v-else
38 :key="$index + 1"
39 >{{n}}</div>
40 </transition>
41 </span>
42 </template>
43
44 <template v-else>
45 <span v-for="(n, $index) in otherCardMask" :key="$index">
46 <transition name="slide-fade-up">
47 <div
48 class="card-item__numberItem"
49 v-if="$index > 4 && $index < 15 && cardNumber.length > $index && n.trim() !== ''"
50 >*</div>
51 <div class="card-item__numberItem"
52 :class="{ '-active' : n.trim() === '' }"
53 :key="$index" v-else-if="cardNumber.length > $index">
54 {{cardNumber[$index]}}
55 </div>
56 <div
57 class="card-item__numberItem"
58 :class="{ '-active' : n.trim() === '' }"
59 v-else
60 :key="$index + 1"
61 >{{n}}</div>
62 </transition>
63 </span>
64 </template>
65 </label>
66 <div class="card-item__content">
67 <label for="cardName" class="card-item__info" ref="cardName">
68 <div class="card-item__holder">Card Holder</div>
69 <transition name="slide-fade-up">
70 <div class="card-item__name" v-if="cardName.length" key="1">
71 <transition-group name="slide-fade-right">
72 <span class="card-item__nameItem" v-for="(n, $index) in cardName.replace(/\s\s+/g, ' ')" v-if="$index === $index" v-bind:key="$index + 1">{{n}}</span>
73 </transition-group>
74 </div>
75 <div class="card-item__name" v-else key="2">Full Name</div>
76 </transition>
77 </label>
78 <div class="card-item__date" ref="cardDate">
79 <label for="cardMonth" class="card-item__dateTitle">Expires</label>
80 <label for="cardMonth" class="card-item__dateItem">
81 <transition name="slide-fade-up">
82 <span v-if="cardMonth" v-bind:key="cardMonth">{{cardMonth}}</span>
83 <span v-else key="2">MM</span>
84 </transition>
85 </label>
86 /
87 <label for="cardYear" class="card-item__dateItem">
88 <transition name="slide-fade-up">
89 <span v-if="cardYear" v-bind:key="cardYear">{{String(cardYear).slice(2,4)}}</span>
90 <span v-else key="2">YY</span>
91 </transition>
92 </label>
93 </div>
94 </div>
95 </div>
96 </div>
97 <div class="card-item__side -back">
98 <div class="card-item__cover">
99 <img
100 v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'" class="card-item__bg">
101 </div>
102 <div class="card-item__band"></div>
103 <div class="card-item__cvv">
104 <div class="card-item__cvvTitle">CVV</div>
105 <div class="card-item__cvvBand">
106 <span v-for="(n, $index) in cardCvv" :key="$index">
107 *
108 </span>
109
110 </div>
111 <div class="card-item__type">
112 <img v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'" v-if="getCardType" class="card-item__typeImg">
113 </div>
114 </div>
115 </div>
116 </div>
117 </div>
118 <div class="card-form__inner">
119 <div class="card-input">
120 <label for="cardNumber" class="card-input__label">Card Number</label>
121 <input type="text" id="cardNumber" class="card-input__input" v-mask="generateCardNumberMask" v-model="cardNumber" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardNumber" autocomplete="off">
122 </div>
123 <div class="card-input">
124 <label for="cardName" class="card-input__label">Card Holders</label>
125 <input type="text" id="cardName" class="card-input__input" v-model="cardName" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardName" autocomplete="off">
126 </div>
127 <div class="card-form__row">
128 <div class="card-form__col">
129 <div class="card-form__group">
130 <label for="cardMonth" class="card-input__label">Expiration Date</label>
131 <select class="card-input__input -select" id="cardMonth" v-model="cardMonth" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
132 <option value="" disabled selected>Month</option>
133 <option v-bind:value="n < 10 ? '0' + n : n" v-for="n in 12" v-bind:disabled="n < minCardMonth" v-bind:key="n">
134 {{n < 10 ? '0' + n : n}}
135 </option>
136 </select>
137 <select class="card-input__input -select" id="cardYear" v-model="cardYear" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
138 <option value="" disabled selected>Year</option>
139 <option v-bind:value="$index + minCardYear" v-for="(n, $index) in 12" v-bind:key="n">
140 {{$index + minCardYear}}
141 </option>
142 </select>
143 </div>
144 </div>
145 <div class="card-form__col -cvv">
146 <div class="card-input">
147 <label for="cardCvv" class="card-input__label">CVV</label>
148 <input type="text" class="card-input__input" id="cardCvv" v-mask="'####'" maxlength="4" v-model="cardCvv" v-on:focus="flipCard(true)" v-on:blur="flipCard(false)" autocomplete="off">
149 </div>
150 </div>
151 </div>
152
153 <button class="card-form__button">
154 Submit
155 </button>
156 </div>
157 </div>
158
159 </div>
160
161 <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
162<script src='https://unpkg.com/vue-the-mask@0.11.1/dist/vue-the-mask.js'></script>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.