Using Text Styles

Applying and creating styles

By default, all text is unstyled. To apply a style, select a text element or specific text and click Text → Styles in the properties panel. You can remove styling by clicking the × in the property panel.

Adding breakpoints

Text style breakpoints let you adjust the appearance of your text styles for different device sizes. To add breakpoints to your text style, click on any text style, and an "Edit Style" modal will appear. In the "Breakpoints" section at the bottom, click on the "Add Breakpoint" button. This will add three default breakpoints: Desktop (L), Tablet (M), and Mobile (S). You can then customize the font size, line height, letter spacing, and space between paragraphs for each breakpoint.

Managing styles

Manage project styles in the left panel under Assets → Styles. Create as many styles as needed.

Style rich text

You can use Markdown to apply multiple styles to a text element. To modify any of the existing styles, select the specific text you want to change and set the desired style.

CMS text styles

Styles for text elements from the CMS work similarly to the workflow above. The property panel displays all the available styles for your text element.

Link styles

Link styles can be accessed in the Link pop-out. To apply a link style, select a text layer, go to the Link row, and modify the "Style" property. Link styles offer a range of options and vary in states (hover, active, and current).

Override colors

Sometimes, you may want to apply a text style but make an exception for a specific phrase to emphasize it. Instead of creating a new style, you can directly override the color for the selected text within your existing style using the properties panel.