> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qonto.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Beneficiary Card

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](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/beneficiary-card-default.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=35a596e4618db5ed62b7ff822bd58ed8)

## Customization Options

> [!NOTE]
>
> All customizable components are subject to being styled with [global CSS
> properties](https://docs.qonto.com/partnerships/embed/sdk/customizable-components/global-customizations.md) 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 Variable | Description & Accepted Values |
| - | - |
| `--qonto-embed-beneficiary-card-background-color` | Background color of the card (e.g., `#ffffff`, `#f5f5f5`). |
| `--qonto-embed-beneficiary-card-background-color-hover` | Background color when hovering over the card. |
| `--qonto-embed-beneficiary-card-border-color` | Border color of the card (e.g., `1px solid #e8e8e8`). |
| `--qonto-embed-beneficiary-card-border-color-hover` | Border color when hovering over the card. |
| `--qonto-embed-beneficiary-card-border-radius` | Border radius of the card (e.g., `4px`, `8px`). |
| `--qonto-embed-beneficiary-card-name-font-size` | Font size for the beneficiary name (e.g., `14px`, `1em`). |
| `--qonto-embed-beneficiary-card-name-font-weight` | Font weight for the beneficiary name (e.g., `400`, `bold`). |
| `--qonto-embed-beneficiary-card-name-color` | Color of the beneficiary name text. |
| `--qonto-embed-beneficiary-card-iban-font-size` | Font size for the IBAN (e.g., `14px`). |
| `--qonto-embed-beneficiary-card-iban-font-weight` | Font weight for the IBAN (e.g., `400`). |
| `--qonto-embed-beneficiary-card-iban-color` | Color of the IBAN text. |
| `--qonto-embed-beneficiary-card-currency-font-size` | Font size for the currency badge (e.g., `12px`). |
| `--qonto-embed-beneficiary-card-currency-font-weight` | Font weight for the currency badge. |
| `--qonto-embed-beneficiary-card-currency-color` | Color of the currency badge text. |

> [!NOTE]
>
> 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:

```css theme={null}
: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](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/beneficiary-card-customized.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=1432dca07b9c0947ff412c3ea6eec075)