... LOADING ...

Credit Card
Card stylised as a bank card
-
A simple way to present a credit card with details. Card information fields are inputs with masks. Find more gradients at Gradienta! It should go without saying that none of these details are real.
No Gradient
Card Holder
Expiry Date
Cvv
Gradient 1
Card Holder
Expiry Date
Cvv
Gradient 2
Card Holder
Expiry Date
Cvv
Gradient 3
Card Holder
Expiry Date
Cvv
Gradient 4
Card Holder
Expiry Date
Cvv
Gradient 5
Card Holder
Expiry Date
Cvv
Gradient 6
Card Holder
Expiry Date
Cvv
Gradient 7
Card Holder
Expiry Date
Cvv
Gradient 8
Card Holder
Expiry Date
Cvv
Gradient 9
Card Holder
Expiry Date
Cvv
Gradient 10
Card Holder
Expiry Date
Cvv
            
<div class="jca-credit-card jca-credit-card--gradient-1">
  <div class="jca-credit-card__logo">
    <img src=".." alt="Visa logo">
    <div class="jca-credit-card__type">Credit</div>
  </div>
  <div class="jca-credit-card__card-number">
    <input type="text" value="3173 9164 6197 1610 117" data-mask="visa" />
  </div>
  <div class="jca-credit-card__meta">
    <div class="jca-credit-card__owner">
      <div class="jca-credit-card__label">Card Holder</div>
      <div class="jca-credit-card__text">
        <input type="text" value="Will Smith" />
      </div>
    </div>
    <div class="jca-credit-card__expiry">
      <div class="jca-credit-card__label">Expiry Date</div>
      <div class="jca-credit-card__text">
        <input class="jca-credit-card__month" type="text" value="01" />
        <input class="jca-credit-card__year" type="text" value="2022" />
      </div>
    </div>
    <div class="jca-credit-card__cvv">
      <div class="jca-credit-card__label">Cvv</div>
      <div class="jca-credit-card__text">
        <input class="jca-credit-card__cvv-digits" type="text" value="790" data-mask="cvv" />
      </div>
    </div>
  </div>
</div>

The information contained in this website is for general information purposes only. The information is provided by TT | Sftwr and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.

In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.