# 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="/files/lPhCIiEeafTSdj34ymOx" 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="/files/cwUpiuPAc7fcFqSat5vs" 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="/files/6tzj2G6u6xoLGLlcoSIS" alt=""><figcaption></figcaption></figure>

* Select "Class" in the dropdown.

<figure><img src="/files/rGTdmlcAgB9NObvz9hni" 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="/files/vgdkIsLC2wzCTC9GkDCv" 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="/files/65bk3TYKDD1Rjj2bx1Zp" alt=""><figcaption></figcaption></figure>

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

{% content-ref url="/pages/upN2xryqdW2pahdOruNW" %}
[Global/Block Classes](/cwicly/classes-and-ids/global-block-classes.md)
{% endcontent-ref %}

<figure><img src="/files/wb2k36kCiIQI7lTkINVC" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/brxVhHtXud3Ht5O1AznI" 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="/files/nsFCXXUTpEkaqbmtjJBU" 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="/files/I2yGL66U3MGqSJoDBsNw" alt=""><figcaption></figcaption></figure>

The label will now be visible in the Block Inpsector.

<figure><img src="/files/k5BL4YmppgagDzUvUaAN" 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="/files/KHxeuA0SnJbse9re3MTz" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/t0u0oT5ftMg52KPp3tnT" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/UNnPq1ao98EVmUNeEjV4" alt=""><figcaption></figcaption></figure>

The Default class will now appear on the Canvas.

<figure><img src="/files/lfDVvikXZCvAbqcNqQkj" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/cwicly/components/properties-add/class-property.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.