> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/paragraph-element.md).

# 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="/files/ZxY0iKo9jfRTL3vSXXD5" 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="/files/VK4nh6rjJNcZB5ql2Mrk" 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="/files/Z1JOZWf6Xn5mgO4SOs3y" 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="/files/BaWYau7IuozRDvisu6D0" 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="/files/rXHSg5nMJV6uYEGnQWWy" 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 |