Import
import { ProductItemCreditCardModule } from '@backbase/ui-ang/product-item-credit-card'
Usage
Use the bb-product-item-credit-card-ui component to display credit card information. The component extends the base product item functionality with credit card-specific features including main and secondary sections.
<!-- Basic product item credit card usage -->
<bb-product-item-credit-card-ui
title="John Doe"
productNumber="4322"
[amount]="1425.99"
currency="EUR"
mainSectionCurrency="EUR"
[mainSectionAmount]="880.54"
mainSectionTitle="Available balance"
secondarySectionCurrency="EUR"
[secondarySectionAmount]="7280.86"
secondarySectionTitle="Credit Limit"
[productDetailsInfo]="{ owners: 'Richard Norton' }">
</bb-product-item-credit-card-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
active |
boolean |
true |
|
amount |
number |
undefined |
|
currency |
string |
undefined |
|
favorite |
boolean |
false |
|
favoriteIconColor |
string |
'primary' |
|
highlight |
boolean |
undefined |
|
mainSectionAmount |
number |
undefined |
|
mainSectionCurrency |
string |
undefined |
|
mainSectionTitle |
string |
undefined |
|
moneyProtectionStatus |
MoneyProtectionStatusEnum |
undefined |
|
moneyProtectionStatusClasses |
string |
undefined |
|
productDetailsInfo |
Record<string, any> |
undefined |
|
productNumber |
string |
undefined |
|
productNumberFormat |
PaymentCardNumberFormat |
{ length: 16, maskRange: [0, 12], segments: 4 } |
|
secondarySectionAmount |
number |
undefined |
|
secondarySectionCurrency |
string |
undefined |
|
secondarySectionTitle |
string |
undefined |
|
title |
string |
undefined |
active
The active input determines whether the card should display an active state indicator.
<!-- Product item without active indicator -->
<bb-product-item-credit-card-ui
title="Credit Card"
[amount]="1500.00"
currency="EUR"
[active]="false">
</bb-product-item-credit-card-ui>
amount
The amount input sets the primary balance amount to be displayed on the card.
<!-- Product item with specific amount -->
<bb-product-item-credit-card-ui
title="Premium Credit Card"
[amount]="2500.75"
currency="USD">
</bb-product-item-credit-card-ui>
currency
The currency input sets the currency code for the primary amount display.
<!-- Product item with USD currency -->
<bb-product-item-credit-card-ui
title="USD Credit Card"
[amount]="3000.00"
currency="USD">
</bb-product-item-credit-card-ui>
favorite
The favorite input determines whether the card should display a star icon to indicate it's marked as favorite.
<!-- Product item marked as favorite -->
<bb-product-item-credit-card-ui
title="Main Credit Card"
[amount]="5000.00"
currency="EUR"
[favorite]="true">
</bb-product-item-credit-card-ui>
favoriteIconColor
The favoriteIconColor input sets the color of the favorite star icon when favorite is true.
<!-- Product item with custom favorite icon color -->
<bb-product-item-credit-card-ui
title="Premium Card"
[amount]="10000.00"
currency="EUR"
[favorite]="true"
favoriteIconColor="warning">
</bb-product-item-credit-card-ui>
highlight
The highlight input determines whether the amount and currency values should be visually highlighted.
<!-- Product item with highlighted amounts -->
<bb-product-item-credit-card-ui
title="Featured Card"
[amount]="7500.00"
currency="EUR"
[highlight]="true">
</bb-product-item-credit-card-ui>
mainSectionAmount
The mainSectionAmount input sets the amount to be displayed in the main section below the primary amount.
<!-- Product item with main section amount -->
<bb-product-item-credit-card-ui
title="Credit Card"
[amount]="2000.00"
currency="EUR"
[mainSectionAmount]="1500.00"
mainSectionCurrency="EUR"
mainSectionTitle="Available Credit">
</bb-product-item-credit-card-ui>
mainSectionCurrency
The mainSectionCurrency input sets the currency code for the main section amount.
<!-- Product item with main section currency -->
<bb-product-item-credit-card-ui
title="Multi-Currency Card"
[amount]="2000.00"
currency="EUR"
[mainSectionAmount]="1800.00"
mainSectionCurrency="USD"
mainSectionTitle="USD Available">
</bb-product-item-credit-card-ui>
mainSectionTitle
The mainSectionTitle input sets the label text for the main section amount.
<!-- Product item with main section title -->
<bb-product-item-credit-card-ui
title="Business Card"
[amount]="5000.00"
currency="EUR"
[mainSectionAmount]="3500.00"
mainSectionCurrency="EUR"
mainSectionTitle="Available Balance">
</bb-product-item-credit-card-ui>
moneyProtectionStatus
The moneyProtectionStatus input sets the money protection status indicator. Accepts Yes, No, or NA values from MoneyProtectionStatusEnum.
<!-- Product item with money protection status -->
<bb-product-item-credit-card-ui
title="Protected Card"
[amount]="8000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-credit-card-ui>
moneyProtectionStatusClasses
The moneyProtectionStatusClasses input allows adding custom CSS classes to the money protection status component.
<!-- Product item with custom money protection styling -->
<bb-product-item-credit-card-ui
title="Insured Card"
[amount]="12000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
moneyProtectionStatusClasses="custom-protection-style">
</bb-product-item-credit-card-ui>
productDetailsInfo
The productDetailsInfo input provides additional product information, such as card owners, to be displayed below the main content.
<!-- Product item with product details -->
<bb-product-item-credit-card-ui
title="Joint Credit Card"
[amount]="15000.00"
currency="EUR"
[productDetailsInfo]="{ owners: 'John & Jane Smith' }">
</bb-product-item-credit-card-ui>
productNumber
The productNumber input sets the card number to be displayed, formatted according to productNumberFormat.
<!-- Product item with product number -->
<bb-product-item-credit-card-ui
title="Visa Card"
[amount]="3000.00"
currency="EUR"
productNumber="4322123456789012">
</bb-product-item-credit-card-ui>
productNumberFormat
The productNumberFormat input configures how the product number should be formatted and masked.
<!-- Product item with custom number formatting -->
<bb-product-item-credit-card-ui
title="Mastercard"
[amount]="4000.00"
currency="EUR"
productNumber="5555444433332222"
[productNumberFormat]="{ length: 16, maskRange: [0, 12], segments: 4 }">
</bb-product-item-credit-card-ui>
secondarySectionAmount
The secondarySectionAmount input sets the amount to be displayed in the secondary section below the main section.
<!-- Product item with secondary section amount -->
<bb-product-item-credit-card-ui
title="Premium Card"
[amount]="2500.00"
currency="EUR"
[mainSectionAmount]="2000.00"
mainSectionTitle="Available"
[secondarySectionAmount]="10000.00"
secondarySectionCurrency="EUR"
secondarySectionTitle="Credit Limit">
</bb-product-item-credit-card-ui>
secondarySectionCurrency
The secondarySectionCurrency input sets the currency code for the secondary section amount.
<!-- Product item with secondary section currency -->
<bb-product-item-credit-card-ui
title="International Card"
[amount]="3000.00"
currency="EUR"
[secondarySectionAmount]="2500.00"
secondarySectionCurrency="USD"
secondarySectionTitle="USD Limit">
</bb-product-item-credit-card-ui>
secondarySectionTitle
The secondarySectionTitle input sets the label text for the secondary section amount.
<!-- Product item with secondary section title -->
<bb-product-item-credit-card-ui
title="Gold Card"
[amount]="4000.00"
currency="EUR"
[secondarySectionAmount]="15000.00"
secondarySectionCurrency="EUR"
secondarySectionTitle="Total Credit Limit">
</bb-product-item-credit-card-ui>
title
The title input sets the card name or title to be displayed as the main heading.
<!-- Product item with custom title -->
<bb-product-item-credit-card-ui
title="Platinum Rewards Card"
[amount]="6000.00"
currency="EUR">
</bb-product-item-credit-card-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemCreditCardTitle: Custom template for the title area
- bbCustomProductItemCreditCardDetailsFormatter: Custom template for the primary amount area
- bbCustomProductItemCreditCardMainSection: Custom template for the main section area
- bbCustomProductItemCreditCardSecondarySection: Custom template for the secondary section area
<!-- Product item with custom main section template -->
<bb-product-item-credit-card-ui title="Custom Card" [amount]="5000" currency="EUR">
<ng-template bbCustomProductItemCreditCardMainSection>
<div class="custom-main-section">
<div class="custom-label">Available Credit</div>
<div class="custom-amount">€3,500.00</div>
<div class="custom-progress-bar">
<div class="progress-fill" style="width: 70%"></div>
</div>
</div>
</ng-template>
</bb-product-item-credit-card-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- Screen reader support: Proper labeling for card numbers, balances, and status information
- Semantic structure: Uses appropriate HTML elements and data attributes for card information
- Visual hierarchy: Clear distinction between primary amount, main section, and secondary section
- Internationalization: Built-in i18n support for labels and screen reader text
- Focus management: Proper focus handling for interactive elements
- Currency formatting: Automatic currency formatting and proper display of multiple currency amounts
The component automatically handles different credit card information sections with appropriate visual styling and accessibility features, including proper semantic markup for financial information and support for multiple currency displays.