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

Text Body is a component for displaying body text content with consistent typography. It renders text in a paragraph tag with customizable styling for font size, weight, line height, and color.

## Default Styling

By default, the Text Body component uses Qonto's branding with standard body text styling:

<img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/text-body-default.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=0c0389a1bf45d14b889a2ad9b08c9f8d" alt="Default text body style" width="858" height="466" data-path="api-reference/sdk-libraries/doc-pages/img/text-body-default.png" />

## Customization Options

<Info>
  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.
</Info>

The Text Body component can be customized using the following CSS variables:

| CSS Variable                          | Description & Accepted Values                                |
| ------------------------------------- | ------------------------------------------------------------ |
| `--qonto-embed-content-font-size`     | Font size for body text (e.g., `14px`, `16px`, `1rem`).      |
| `--qonto-embed-content-font-weight`   | Font weight for body text (e.g., `400`, `500`, `bold`).      |
| `--qonto-embed-content-line-height`   | Line height for body text (e.g., `24px`, `1.5`, `1.6`).      |
| `--qonto-embed-content-color-primary` | Color of the body text (e.g., `#000`, `#333`, `rgb(0,0,0)`). |

<Info>
  The Text Body component automatically wraps content in a paragraph tag and
  removes default margins. It's designed to work seamlessly with slotted
  content, making it easy to integrate into your application's content
  structure.
</Info>

### Example

This example shows customized Text Body styling:

```css theme={null}
:root {
  --qonto-embed-content-font-size: 24px;
  --qonto-embed-content-font-weight: 600;
  --qonto-embed-content-line-height: 1.6;
  --qonto-embed-content-color-primary: #1f2937;
}
```

The result is body text with larger font size, increased line height for better readability:

<img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/text-body-customized.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=179262b6e2bfc44d02905f810528d9e7" alt="Customized text body style" width="424" height="529" data-path="api-reference/sdk-libraries/doc-pages/img/text-body-customized.png" />

## Usage

The Text Body component is used by wrapping text content:

```html theme={null}
<qonto-text-body> Your text content goes here. </qonto-text-body>
```

It automatically handles line breaks and text wrapping based on its container width, making it suitable for various content lengths from short descriptions to longer paragraphs.