Headers
Headers (Section Headers) help you divide the settings page into logical sections. They are ideal for grouping related settings.
Creating a Header
Section titled “Creating a Header”- Tap + in the toolbar
- Select Header from the list
- A new header will be added
- The Smart Panel opens automatically
Content Tab
Section titled “Content Tab”In the Content tab, you edit the text and leading icon of the header.
What it does: The text displayed as the header.
How to find it: Content > Title
Usage: Tap on the text field and enter your text. For multilingual apps, you can enter different text for each language.
Leading Icon (Left Symbol)
Section titled “Leading Icon (Left Symbol)”What it does: An optional icon displayed to the left of the header.
How to find it: Content > Symbol Style (Left)
Usage:
- Tap “Select Symbol”
- Choose an icon from the gallery
- Or search for a specific icon
Options:
| Setting | Effect |
|---|---|
| No Icon | Only text is displayed |
| Choose Icon | Icon appears to the left of the text |
Trailing Icon (Right Symbol) - Advanced
Section titled “Trailing Icon (Right Symbol) - Advanced”What it does: An optional icon displayed to the right of the header.
How to find it: Content > Symbol Style (Right)
Here you can override the default behavior:
| Setting | Description |
|---|---|
| Custom Symbol (Right) | Enables manual configuration |
| Show Symbol | Whether the right symbol is visible |
| Select Symbol | Which icon is displayed |
| Icon Size | Size of the icon (12-48 px) |
| Icon Color | Color of the icon (with Dark Mode support) |
Style Tab
Section titled “Style Tab”In the Style tab, you customize the typography and layout of the header.
Dark Mode Toggle
Section titled “Dark Mode Toggle”At the top of the tab you’ll find a toggle:
- Editing Light Mode - You’re editing the light variant
- Editing Dark Mode - You’re editing the dark variant
Tap the toggle to switch between modes.
Title Typography
Section titled “Title Typography”| Setting | Default | Range | Description |
|---|---|---|---|
| Font | Theme font | Gallery | The font family used |
| Font Size | 16 pt | 10-28 pt | Size of the title text |
| Font Weight | 500 | 100-900 | Thickness of the font (Light to Black) |
| Italic | Off | On/Off | Italicization of the text |
| Letter Spacing | 0 px | -2 to 5 px | Space between letters |
| Line Height | 1.2 | 1.0-2.0 | Space between lines |
| Text Color | Theme color | Color picker | Color of the title |
Subtitle Typography
Section titled “Subtitle Typography”If your header has a subtitle, you can also customize its style:
| Setting | Default | Range | Description |
|---|---|---|---|
| Font | Theme font | Gallery | The font family used |
| Font Size | 14 pt | 8-20 pt | Size of the subtitle |
| Font Weight | 400 | 100-900 | Thickness of the font |
| Text Color | Secondary color | Color picker | Color of the subtitle |
Layout
Section titled “Layout”| Setting | Default | Range | Description |
|---|---|---|---|
| Horizontal Spacing | 16 px | 0-48 px | Spacing left and right |
| Vertical Spacing | 12 px | 0-48 px | Spacing top and bottom |
Advanced Tab
Section titled “Advanced Tab”In the Advanced tab, you can decide whether the header uses the theme default colors or custom colors.
Use Theme Settings
Section titled “Use Theme Settings”What it does: Enables or disables automatic adoption of theme colors.
Options:
| Setting | Effect |
|---|---|
| Enabled | Header automatically uses theme colors |
| Disabled | You can define custom colors |
When disabled, additional options appear:
Light Mode Colors
Section titled “Light Mode Colors”| Setting | Description |
|---|---|
| Text Color | Color of the title text in Light Mode |
| Symbol Color | Color of the icons in Light Mode |
Dark Mode Colors
Section titled “Dark Mode Colors”| Setting | Description |
|---|---|
| Text Color (Dark) | Color of the title text in Dark Mode |
| Symbol Color (Dark) | Color of the icons in Dark Mode |
Examples
Section titled “Examples”Typical Settings Structure
Section titled “Typical Settings Structure”[Appearance Icon] Appearance - Dark Mode (Switch) - Language (Navigation)
[Bell Icon] Notifications - Push Notifications (Switch) - Email Notifications (Switch)
[Lock Icon] Privacy - Private Profile (Switch) - Account Connections (Navigation)Minimalist Header
Section titled “Minimalist Header”- Icon: None
- Font Size: 14 pt
- Font Weight: 600
- Text Color: Primary color
Prominent Header
Section titled “Prominent Header”- Icon: Matching the section
- Font Size: 18 pt
- Font Weight: 700
- Text Color: Primary color
- Trailing Icon: Chevron-Right