# Options helpers

When rendering attributes, the following parameters will be replaced with the saved value.

#### `{{ELEMENT}}`

{{ELEMENT}} will register the style options for the wrapper

For example, when adding css\_style, {{ELEMENT}} will be replaced by the generated ID :

```
$options->add_option(
            'title_border_color',
            [
                'type'      => 'colorpicker',
                'width'     => 50,
                'title'     => __( 'Title border color', 'zionbuilder' ),
                'css_style' => [
                    [
                        'selector' => '{{ELEMENT}} .zb-el-alert__title',
                        'value'    => 'border-color: {{VALUE}}',
                    ],
                ],
            ]
        );
```

This code will compile the following css:

```
#uid680420617611 .zb-el-alert__title {
border-color: hsl(53, 99%, 65%);
}  
```

#### `{{VALUE}}`

{{VALUE}} will add the saved option value to the tag id

#### `{{INDEX}}`

{{INDEX}} will render the index of the saved value in a repeater option

#### `{{RESPONSIVE_DEVICE_CSS}}`

{{RESPONSIVE\_DEVICE\_CSS}} will render the corresponding device values:

```
default: '',
laptop: '--lg',
tablet: '--md',
mobile: '--sm'
```

In example, if responsive options are set to true the following code

```
public function options( $options ) {
        $options->add_option(
            'button_position',
            [
                'type'               => 'custom_selector',
                'title'              => __( 'Button position', 'zionbuilder' ),
                'description'        => __( 'Choose button position.' ),
                'columns'            => 3,
                'options'            => [
                    [
                        'id'   => 'left',
                        'icon' => 'align--left',
                    ],
                    [
                        'id'   => 'center',
                        'icon' => 'align--center',
                    ],
                    [
                        'id'   => __( 'right', 'zionbuilder' ),
                        'icon' => 'align--right',
                    ],
                ],
                'responsive_options' => true,               
                'render_attribute'   => [
                    [
                        'tag_id'    => 'wrapper',
                        'attribute' => 'class',
                        'value'     => 'zb-el-zionButton{{RESPONSIVE_DEVICE_CSS}}--align--{{VALUE}}',
                    ],
                ],
            ]
        );
}

```

will render:

```
<div class="znpb-element__wrapper zb-element zb-el-zionButton--md--align--center"></div>
```
