Skip to main content

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

​
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.
Text elements can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-heading-line-heightAccepts any valid CSS line-height value (e.g., 40px, 1.5).
--qonto-embed-heading-font-size-1Accepts any valid font size for heading level 1 (e.g., 32px, 2em).
--qonto-embed-heading-font-size-2Accepts any valid font size for heading level 2 (e.g., 24px, 1.5em).
--qonto-embed-heading-font-size-3Accepts any valid font size for heading level 3 (e.g., 20px, 1.25em).
--qonto-embed-heading-font-size-4Accepts any valid font size for heading level 4 (e.g., 16px, 1em).
--qonto-embed-heading-font-weight-1Accepts any valid font weight for heading level 1 (e.g., 600, bold).
--qonto-embed-heading-font-weight-2Accepts any valid font weight for heading level 2 (e.g., 600, bold).
--qonto-embed-heading-font-weight-3Accepts any valid font weight for heading level 3 (e.g., 400, normal).
--qonto-embed-heading-font-weight-4Accepts 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: 
: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