---
title: "IContentItemData | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IContentItemData/"
---

# IContentItemData

> A structure defining the common parameters of text elements and images.

## Interfaces

### IContentItemData

#### Extends

- [`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata)

#### Extended by

- [`IBaseTextItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IBaseTextItemData.md#ibasetextitemdata)
- [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata)

#### Properties

##### adjustSize?

```ts
optional adjustSize?: boolean;
```

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`adjustSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#adjustsize)

##### angle?

```ts
optional angle?: number;
```

An angle, which design elements are rotated to. By default, this value is `0`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`angle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#angle)

##### blendMode?

```ts
optional blendMode?: BlendMode;
```

A blend mode that applies to design elements being added to the canvas.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`blendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#blendmode)

##### borderColor?

```ts
optional borderColor?: string;
```

The border color. The default value is `"rgba(0,0,0,1)"`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`borderColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#bordercolor)

##### borderWidth?

```ts
optional borderWidth?: number;
```

The border width, in points. The default value is `1`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`borderWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#borderwidth)

##### fillColor?

```ts
optional fillColor?: string;
```

The fill color. The default value is `"rgba(0, 0, 0, 0)"`.

###### Overrides

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`fillColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#fillcolor)

##### height?

```ts
optional height?: string | number;
```

The height of design elements being added to the canvas, in points or percent. For QR codes, the `width` value is used for both `width` and `height`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`height`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#height)

##### isVariable?

```ts
optional isVariable?: boolean;
```

Marks a design element as a variable item. The default value is `false`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`isVariable`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#isvariable)

##### itemPermissions?

```ts
optional itemPermissions?: IItemPermissionsData;
```

A structure defining the Item Menu and the Floating item toolbar for design elements.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`itemPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#itempermissions)

##### location?

```ts
optional location?: ILocationData;
```

The coordinates of design elements being added to the canvas. By default, you can add them to the center of your product.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`location`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#location)

##### manipulationPermissions?

```ts
optional manipulationPermissions?: IManipulationPermissionsData;
```

A structure defining the manipulation permissions for design elements.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`manipulationPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#manipulationpermissions)

##### maskOpacity?

```ts
optional maskOpacity?: number;
```

The mask opacity of an item. The default value is `0.45`.

##### name?

```ts
optional name?: string;
```

The name of design elements being added to the canvas.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`name`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#name)

##### opacity?

```ts
optional opacity?: number;
```

An opacity that applies to design elements. This value can be from `0` to `1`. By default, it is `1`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`opacity`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#opacity)

##### overprintFill?

```ts
optional overprintFill?: boolean;
```

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`overprintFill`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#overprintfill)

##### overprintStroke?

```ts
optional overprintStroke?: boolean;
```

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`overprintStroke`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#overprintstroke)

##### shapePermissions?

```ts
optional shapePermissions?: IShapePermissionsData;
```

Defines permissions for shapes.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`shapePermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#shapepermissions)

##### textWrappingMode?

```ts
optional textWrappingMode?: WrappingMode;
```

A wrapping mode that applies to wrap text around design elements, one of `"none"`, `"square"`, or `"tight"`. By default, it is `"none"`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`textWrappingMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#textwrappingmode)

##### themeBinding?

```ts
optional themeBinding?: IThemeBindingData;
```

A style or a color that applies to new design elements.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`themeBinding`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#themebinding)

##### violationSettings?

```ts
optional violationSettings?: IViolationSettings;
```

A structure defining the design validation parameters and warnings.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`violationSettings`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#violationsettings)

##### visible?

```ts
optional visible?: boolean;
```

Indicates whether the design element is visible on the canvas. The default value is `true`.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`visible`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#visible)

##### visualizationPermissions?

```ts
optional visualizationPermissions?: IVisualizationPermissionsData;
```

A structure defining the visualization permissions for design elements.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`visualizationPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#visualizationpermissions)

##### width?

```ts
optional width?: string | number;
```

The width of design elements being added to the canvas, in points or percent.

###### Inherited from

[`IRectangleItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#irectangleitemdata).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IRectangleItemData.md#width)