Component Properties
Component Properties are the settings and parameters that determine a component’s appearance and behavior. For example, a button component might have properties like color and text. These properties are crucial in web design to make components flexible and reusable. You can customize each component for different situations or pages using these properties.
For instance, when you create a card component, instead of creating separate components for each card, you can adjust these details for each card’s specific situation using component properties.
Property Types
| Property Type | Description |
|---|---|
| Text | Allows input of textual data. |
| Number | Accepts numerical values. |
| Boolean | Enables a true or false selection. |
| Image | For uploading or selecting an image. |
| Select | Provides a dropdown menu with predefined options. |
| Number Unit | Accepts numbers with specific units (e.g., px, em, %). |
Let’s create a card component with properties
Open the explorer panel by clicking on the explorer icon 
on the left bar.
Create a new component. Design it as a Card.
To create properties, go to the ‘Settings and Properties‘ section in the right panel.
Find the ‘Component Properties‘ section and click the plus icon 
to add a new property.
Create a settings section, for instance, name it ‘Card Information‘.
Add two text-type properties named ‘title‘ and ‘description‘ to this section.
Link the properties you created to the title and description elements. Select these elements, and in the text section, choose the relevant component properties from the dynamic data option to complete the connection.
It is connected to the description property, as you can see in the screenshot below.
Return to the front page template and add the component to the page.
After adding the component, you will see the title and description fields in the ‘Settings‘ tab under the ‘Card Information‘ section in the right panel. You can edit these fields as desired.
Note: component properties can be used in class and element conditions, paving the way for variant components. You can add a property to a card component and style it according to these conditions.
Section and Repeating section
In component properties, a section is used for grouping properties. A repeating section, however, works differently. When you add a repeating section and, for instance, a text property inside it, it acts as a series, allowing multiple text properties.
An example usage of repeating section:
Add a repeating section from the component properties.
Add ‘title‘ and ‘description‘ properties of both text and one image type inside it. It should look like the following screenshot:
The repeating section will return an array series. Since it’s a multi-item, you need to use a loop element to process and repeat the item.
By adding a loop element and selecting the repeating section as its source, you can insert the card element into the loop.
Having previously linked the title and description and image properties, you can now test it.
As seen in the screenshot below, you can add multiple cards, and they will repeat.
These features are particularly useful for creating advanced component sets.