> ## 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.

# Text - Headings

Text elements are fundamental components used to display textual content throughout the interface. They include various
heading levels that provide hierarchical structure and visual emphasis to organize information effectively.

## Default Styling

By default, text elements use Qonto's typography system with four heading levels:

* **Heading 1**: The largest heading for main titles and primary sections
* **Heading 2**: Secondary headings for major subsections
* **Heading 3**: Tertiary headings for smaller sections
* **Heading 4**: The smallest heading level for minor subsections

![Default text styles](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/text-heading-default.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=ead9c72ecec8effdc5d5e3f96bbdbb4b)

## 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.

Text elements can be customized using the following CSS variables:

| CSS Variable | Description & Accepted Values |
| - | - |
| `--qonto-embed-heading-line-height` | Accepts any valid CSS line-height value (e.g., `40px`, `1.5`). |
| `--qonto-embed-heading-font-size-1` | Accepts any valid font size for heading level 1 (e.g., `32px`, `2em`). |
| `--qonto-embed-heading-font-size-2` | Accepts any valid font size for heading level 2 (e.g., `24px`, `1.5em`). |
| `--qonto-embed-heading-font-size-3` | Accepts any valid font size for heading level 3 (e.g., `20px`, `1.25em`). |
| `--qonto-embed-heading-font-size-4` | Accepts any valid font size for heading level 4 (e.g., `16px`, `1em`). |
| `--qonto-embed-heading-font-weight-1` | Accepts any valid font weight for heading level 1 (e.g., `600`, `bold`). |
| `--qonto-embed-heading-font-weight-2` | Accepts any valid font weight for heading level 2 (e.g., `600`, `bold`). |
| `--qonto-embed-heading-font-weight-3` | Accepts any valid font weight for heading level 3 (e.g., `400`, `normal`). |
| `--qonto-embed-heading-font-weight-4` | Accepts any valid font weight for heading level 4 (e.g., `400`, `normal`). |

> [!NOTE]
>
> Some aspects of text elements cannot be customized at component level, such as
> text color.

### Example

This example shows customized text elements that depart from the default Qonto styling:

```css theme={null}
:root {
  --qonto-embed-heading-font-size-1: 48px;
  --qonto-embed-heading-font-size-2: 36px;
  --qonto-embed-heading-font-size-3: 24px;
  --qonto-embed-heading-font-size-4: 16px;
}
```

The result is text elements with larger font sizes, which shows text wrapping into the next line more frequently:

![Customized text styles](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/text-heading-customized.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=9f45946b4aad8cb56ddb1ac6055207d7)