# Credit Card

The `CreditCard` component displays a visual representation of a credit card, showing the brand, expiry date, and last four digits of the card number.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FxgrO8EH6oY122AyE0tV3%2Fcreditcard.png?alt=media&#x26;token=bb375c43-8968-4b8e-b118-15b8fcb926c7" alt="Gravity credit card component" width="314"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { CreditCard } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <CreditCard 
      brand='Visa' 
      expires='12/24' 
      last_four='1234' 
    />
  );
}
```

### Props

| Prop       | Description                     | Required | Value  |
| ---------- | ------------------------------- | -------- | ------ |
| brand      | card provider name              | required | string |
| expires    | card expiry date                | required | string |
| last\_four | last four digits of card number | required | string |

### Notes

* The `brand` prop specifies the card provider name.
* The `expires` prop specifies the expiry date of the card.
* The `last_four` prop specifies the last four digits of the card number.