# Title Element

The Title element lets you add prominent text to your screen—like a page heading or section title. This is usually the first thing your users see on the screen, so it’s important for setting the tone and guiding them through the app.

Twinr gives you two simple tabs to control everything:

* **Content Tab** – where you type your text.
* **Settings Tab** – where you style and adjust how it looks and feels.

Let’s walk through both tabs. 👇

***

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

### ✏️ Add Your Text

* Title Field: This is where you enter the main text.
* Example: This is random text

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FMtiWCXvEFmhSoAjhparC%2FScreenshot%202025-12-13%20at%205.37.36%E2%80%AFPM.png?alt=media&#x26;token=621a8fb8-7f62-4a1c-8275-c6d09553fdce" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Settings Tab" %}

### 🎨 Design Your Title

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fd6tgbBYgPfFZ2d6VYRRY%2FScreenshot%202025-12-13%20at%205.39.28%E2%80%AFPM.png?alt=media&#x26;token=9b29ed34-a78b-41e1-af9b-8d53352f18c7" alt="" width="278"><figcaption></figcaption></figure>

#### 1. Text Style

* Set **Text Style** to **Custom** for full control over size, weight, color, and font.
* You can also select from predefined styles such as **Heading**, **Body**, or **Label** to automatically apply theme-based typography.

#### 2. Font Size & Weight

* Font Size: Choose how big your title should look (e.g., 20px).
* Font Weight: Decide how thick the text appears (e.g., Bold 700).

#### 3. Color

* Pick from predefined styles like Heading or set a Custom Color using a HEX code.
* Example: #171D1B is a bold black used for headings.

#### 4. Text Alignment

* Align the text 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%2FtvIL3eYdTQYfilvFqMBP%2FScreenshot%202025-12-13%20at%205.40.50%E2%80%AFPM.png?alt=media&#x26;token=c1570dfb-587f-4e3d-879b-293e43361b49" alt="" width="279"><figcaption></figcaption></figure>

You can also add space (padding) around the title:

* Top / Bottom / Left / Right margins can be adjusted using sliders.
* Use the 🔗 icon to link margins for symmetry.
* Default spacing is 20px on all sides.

***

## 👁️ Visibility Settings

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FpOnfoVjmHt7rfIsfI8VB%2FScreenshot%202025-12-13%20at%205.42.03%E2%80%AFPM.png?alt=media&#x26;token=abe205fc-573e-4855-a02e-ab2075275500" alt="" width="280"><figcaption></figcaption></figure>

The Visibility section helps you control who can see the element and where it appears. This gives you flexibility to show different content to different users or on specific devices.

You can adjust visibility based on:

#### 1. Platform

Choose which platform the element should be visible on:

* All (default)
* Android
* iOS

#### 2. Device

Control which device types will display this element:

* All (default)
* Mobile
* Tablet & iPad

#### 3. User

Target visibility by user type:

* All (default)
* Guest Users (not logged in)
* Logged-in Users<br>
  {% endtab %}
  {% endtabs %}

### 📌 Use Case Example:

Want to show a “Welcome Back!” title only to users who are signed in?

Set User to Logged-in Users.

***

### 📱 How It Looks

As you update the content and settings, the preview in the center shows exactly how your app will look to users. No guesswork needed!

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FFrrPmT9Q8hUzCQxjNYCz%2FScreenshot%202025-12-13%20at%205.44.19%E2%80%AFPM.png?alt=media&#x26;token=15db25cd-858e-408e-82ce-ae99cdfd20be" alt=""><figcaption></figcaption></figure>

***

## <mark style="color:green;">🔍 Summary</mark>

| Section      | What You Can Do                                                 |
| ------------ | --------------------------------------------------------------- |
| Content Tab  | Type your title text                                            |
| Settings Tab | Customize font, color, alignment, and spacing                   |
| Live Preview | Instantly see changes on your app screen or look at preview app |