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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/native-screen/paragraph-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.