Credit Card
Credit card visualizations are used to display key information about a credit card in a visually appealing format.
Overview
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
<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>Properties
balance
Represents the current balance displayed on the credit card.
Example: "AED 50,000" or "$200.00"
string
card_number
The full card number, but only the last four digits are displayed for security.
Example: "1234567812345678" (will display as **** 5678)
string
card_type
A URL or path to the card type icon/image (e.g., Visa, MasterCard, etc.).
Example: "/assets/icons/visa.png"
string
component_mode
Represents different modes/styles of the component, possibly controlled dynamically.
string
custom_class
Allows users to apply additional custom CSS classes to the component.
string
design
Specifies the design theme of the card, used for adding specific styling classes.
string
name
Displays the cardholder's name.
Example: "John Doe"
string
Anatomy
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
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.
Last updated