← Back to Design System
A responsive and stylized credit card component with support for multiple variants, sizes, and brand themes.
Basic Usage
Display customizable cards with details such as company name, cardholder, and expiration date.
BREX
PEDRO FRANCESCHI
12/28
5678 9012 3456 78901
Apple Inc.
TIM COOK
03/29
0987 6543 2109 87651
<CreditCard
type="brand-dark"
company="BREX"
cardNumber="5678 9012 3456 7890"
cardHolder="PEDRO FRANCESCHI"
cardExpiration="12/28"
/>
<CreditCard
type="gradient-strip"
company="Apple Inc."
cardNumber="0987 6543 2109 8765"
cardHolder="TIM COOK"
cardExpiration="03/29"
/>Width Scaling
Adjust the width prop to resize the card proportionally while maintaining its aspect ratio.
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
<CreditCard type="brand-dark" width={220} />
<CreditCard type="brand-dark" width={280} />
<CreditCard type="brand-dark" width={340} />Visual Variants
Several predefined designs are available, including light, dark, and gradient styles.
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
Untitled.
OLIVIA RHYE
06/28
1234 1234 1234 12341
<CreditCard type="transparent" />
<CreditCard type="transparent-gradient" />
<CreditCard type="brand-dark" />
<CreditCard type="brand-light" />
<CreditCard type="gray-dark" />
<CreditCard type="gray-light" />
<CreditCard type="transparent-strip" />
<CreditCard type="gray-strip" />
<CreditCard type="gradient-strip" />
<CreditCard type="salmon-strip" />
<CreditCard type="gray-strip-vertical" />
<CreditCard type="salmon-strip-vertical" />API Reference
Available props for the CreditCard component.
| Property | Type | Description | Default |
|---|---|---|---|
type | string | Visual variant of the card. | "brand-dark" |
width | number | The card width (height adjusts automatically). | 316 |
company | string | The displayed company name. | "Untitled." |
cardNumber | string | The visible number on the card. | "1234 1234..." |
cardHolder | string | The cardholder’s name. | "OLIVIA RHYE" |
cardExpiration | string | Expiration date. | "06/28" |