Add and style text and lists in the Flow Builder

Add titles, paragraphs, or lists with a single click, style them to match your brand, and use dynamic variables to personalize content for each user.

Set up text styles

The Styles panel includes pre-configured text styles: H1, H2, H3, Button Label, Body, Caption, and Small Label. Click any style to edit its font family, weight, size, alignment, decoration, and other properties.

When you add a text element, you can choose from one of the styles you set up here.

Changes to a style apply to all text elements using it, across all screens.

To create a new style:

  1. Click Palette to open the Styles panel.
  2. On the Text tab, click Create style.
New text style
  1. Enter a name and configure the typography:
  • Font family: Choose a typeface. For details on working with custom fonts, see the guide.
  • Weight and size: Set the font weight and size.
  • Color: Set the text color.
  • Line height: Set the spacing between lines, or leave it on Auto.
  • Alignment: Set horizontal (left, center, right) and vertical (top, middle, bottom) alignment.
  • Decoration: Apply underline or strikethrough.
  • Truncate: Limits the number of lines displayed. Text beyond that limit is truncated. Useful when content length varies due to dynamic variables or localization.
  1. Click Create.

SF Pro isn’t available for cross-platform use. We recommend Inter as a close alternative.

Text style configuration options

Add text

To add a text element:

  1. Click + at the top left. Select Text. Choose from one of the text styles that were pre-configured or set by you.
New text
  1. Click the new element and edit its content in the Content section in the Design panel on the right.
  2. If needed, adjust the typography in the Design panel. Or, select the text in the preview to open a tooltip for quick style customization.
  3. Optionally, in the Design and Interaction panels, you can also apply any other configurations available for components in the flow. For more details, see Styling elements.

If you need to use the same text element on multiple screens, copy and paste it: select the element, press Ctrl+C (or ⌘+C on Mac), navigate to another screen, and press Ctrl+V (or ⌘+V on Mac) to paste.

Text element settings

Change styling for parts of text

To only change the style for some parts of a text element:

  1. Select a part of a text element in the Content section.
  2. In the tooltip that appears, change the text color, apply bold, underline, italic, or strikethrough formatting, or add a URL.

The preview updates immediately.

Edit text part

Flows support two ways to turn text into clickable links. Pick based on what role the text plays:

  • Inline link — for a URL inside flowing copy, like a “Learn more” reference embedded in a paragraph. Always opens in the in-app browser.
  • an Open URL action — for standalone tap targets, like a Terms of Service button. Can open in either the in-app or external browser.

To turn part of a text element into a link:

  1. Select the text in the Content section.
  2. In the formatting tooltip, click the link icon.
  3. Paste the destination URL into the pop up.
Formatting tooltip with the link button highlighted

Open URL action

Main article: Actions

To turn an entire button into a link:

  1. Add a Button — or use the Links preset, a ready-made row with Restore / Terms of Service / Privacy Policy buttons.

    The Links preset on canvas with Terms of use, Restore, and Privacy policy buttons

  2. Select the button in the Layers panel and open the Interactions tab in the right panel.

    Terms of Use button selected in the Layers panel, with the nested text element visible but unselected

  3. Set the destination for the Open URL action.

    An empty Open URL action blocks previewing and publishing.

    Open URL action configuration in the Interactions panel

Add conditional text

Conditional text changes what a text element displays based on a condition. For example, a heading can show one message when a user selects the annual plan and a different message for the monthly plan. Conditional text works like conditional visibility, but it swaps the content instead of showing or hiding the element.

To set up conditional text:

  1. Select a text element on the canvas.
  2. In the Design panel, in the Content section, select Conditional.
Content set to Conditional in the Design panel
  1. Build the if condition. Choose a property from the Custom, Products, or Elements tab, set the operator, and enter the value to match. For details on the property types, see Conditional visibility.
  2. Under then, enter the text to display when the condition is true. Rich text formatting works the same way as for regular text. To insert a variable, click { } Add variable.
  3. Under else, enter the fallback text to display when no condition matches.
  4. (Optional) Click + Add else/if to add more conditions, each with its own text.

To edit conditional text for another language, switch the active locale at the bottom of the editor. Add languages in the Localizations panel first — see Add locale in Flow Builder.

Setting up conditional text with if, then, and else branches

Add lists

List elements are containers made up of individual item components. For simple bullet or numbered lists within flowing text, use a text element and apply the desired formatting via the Design panel.

  1. Click + at the top left. Select List and choose one of the list templates.

  2. Go to the Design panel on the right to edit list items or upload an image as an item marker.

Add list element