How to use text styles
Styles are reusable visual properties for text, such as font, size, and color. They enable centralized management of the appearance of text across different pages on your site.
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.
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.
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 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).
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.