Text
Add headlines, body copy, prices and links with the Text component, and style the font, size, color and alignment.
Use Text for every word on the screen that is not inside an image: headlines, descriptions, button labels, prices, legal lines. The words are stored per language, so the same layer shows in each language you add.
Add it
- Drag Text from Basics onto the phone.
- Or hover a layer in Layers, click +, then Basics, then Text.
To edit the words, select the layer and type in Content in the design panel. There is no editing in place on the canvas.
A new text reads New Text, in the default language. It has the Default (system font), weight Regular, size 14, centered, in black, with a Width of Fill and a Height of Fit content.
Where it can go
Almost anywhere that holds children: stacks, the header and footer, and inside buttons, plan cards, answers and tab buttons. A text cannot hold children itself. See Where components can go.
Design panel
Shared controls are described in Shared controls.
Content
| Control | What it does |
|---|---|
| Text box (Enter text...) | The words, in the language chosen in Preview language. If a language has no text yet, the box shows the default language's text. |
| Insert Variable (the braces button) | Opens a searchable list. Pick a variable and it is inserted at the cursor. |
The variable list has Search variables... at the top. Custom Variables lists the ones you created, inserted as {{ custom.name }}. The built-in groups are Price & Currency, Billing Period, Trial / Intro Offer and Discount & Product, such as {{ product.price }}. Each row shows an example value. The values on the canvas are examples. Your site supplies the real ones. See Variables.
You can format text with a little markdown:
| Write | You get |
|---|---|
**bold** | Bold |
*italic* | Italic |
~struck~ | Strikethrough |
`code` | Monospace |
[label](https://example.com) | A link. Only http, https, mailto, tel and relative links work. |
| A backslash at the end of a line | A line break |
Everything else is shown as typed, including angle brackets.
Typography
| Control | What it does | Default |
|---|---|---|
| Font | Default (system font), or a family from Sans serif, Serif, Display or Rounded. Picking a family loads it for the screen. | Default (system font) |
| Weight | The weights that the chosen font has. For the system font: Extra light, Thin, Light, Regular, Medium, Semibold, Bold, Extra bold, Black (100 to 900). | Regular |
| Size | A menu of preset sizes from 13 to 32 pixels, or Custom with a box for any whole number of pixels from 1. | 14 |
| Alignment | Leading, Center or Trailing, as icon buttons. | Center |
See Typography and fonts for how fonts are loaded and what to do if a weight looks wrong.
Size and spacing
| Section | Control | Default |
|---|---|---|
| Size | Width, Height (Fill, Fit content, Fixed, Relative) | Fill, Fit content |
| Spacing | Padding, Margin | 0 |
Color
| Control | What it does | Default |
|---|---|---|
| Text Color | A solid color or gradient, with light and dark values. | Black |
| Contrast message | Measures the text against what is behind it, in the mode you preview. It reads, for example, 4.6:1 Easy to read, or Hard to read. Aim for 4.5:1 or more. It needs 4.5:1, or 3:1 for large text. | |
| Background Color | An optional color behind the text only. Click + to add. | Off |
The contrast check is a warning. It never blocks publishing. If the text or what is behind it is a gradient or an image, the panel says Contrast can't be measured here.
States
- Inside a package, tab button or answer the panel has Default and When selected tabs. Everything above can differ per state. In When selected, the text starts as a copy of Default. When you type the first character, the layer gets its own selected text, so you can say Selected while the normal text says Select.
- A text has no disabled state.
Dark mode and screen sizes
- The default text color has only a light value. In dark mode it is still black, which is unreadable on a dark background. Switch to dark mode and use Add dark color on Text Color, or link it to a brand color that has a dark value.
- Text wraps to the width of its parent. With Width at Fill it wraps to the parent, and with Fit content it grows with the text until it reaches the edge.
- Long words in other languages can be much longer than English. Check each language in Preview language.
Tips and common mistakes
- Keep body text at 14 pixels or more, and use the contrast message as a guide.
- Put prices in variables such as
{{ product.price }}so they always match what your site charges. Do not type a price by hand. - A text with no content in the default language blocks publishing. The message names the layer, so rename texts you add (for example "Price") to find them quickly.
- To make two lines look different, use two texts, not one with mixed formatting.
- Use Fixed widths sparingly. They do not adapt to narrow phones or longer translations.
In the JSON
The component type is text. It stores a reference, text_lid, to the words in each language, plus font_name, font_weight, font_size, color, horizontal_alignment, size, padding and margin.