How to use Rich text elements with CMS

The Rich Text element is a specialized element used to import and display rich text content from the headless CMS.

Rich text elements only work as part of a CMS List or CMS Item as they need a source.

Adding Rich text elements
Styling Rich text elements
Styling specific elements inside Rich text elements

Adding Rich text elements

To add a Rich text element to your project:

Go to the Left panel -> Elements -> CMS section
Drag the Rich text element to the Success layer of your set up CMS element
Select the rich text element
Go to the Right panel -> Richtext content section
Click on the Bind dynamic property icon
From the Dynamic properties panel select the source you want to import from

Styling Rich text elements

The only way to style rich text elements imported from the CMS is by using CSS classes.

To add a CSS class to your rich text element:

Go to the Right panel -> Classes section
Click the + icon and give the class a name (ex: richtextelement)
Go to the Left panel -> CSS Classes tab
Select the class you previously created
Style it using CSS properties

Styling specific elements inside Rich text elements

To target specific elements inside of the rich text element (ex: image, paragraph, heading 1):

Go to Left panel -> CSS Classes tab
Right click the rich text class you previously created
Go to Add CSS combinator and select one of the options (ex: child combinator)
In the newly opened panel add the type of element you want to target (ex: img, p, h1, etc.)
Style the combinator class using CSS properties

Updated on: 27/03/2024