# Credit Card

## Overview

<figure><img src="/files/ITNJmaORzWFHrApue8Gp" alt=""><figcaption></figcaption></figure>

## Usage

### **When to Use This Component**

Credit card visualizations are used in financial applications and dashboards to display essential information like card number, cardholder name, balance, and other relevant details. They are ideal for account overviews, payment details, or any interface where users need to view or manage their credit card information.

### **How It Works**

A credit card visualization component presents key credit card information in a design resembling a physical card, typically displaying details such as the card number, cardholder name, and balance. It may include various visual styles to represent different types of cards, enhancing the user’s understanding and organization of their financial information.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-credit-card
    balance="$5,750.20"
    name="MARIA GOMEZ"
    card_number="1289"
    card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    design="default"
    custom_class=""
    component_mode=""
></dda-credit-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
   <DdaCreditCard
            balance="$5,750.20"
            name="MARIA GOMEZ"
            card_number="1289"
            card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
            design="default"
            custom_class=""
            component_mode=""
        ></DdaCreditCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
    <DdaCreditCard
            balance="$5,750.20"
            name="MARIA GOMEZ"
            card_number="1289"
            card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
            design="default"
            custom_class=""
            component_mode=""
        ></DdaCreditCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-credit-card
    balance="$5,750.20"
    name="MARIA GOMEZ"
    card_number="1289"
    card_type="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
    design="default"
    custom_class=""
    component_mode=""
></dda-credit-card>
```

{% endtab %}
{% endtabs %}

### Properties

<table><thead><tr><th width="193">Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>balance</code></td><td>Represents the current balance displayed on the credit card.<br>Example: <code>"AED 50,000"</code> or <code>"$200.00"</code></td><td><code>string</code></td></tr><tr><td><code>card_number</code></td><td>The full card number, but only the last four digits are displayed for security.<br>Example: <code>"1234567812345678"</code> (will display as <code>**** 5678</code>)</td><td><code>string</code></td></tr><tr><td><code>card_type</code></td><td>A URL or path to the card type icon/image (e.g., Visa, MasterCard, etc.).<br>Example: <code>"/assets/icons/visa.png"</code></td><td><code>string</code></td></tr><tr><td><code>component_mode</code></td><td>Represents different modes/styles of the component, possibly controlled dynamically.</td><td><code>string</code></td></tr><tr><td><code>custom_class</code></td><td>Allows users to apply additional custom CSS classes to the component.</td><td><code>string</code></td></tr><tr><td><code>design</code></td><td>Specifies the design theme of the card, used for adding specific styling classes.</td><td><code>string</code></td></tr><tr><td><code>name</code></td><td>Displays the cardholder's name.<br>Example: <code>"John Doe"</code></td><td><code>string</code></td></tr></tbody></table>

## Anatomy

<figure><img src="/files/H2RhEAI6c7pjl7iCBFGf" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Card Header**: Displays the header text, such as "Current Balance," indicating the purpose or type of information presented on the card.

**Card Balance**: Shows the current balance amount, providing the user with financial information at a glance.

**Cardholder's Name**: Displays the name of the cardholder, confirming ownership and identity on the card.

**Card Number**: Shows a partially masked card number for security, typically showing only the last four digits to help the user identify the card.

**Contactless Symbol**: Positioned in the upper right corner, this symbol indicates that the card supports contactless payments.

**Brand Logo**: Displays the logo of the card provider (e.g., Mastercard), adding visual identification of the issuing brand.

## Dos and Don'ts

| Dos                                                                                                 | Don'ts                                                                       |
| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| Use credit card visualizations to display key information about credit cards clearly and concisely. | Don't overload the card with too much information that can clutter the view. |
| Ensure the card number is partially masked for security.                                            | Don't display the full card number unless absolutely necessary and secure.   |
| Label the fields clearly to indicate what each piece of information represents.                     | Avoid using ambiguous or unclear labels for card details.                    |
| Provide visual feedback when the card information is updated.                                       | Don't leave users guessing whether their information has been updated.       |
| Use consistent styling and spacing across all credit card visualizations in the application.        | Don't use inconsistent styles that may confuse users.                        |
| Ensure the design is responsive and looks good on all device sizes.                                 | Don't design the card visualization for a specific device only.              |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/credit-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.