> For the complete documentation index, see [llms.txt](https://skincms.360creators.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skincms.360creators.com/skin-cms/skin-cms-mappings/attributes/supported-attributes.md).

# Supported attributes

You can find a list of supported attributes for each component in the compatibility table:

{% embed url="<https://airtable.com/appE2sbWGfhZtZngQ/tblaLqmwKJ8x5duj6/viwfVdiPawGOTmEfs?blocks=hide>" %}

## Usage

Apart from the exceptions below, just use a simple text value. For example:

* fontSize: #306230
* fontFamily: Courier New
* width: 100
* verticalAlign: middle

<figure><img src="https://1255537287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAIpTye4Y11o6Vmz9cFLj%2Fuploads%2FL8q8fMQghaF4U9c0BV72%2FScreenshot%202023-08-07%20at%206.17.29%20PM.png?alt=media&amp;token=c4c0931f-1755-448a-b0db-8df23325f65b" alt=""><figcaption></figcaption></figure>

### General rule of thumb

In general, attributes can have values that you can set them in 3DVista. So for example, the Label's horizontal alignment in 3DVista can be set to `left`, `center` or `right`:

<figure><img src="https://1255537287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAIpTye4Y11o6Vmz9cFLj%2Fuploads%2FQwOBeEp58N3ltFRse0Rn%2FScreenshot%202023-08-07%20at%206.25.53%20PM.png?alt=media&amp;token=9c4aa61a-a244-4128-901c-53665d53a21f" alt=""><figcaption></figcaption></figure>

These are essentially CSS properties, in this case it's the property:

`text-align` (<https://developer.mozilla.org/en-US/docs/Web/CSS/text-align>)

<figure><img src="https://1255537287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAIpTye4Y11o6Vmz9cFLj%2Fuploads%2FovQ1iowGVKSgd4ODBedE%2FScreenshot%202023-08-07%20at%206.28.25%20PM.png?alt=media&amp;token=52d7fafe-9b89-4fe3-b8c1-4b75d5ed9e19" alt=""><figcaption></figcaption></figure>

Please, use the appropriate CSS values when working with attributes.

## Special attribute usage

### **backgroundColor**

### **rollOverBackgroundColor**

### **pressedBackgroundColor**

* need to have the following format in Airtable: `["HEX_COLOR"]`
  * for example: `["#009a00"]`
* make sure that you set the component's background opacity to 1 (or however you want) in 3DVista otherwise the background could remain transparent (which is the default):

![](https://1255537287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAIpTye4Y11o6Vmz9cFLj%2Fuploads%2FReyvM0oxxFtqft1RH3dZ%2FScreenshot%202023-08-07%20at%206.11.43%20PM.png?alt=media\&token=edfec730-4f69-4bef-94a9-74b94bf60242)

* if you want to achieve a gradient effect, you can add more colors like this:
  * `["#009a00", "#ff0000"]`

If you encounter any issues while mapping attributes, please do not hesitate to contact us and we will update the documentation.

### visible

* indicates whether the component is shown or hidden
* accepts 2 values:
  * `true` - component is shown (visible)
  * `false` - component is hidden (invisible)

**Usage tip:** You can use this attribute when your dataset has some inconsistencies, for example Product A does have a secondary picture but Product B doesn't. You can create a formula field `Product Secondary picture visibility` and use its computed value to show/hide the 3D Vista secondary picture component.