# Properties (Add)

Properties allows you to add a new Property or a new Group.

Properties you can add to a component include Text, Rich Text, List, Link, Image, Gallery, Video, Icon, Colour, Toggle, Number, Class, ID, Options, Conditions, Visibility, CSS Text.

## Text Property

The Text Property allows you to add a Name, Default, Placeholder, Canvas Placeholder and Type (Static or Advanced) to your Component. 

{% content-ref url="properties-add/text-property" %}
[text-property](https://docs.cwicly.com/cwicly/components/properties-add/text-property)
{% endcontent-ref %}

## Rich Text Property

The Rich Text Property allows you to add rich text to a component, such as bold, italic, underline or strikethrough.

{% content-ref url="properties-add/rich-text-property" %}
[rich-text-property](https://docs.cwicly.com/cwicly/components/properties-add/rich-text-property)
{% endcontent-ref %}

## List Property

The List Property allows you to add a list to a component.  Input required information such as Name, Default, Placeholder, Canvas Placeholder. 

{% content-ref url="properties-add/list-property" %}
[list-property](https://docs.cwicly.com/cwicly/components/properties-add/list-property)
{% endcontent-ref %}

## Link Property

{% content-ref url="properties-add/link-property" %}
[link-property](https://docs.cwicly.com/cwicly/components/properties-add/link-property)
{% endcontent-ref %}

## Image Property

The Image Property allows you to add an Image to a component, to name it, to set a Default image, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.

{% content-ref url="properties-add/image-property" %}
[image-property](https://docs.cwicly.com/cwicly/components/properties-add/image-property)
{% endcontent-ref %}

## Gallery Property

The Gallery Property allows you to add a Gallery to a component, to name it, choose the data type and adjust layout and usage.

{% content-ref url="properties-add/gallery-property" %}
[gallery-property](https://docs.cwicly.com/cwicly/components/properties-add/gallery-property)
{% endcontent-ref %}

## Video Property

The Video Property allows you to add a Video to a component, to name it, to set a Default video, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.

{% content-ref url="properties-add/video-property" %}
[video-property](https://docs.cwicly.com/cwicly/components/properties-add/video-property)
{% endcontent-ref %}

## Icon Property

The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon and choose whether or not to include it in the CSS so that you can use it in a List block.

{% content-ref url="properties-add/icon-property" %}
[icon-property](https://docs.cwicly.com/cwicly/components/properties-add/icon-property)
{% endcontent-ref %}

## Colour Property

The Colour Property allows you to configure a colour property. 

You can input a Name, decide whether it should be Responsive or not and choose a suitable Default colour.

{% content-ref url="properties-add/colour-property" %}
[colour-property](https://docs.cwicly.com/cwicly/components/properties-add/colour-property)
{% endcontent-ref %}

## Toggle Property

The Toggle Property allows you to configure a toggle state for boolean values. This means that the icon property can be shown or hidden for any property that only has two possible states (true/false).

You can input a suitable Name, and decide whether it should be shown or hidden by Default.

{% content-ref url="properties-add/toggle-property" %}
[toggle-property](https://docs.cwicly.com/cwicly/components/properties-add/toggle-property)
{% endcontent-ref %}

## Number Property

The Number Property allows you to configure a number property such as font size, padding, width etc. 

You can input a Name, decide whether it should be Responsive or not, set a Default value, and a Minimum, a Maximum or Step. 

You can also toggle "With Unit" on or off if you want to specify a unit.

{% content-ref url="properties-add/number-property" %}
[number-property](https://docs.cwicly.com/cwicly/components/properties-add/number-property)
{% endcontent-ref %}

## 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.

{% content-ref url="properties-add/class-property" %}
[class-property](https://docs.cwicly.com/cwicly/components/properties-add/class-property)
{% endcontent-ref %}

## ID Property

The ID Property gives an ID to the block if you wish to give it a specific name in order to target it more easily (for example to connect it to a modal).

By default the Block ID is indexed relative to the number of blocks on the page.

{% content-ref url="properties-add/id-property" %}
[id-property](https://docs.cwicly.com/cwicly/components/properties-add/id-property)
{% endcontent-ref %}

## Options Property

The Options Property allows you to add specific additional styles to a component other than numbers and colours. 

You can input a Name, set a default style and set options for the default as required.

{% content-ref url="properties-add/options-property" %}
[options-property](https://docs.cwicly.com/cwicly/components/properties-add/options-property)
{% endcontent-ref %}

## Conditions Property

The Conditions Property allows you to add specific additional styles to a component other than numbers and colours. 

You can input a Name and set specific conditions for a component block.

{% content-ref url="properties-add/conditions-property" %}
[conditions-property](https://docs.cwicly.com/cwicly/components/properties-add/conditions-property)
{% endcontent-ref %}

## Visibility Property

The Visibility Property allows you to Show/Hide a block and set a default state. 

{% content-ref url="properties-add/visibility-property" %}
[visibility-property](https://docs.cwicly.com/cwicly/components/properties-add/visibility-property)
{% endcontent-ref %}

## CSS Property

CSS Text accepts any valid CSS string values. 

You can add a Name, Default, and make it responsive or not as required. 

{% content-ref url="properties-add/css-text-property" %}
[css-text-property](https://docs.cwicly.com/cwicly/components/properties-add/css-text-property)
{% endcontent-ref %}