# Element Tokens

Each element can export HTML, CSS and JavaScript. 

You can modify the output a variety of ways. When you use the template fields you have the opportunity to access the names and values of the selected element and add those values on export. 

{% hint style="info" %}
These tokens are not supported in the Artboard. The artboard supports a few separate tokens. 

[Artboard Stylesheet Template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/stylesheet-template)\
[Artboard Script Template](https://velara-3.gitbook.io/web-export/element-options/script-template)\
[Artboard Page Template](https://velara-3.gitbook.io/web-export/export-artboard-dialog/page-template)
{% endhint %}

#### Tokens

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MbuDJsZK1k1S1dCw2Ei%2F-MbuESo9xgQCPEaSF-eK%2Fimage.png?alt=media\&token=ca027e15-eedf-45c3-9e83-f23d87b86426)

#### Example Usage

```
{SELECTOR} {
    --selector: {SELECTOR};
    --selector2: {SELECTOR2};
    --pixel-width: {PIXEL_WIDTH};
    --pixel-height: {PIXEL_HEIGHT};
    --percent-width: {PERCENT_WIDTH};
    --percent-height: {PERCENT_HEIGHT};
    --width: {WIDTH};
    --height: {HEIGHT};
    --top: {TOP};
    --left: {LEFT};
    --right: {RIGHT};
    --bottom: {BOTTOM};
    --rotation: {ROTATION};
    --transform: {TRANSFORM};
    --fillColor: {FILL_COLOR};
    --stroke: {STROKE};
    --strokeColor: {STROKE_COLOR};
    --strokeWidth: {STROKE_WIDTH};
    --strokeStyle: {STROKE_STYLE};
}
```

#### Element Templates

* [CSS Template ](https://velara-3.gitbook.io/web-export/element-options/css-template)
* [HTML Template](https://velara-3.gitbook.io/web-export/element-options/html-template)
* [JavaScript Template](https://velara-3.gitbook.io/web-export/element-options/script-template)