# Class Property

The Class Property allows you to configure a single (or multiple) class property(ies).

You can input a Name and decide whether a Class should be added to the selected component by default or not.

* Open the Components Properties modal by clicking the "+" icon in the block inspector.
* Select the Class Property you wish to configure.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F2GmNrezgjTGDuDGOYaiM%2FScreenshot%202023-09-29%20at%2011.42.37.png?alt=media&#x26;token=b63a19fd-9fc2-412b-a927-759a916f6220" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

The Class Property needs to be connected for it to be applied to the canvas.&#x20;

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the Class Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FcM6xEnphg0L09K9l0lyF%2FScreenshot%202023-09-29%20at%2011.51.34.png?alt=media&#x26;token=c5c66c29-3cab-41c9-9325-ff2b7c093f1e" alt=""><figcaption></figcaption></figure>

* In the Navigator, select the required block to which you wish to add a Class property.
* Under Class in the Block Inspector, click the "Connect Component Property" icon.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FpZHAeOiKjQuSXuCLZkWE%2FScreenshot%202023-09-29%20at%2011.54.04.png?alt=media&#x26;token=5303dbf6-1e73-4000-ba6f-b924ebadb41e" alt=""><figcaption></figcaption></figure>

* Select "Class" in the dropdown.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F1Af63zia2iSwN9bjPYY2%2FScreenshot%202023-09-29%20at%2011.56.51.png?alt=media&#x26;token=835bb7ee-e085-440a-9c46-c274657d6800" alt=""><figcaption></figcaption></figure>

The Class property now appears in green in the Block Inspector to indicate that it is connected.

* If you wish to modify the Class Property, click the Class button to open the Components Properties modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FRP2B7J9zKdsYlAXSWgo9%2FScreenshot%202023-09-29%20at%2012.03.41.png?alt=media&#x26;token=688e1742-8fc2-4065-8230-f9a56c8d203d" alt=""><figcaption></figcaption></figure>

## Customise

To customise the Class property, make sure Customise is selected in the tool bar.

* With the Component selected, in the Block Inspector, click the "+" icon to add a class.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F9RMnX6PZsqMdlyHMxyNl%2FScreenshot%202023-09-29%20at%2012.04.50.png?alt=media&#x26;token=2abf6b65-cc2a-4bf5-b43a-2763074b8db1" alt=""><figcaption></figcaption></figure>

This will open the Classes modal where you can Create a class or select an existing one.

{% content-ref url="../../classes-and-ids/global-block-classes" %}
[global-block-classes](https://docs.cwicly.com/cwicly/classes-and-ids/global-block-classes)
{% endcontent-ref %}

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FOdM6AXmr4UIILmvwPIwR%2FScreenshot%202023-09-29%20at%2012.06.33%202.png?alt=media&#x26;token=f8056a9d-ddb7-415f-bbe5-ed990c2ac979" alt=""><figcaption></figcaption></figure>

The added Class will appear in green in the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FgWWhNsyXzXXcHf1RdIKN%2FScreenshot%202023-09-29%20at%2012.09.48.png?alt=media&#x26;token=2b7cb397-1cbe-480f-a90d-f45c8388d36d" alt=""><figcaption></figcaption></figure>

## Remove Added Class

Use this property to remove a class that has been added to a component.

* In the Block Inspector, hover over the class to be removed.
* Click the red "X" icon to delet the added class.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FcXN4vTQbk4PAeQ17C91D%2FScreenshot%202023-09-30%20at%2010.46.55.png?alt=media&#x26;token=3f2f58ac-0716-4e5e-93f3-9a04a3e03ebc" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected Class property.

* Open the Component Properties modal.
* Select required Class property.
* Input suitable label name to Name field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FhSnB2ooztz1kTgzDxqeC%2FScreenshot%202023-09-30%20at%2010.06.17.png?alt=media&#x26;token=624d0816-ef3a-4b22-a212-c7fc45ea3dcd" alt=""><figcaption></figcaption></figure>

The label will now be visible in the Block Inpsector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FEFyq4k2hCBduPllJM6BZ%2FScreenshot%202023-09-30%20at%2010.09.13.png?alt=media&#x26;token=f9fdec80-470c-4fba-a44e-bc451eba73b4" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set a default class to your component.

* Open the Components Properties by clicking the "+" icon.
* Select required Class property.
* Open Settings tab.
* Click "+" sign next to Default to open the Classes modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FUdeCYtl77b38joI7z628%2FScreenshot%202023-09-30%20at%2010.10.54.png?alt=media&#x26;token=0cc78a36-29d6-41be-a80f-bf51f3187b7e" alt=""><figcaption></figcaption></figure>

* Create a class or select an existing one as a default class.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FC4z1gKURfGgQuMqIwds9%2FScreenshot%202023-09-30%20at%2010.12.03.png?alt=media&#x26;token=9ef4d546-18ef-4c75-9c13-3baea6152515" alt=""><figcaption></figcaption></figure>

The required Default class will now be visible in the Component Properties modal under Default.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FYTvTIbpwWvYQjG1802ND%2FScreenshot%202023-09-30%20at%2010.14.11.png?alt=media&#x26;token=03ab8979-5c2d-4377-a13d-a4f1d4d97932" alt=""><figcaption></figcaption></figure>

The Default class will now appear on the Canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F4ftHluJeAS5Kq6vgkQiq%2FScreenshot%202023-09-30%20at%2010.15.12.png?alt=media&#x26;token=ca5e8dc4-1a4d-424b-87b6-863e38302d8a" alt=""><figcaption></figcaption></figure>
