# Setting List Element

The Settings List is a ready-to-use component for creating profile and settings screens. It organizes items into structured sections, each with customizable icons, titles, and links — just like a real app settings page.

***

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

## <mark style="color:green;">Add Sections & Items</mark>

You’ll start by creating sections. Each section contains multiple items.

#### ➕ Add Section

* Section Title – Like a header (e.g., “My Information”)
* Add Section Items – Each section can include rows like “Profile”, “My Orders”, “Help & Support”

#### ➕ Add Section Item Fields

Each item includes:

* Title – e.g., “Rewards”
* Subtitle – Optional small text under the title
* Icon – Upload a PNG/JPG icon
* Click Action – Set a URL or screen link (e.g., twinr://profile)
* Visibility – Guest, Logged-in, or All
  {% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Customize Appearance</mark>

### 🎨 Section Design

* Background Color – Set background (solid or semi-transparent)
* Corner Radius – Adjust section shape
* Spacing Between Items – Customize vertical padding

### 🏷 Section Title

* Text Style (e.g., Heading Small)
* Color
* Title Position:
  * Over the Section
  * Under the Section

### 🧱 Section Items

**Icon Size**

* Adjust height and width of the icons

**Title & Subtitle**

* Customize text style and color

#### Arrow

Used to show a navigation arrow at the end of each item (like “>” in native iOS/Android).

* Upload Icon – PNG/JPG only
* Height / Width – Adjust size to match row height

#### Section Item Divider

Adds a line between each row.

* Height – Thickness of the divider (e.g., 0.25px)
* Color – Match with app theme or tone

### 📏 Margin

Add spacing around the divider:

* Adjust Top, Bottom, Left, and Right margins
* Use linked controls (🔗) to keep spacing consistent

### 👁️ Visibility

Available for the entire settings list block:

* Platform: Android, iOS, PWA
* Device: Mobile / Tablet
* User: Guest / Logged-in
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">✅ Use Case Examples</mark>

| My Information  | Profile, My Orders, Rewards |
| --------------- | --------------------------- |
| Support & Legal | FAQ, Terms, Contact Us      |

***

## 📱 <mark style="color:green;">Result</mark>

A polished native-like settings screen with:

* Grouped sections
* Icons + labels
* Optional arrows
* Clean dividers

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FavawLkVtLjz2GhwMUMH0%2FScreenshot%202025-05-22%20at%2010.06.24%E2%80%AFPM.png?alt=media&#x26;token=2eefea5d-d1f5-4e07-882f-b9e86e931f03" alt="" width="309"><figcaption></figcaption></figure>