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?
