Credit Card
A visual credit card component with 13 style variants, optional scaling, and a card-network detection utility.
Credits
This component was designed by Untitled UI. I just made it compatible with UI Thing.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Import getCardType alongside the component when you need to detect the card network from a number entered by the user.
import { getCardType } from "~/components/Ui/CreditCard.vue";
const network = getCardType("4111 1111 1111 1111"); // "visa"
Variants
Normal
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
Horizontal Strip
The bottom half of the card becomes a dark strip — common in designs that separate the number area from the brand area.
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
Vertical Strip
A dark panel occupies the left portion of the card, leaving a coloured accent stripe on the right.
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
Scaled
Pass a width prop to scale the card proportionally from its native 316 × 190 px dimensions.
JOHN DOE
06/36
JOHN DOE
06/36
JOHN DOE
06/36
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | CreditCardVariant | "brand-dark" | Visual style of the card. |
company | string | "UI Thing." | Brand or company name shown at the top-left. |
cardNumber | string | "1234 1234 1234 1234" | Formatted card number. |
cardHolder | string | "JOHN DOE" | Cardholder name shown in the footer. |
cardExpiration | string | "06/36" | Expiration date shown in the footer. |
width | number | — | Target render width in px. The card scales proportionally when provided. |
networkIcon | string | — | Icon name for the network logo (e.g. "logos:visa"). Falls back to Mastercard based on variant. Overridden by the network-icon slot. |
contactlessIcon | string | — | Icon name for the contactless symbol. Defaults to "mdi:contactless-payment". Overridden by the contactless-icon slot. |
class | HTMLAttributes["class"] | — | Extra classes applied to the outer wrapper element. |
Slots
| Slot | Description |
|---|---|
company | Replaces the company name in the top-left corner. |
contactless-icon | Replaces the contactless symbol in the top-right corner. Takes precedence over contactlessIcon. |
card-holder | Replaces the cardholder name in the footer. |
card-expiration | Replaces the expiration date in the footer. |
card-number | Replaces the card number in the footer. |
network-icon | Replaces the network logo in the bottom-right corner. Takes precedence over networkIcon. |
Variants reference
| Variant | Style |
|---|---|
brand-dark | Solid primary gradient |
brand-light | Light primary tint |
gray-dark | Dark gray gradient |
gray-light | Light gray |
transparent | Frosted-glass (blur + white overlay) |
transparent-gradient | Frosted-glass with coloured diffuse glows |
gray-strip | Light gray top, dark strip bottom |
gradient-strip | Blue→pink gradient top, dark strip bottom |
salmon-strip | Salmon top, dark strip bottom |
transparent-strip | Frosted top, dark strip bottom |
gray-strip-vertical | Dark panel left, glass right |
gradient-strip-vertical | Dark panel left, pink→purple gradient right |
salmon-strip-vertical | Dark panel left, salmon right |