Card Vendor

Component that displays card vendor logos with proper accessibility attributes

Import


                                                        
                                                        
                                                            import { CardVendorModule } from '@backbase/ui-ang/card-vendor'

Usage

Use the bb-card-vendor-ui component to display a card vendor logo. The vendor input is required.


                                                        
                                                        
                                                            <!-- Basic card vendor usage with vendor name -->
                                                        <bb-card-vendor-ui [vendor]="mastercard"></bb-card-vendor-ui>

Inputs

Input	Type	Default
vendor (required)	string \| 'mastercard' \| 'visa' \| 'visa-debit' \| 'visa-white' \| 'diners-club' \| 'maestro' \| 'union-pay'

vendor

The vendor input sets the card vendor whose logo will be displayed. This input is required and must be a string matching a supported vendor (e.g., ’visa', ’mastercard'). If not provided, an error is thrown.


                                                        
                                                        
                                                            <!-- Mastercard -->
                                                        <bb-card-vendor-ui vendor="mastercard"></bb-card-vendor-ui>
                                                        
                                                        <!-- Visa -->
                                                        <bb-card-vendor-ui vendor="visa"></bb-card-vendor-ui>
                                                        
                                                        <!-- Visa Debit -->
                                                        <bb-card-vendor-ui vendor="visa-debit"></bb-card-vendor-ui>
                                                        
                                                        <!-- Diners Club -->
                                                        <bb-card-vendor-ui vendor="diners-club"></bb-card-vendor-ui>
                                                        
                                                        <!-- Maestro -->
                                                        <bb-card-vendor-ui vendor="maestro"></bb-card-vendor-ui>
                                                        
                                                        <!-- UnionPay -->
                                                        <bb-card-vendor-ui vendor="union-pay"></bb-card-vendor-ui>
                                                        
                                                        <!-- Visa White (for dark backgrounds) -->
                                                        <bb-card-vendor-ui vendor="visa-white"></bb-card-vendor-ui>