Skip to main content
The Beneficiary Card displays information about a payment beneficiary, including their name, IBAN, and currency. It provides a clear, compact way to show beneficiary details in transfer flows.

​
Default Styling

By default, the Beneficiary Card uses Qonto’s branding with a clean card layout: Default beneficiary card style

​
Customization Options

All customizable components are subject to being styled with global CSS properties exposed by the Qonto Embed SDK. If no component-level style is applied by the SDK, the global styles will be used if they are defined.
The Beneficiary Card can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-beneficiary-card-background-colorBackground color of the card (e.g., #ffffff, #f5f5f5).
--qonto-embed-beneficiary-card-background-color-hoverBackground color when hovering over the card.
--qonto-embed-beneficiary-card-border-colorBorder color of the card (e.g., 1px solid #e8e8e8).
--qonto-embed-beneficiary-card-border-color-hoverBorder color when hovering over the card.
--qonto-embed-beneficiary-card-border-radiusBorder radius of the card (e.g., 4px, 8px).
--qonto-embed-beneficiary-card-name-font-sizeFont size for the beneficiary name (e.g., 14px, 1em).
--qonto-embed-beneficiary-card-name-font-weightFont weight for the beneficiary name (e.g., 400, bold).
--qonto-embed-beneficiary-card-name-colorColor of the beneficiary name text.
--qonto-embed-beneficiary-card-iban-font-sizeFont size for the IBAN (e.g., 14px).
--qonto-embed-beneficiary-card-iban-font-weightFont weight for the IBAN (e.g., 400).
--qonto-embed-beneficiary-card-iban-colorColor of the IBAN text.
--qonto-embed-beneficiary-card-currency-font-sizeFont size for the currency badge (e.g., 12px).
--qonto-embed-beneficiary-card-currency-font-weightFont weight for the currency badge.
--qonto-embed-beneficiary-card-currency-colorColor of the currency badge text.
The Beneficiary Card automatically formats IBANs with proper spacing. The IBAN formatting logic is handled by the component and cannot be customized via CSS. The card also supports an optional footer slot for additional content, which will be styled with the same variables listed above.

​
Example

This example shows a customized Beneficiary Card: 
:root {
  --qonto-embed-beneficiary-card-background-color: #579bdf;
  --qonto-embed-beneficiary-card-border-color: #701695;
  --qonto-embed-beneficiary-card-border-radius: 16px;
  --qonto-embed-beneficiary-card-name-font-size: 16px;
  --qonto-embed-beneficiary-card-name-font-weight: 600;
  --qonto-embed-beneficiary-card-name-color: #eff1f7;
  --qonto-embed-beneficiary-card-iban-font-size: 14px;
  --qonto-embed-beneficiary-card-iban-color: #d5d8e0;
  --qonto-embed-beneficiary-card-currency-font-size: 12px;
  --qonto-embed-beneficiary-card-currency-color: #155be8;
}
The result is a card with a colored background, rounded corners, and larger typography: Customized beneficiary card style