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?