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.


Content Tab – Add Sections & Items

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


Settings Tab – Customize Appearance

🎨 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


βœ… Use Case Examples

My Information

Profile, My Orders, Rewards

Support & Legal

FAQ, Terms, Contact Us


πŸ“± Result

A polished native-like settings screen with:

  • Grouped sections

  • Icons + labels

  • Optional arrows

  • Clean dividers

Last updated

Was this helpful?