> ## 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
## Customization Options
All customizable components are subject to being styled with [global CSS
properties](./global-customizations) 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`). |
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:
