Last updated: March 2026 Category: Designing Your App
Overview
The Heading and Text components let you add written content to your app's home screen. Use Headings for bold section titles and announcements, and Text blocks for longer descriptions, instructions, or storytelling. Both components offer full control over typography and appearance.
How to Use
Adding a Heading
Drag the Heading component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
In the Content tab, enter your heading text.
[Screenshot: Heading component selected with the Content tab showing a text input field]
Configuring the Heading
In the Inspector Panel, customize the appearance:
Font size — Choose a size that matches the heading's importance. Use larger sizes for primary headings and smaller sizes for sub-headings.
Font weight — Select bold, semi-bold, or regular weight.
Text color — Pick a color using the color picker or enter a hex value.
Text alignment — Align left, center, or right.
Background color — Optionally set a background color behind the heading for visual emphasis.
[Screenshot: Inspector Panel showing font size, color picker, and alignment options for a Heading]
Adding a Text Block
Drag the Text component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
In the Content tab, enter or paste your text.
Configuring the Text Block
The Text component includes a rich text editor with formatting options:
Bold, italic, underline — Apply standard text formatting.
Font size — Set the body text size.
Text color — Choose a color for the text.
Text alignment — Align left, center, right, or justify.
Background color — Add a background color behind the text block.
Line height — Adjust the spacing between lines for readability.
[Screenshot: Rich text editor in the Content tab with formatting toolbar visible]
Layout Options
Both components share common layout settings:
Padding — Add inner spacing around the text content.
Margin — Add outer spacing to separate the component from neighboring components.
Max width — Optionally constrain the text width for better readability on larger screens.
Tips
Use Headings to break your home screen into clear sections (e.g., "New Arrivals," "Shop by Category," "Why Choose Us").
Keep heading text short and punchy — one line is ideal for mobile screens.
For Text blocks, aim for 2–3 short sentences. Mobile customers scan rather than read long paragraphs.
Pair a Heading with a Products or Banners component directly below it to create well-labeled sections.
Choose text colors that contrast well with the background to ensure readability. Dark text on a light background (or vice versa) works best.
Use the background color option on a Heading to create a full-width colored banner effect without needing an image.
Related Articles