Payment card
A card form with a live preview
Card
Numbers group themselves as you type.
VISA
4242 4242 4242 4242
Card holderMaya Lindqvist
Expires08/29
Code
<div class="pay-grid">
<div class="bank-card" style="--h: 265" role="img" aria-label="Card preview">
<div class="bc-top"><span class="bc-chip"></span><span class="bc-brand">VISA</span></div>
<div class="bc-number" data-from="pc-num" data-empty="•••• •••• •••• ••••">4242 4242 4242 4242</div>
<div class="bc-foot">
<div><small>Card holder</small><b data-from="pc-name" data-empty="Your name">Maya Lindqvist</b></div>
<div><small>Expires</small><b data-from="pc-exp" data-empty="MM/YY">08/29</b></div>
</div>
</div>
<form action="#" novalidate data-validate data-demo data-success="Card saved">
<div class="form-grid">
<div class="span-2">
<label class="form-label" for="pc-name">Name on card<span class="req" aria-hidden="true">*</span></label><input id="pc-name" name="pc-name" type="text" value="Maya Lindqvist" required autocomplete="cc-name" class="form-control">
</div>
<div class="span-2">
<label class="form-label" for="pc-num">Card number<span class="req" aria-hidden="true">*</span></label>
<div class="field">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input id="pc-num" name="pc-num" type="text" placeholder="1234 1234 1234 1234" value="4242 4242 4242 4242" required autocomplete="cc-number" inputmode="numeric" data-mask="card">
</div>
</div>
<div>
<label class="form-label" for="pc-exp">Expires<span class="req" aria-hidden="true">*</span></label><input id="pc-exp" name="pc-exp" type="text" placeholder="MM/YY" value="08/29" required autocomplete="cc-exp" inputmode="numeric" data-mask="expiry" class="form-control">
</div>
<div>
<label class="form-label" for="pc-cvc">Security code<span class="req" aria-hidden="true">*</span></label><input id="pc-cvc" name="pc-cvc" type="text" placeholder="123" required autocomplete="cc-csc" inputmode="numeric" data-mask="cvc" class="form-control">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Save card</button>
</div>
</form>
</div>