Component Style Options
Component style options allow you to easily apply styles to custom components for each instance. Within a component, you can add style options by accessing the style tab in the right panel.
Example usage:
a card component with a simple background style option.
For example, I added a section with “Card Styles” label and added a background style setting inside it:
The details of the background style setting are visible in the screenshot below.
| Setting | Description |
|---|---|
| Label | The name of the style setting. |
| Selector | This allows you to select any class within the component. |
| State | Pertains to pseudo-states like hover, focus, etc. In this case, ‘none’ is selected. |
| Controller | This section contains all style options such as typography, background, etc. |
and finally, I added the component to another page. As you can see in the screenshot below, the card styles section appears in the right panel.
