# Paragraph Element

The Paragraph element is perfect for adding supporting text under titles or anywhere on your app screen. Think of it like a regular text block, good for descriptions, instructions, or extra info.

Like the Title element, it also has two main tabs:

* **Content Tab** – where you write your paragraph.
* **Settings Tab** – where you style and space it.

***

{% tabs %}
{% tab title="Custom Tab" %}

### ✏️ Write Your Paragraph

* Type your paragraph inside the box.
* You can enter as much text as you need.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F7omPfl29qCcnsabikypW%2FScreenshot%202025-12-18%20at%2012.38.05%E2%80%AFPM.png?alt=media&#x26;token=d4b0a8c6-f774-4dbb-91ea-bca1b2d45eb0" alt="" width="404"><figcaption></figcaption></figure>

📌 Pro Tip: Keep paragraphs short and break them into sections for readability. Long blocks of text can be hard to read on mobile.
{% endtab %}

{% tab title="Settings Tab" %}

### 🎨 Style Your Paragraph

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FcLvLKV0kPYgl8NWao5m0%2FScreenshot%202025-12-18%20at%2012.54.25%E2%80%AFPM.png?alt=media&#x26;token=ee096836-a737-41af-80d0-bd408ed81a96" alt="" width="262"><figcaption></figcaption></figure>

#### 1. Text Style

Choose how the text styling is applied.

* **Predefined Styles**: Select from styles like *Body Small, Body Medium, Heading*, etc., to automatically apply preset font size and weight.
* **Custom**: Select **Custom** to manually control font size, weight, color, alignment, and font style.

> Selecting **Custom** unlocks advanced typography controls.

#### 2. Font Size & Weight

* Font Size: Choose the size (e.g., 10px is standard).
* Font Weight: You can make it light, regular, or bold.

#### 3. Color & Opacity

* Use a HEX code or select from your brand palette.
* You can also set opacity (transparency) — 100% is fully visible, 50% is half-transparent.

#### 4. Text Alignment

* Align your paragraph to Left, Center, or Right

***

### 📏 Margin Settings

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FFRcUwkweMwSqtkXkfGje%2FScreenshot%202025-12-18%20at%2012.55.37%E2%80%AFPM.png?alt=media&#x26;token=3c655de5-7b8c-42f3-9174-fea6fc5ada77" alt="" width="262"><figcaption></figcaption></figure>

Adjust the spacing around the paragraph using sliders:

* Top, Bottom, Left, Right – each margin can be changed individually.
* Use 🔗 to sync spacing on top & bottom or left & right.

***

### 👁️ Visibility Settings

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2For9E7Lzv3P5XmAA2HBsH%2FScreenshot%202025-12-18%20at%2012.56.48%E2%80%AFPM.png?alt=media&#x26;token=8a38da16-421d-482d-a03f-af2809fe5bf5" alt="" width="269"><figcaption></figcaption></figure>

Just like the Title element, you can decide where and to whom this paragraph is shown:

* Platform: Show it on Android, iOS, or all.
* Device: Target mobile or tablet users.
* User: Set visibility for All, Guest, or Logged-in users.
  {% endtab %}
  {% endtabs %}

***

## 📱 How It Looks

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F5R5J3GZTENp4ln89KtZR%2FScreenshot%202025-12-18%20at%201.00.17%E2%80%AFPM.png?alt=media&#x26;token=4f6c9171-60e6-4e25-876b-925a80549526" alt=""><figcaption></figcaption></figure>

## <mark style="color:$info;background-color:$info;">✅</mark> <mark style="color:green;background-color:$info;">Summary</mark>

| Tab          | What You Can Do                                   |
| ------------ | ------------------------------------------------- |
| Content      | Type your paragraph text                          |
| Settings     | Adjust font, color, opacity, spacing, alignment   |
| Visibility   | Choose platform, device type, and user role       |
| Live Preview | Instantly view how your text looks inside the app |