Element: Rectangle
Element rectangle
Properties
Size Section
This section is used to configure the rectangle size and position.
| Property | Description |
|---|---|
| width | The value in pixels representing the distance between the left side of the element and its right side. |
| left | The value in pixels representing how distant element is from the left side of the window. |
| height | The value in pixels representing the distance between the bottom side of the element and its top side. |
| top | The value in pixels representing how far the element is from the top of the window. |
| lockAspectRatio | Locks the aspect ratio of the element. |
Appearance Section
This section is used to configure how the rectangle looks.
| Property | Description |
|---|---|
| blendLevel | How transparent the element is. |
| style | sets the style of the element. |
| roundRadius | How round the corners of the element are. |
| opaque | if the element is opaque or if it’s background is transparent. |
| backgroundColor | The color used for the element’s background. |
| showBorder | Turns the visibility of the element’s borders on or off. |
| lineSize | the size of a line in pixels. |
| dashedBorder | Dashed Border |
| foregroundColor | The color used in text. |
| dropShadow | The drop shadow for the element. |
| dropShadowColor | Color of the drop shadow. |
| dropShadowSize | Size of the drop shadow. |
| dropShadowDistance | Distance for the drop shadow. |
| dropShadowAngle | Angle for the drop shadow. |
| innerShadow | The inner shadow for the element. |
| innerShadowColor | Color for the inner glow shadow. |
| innerShadowSize | Size of the inner glow shadow. |
| innerShadowDistance | Distance of the inner glow shadow. |
| innerShadowAngle | Angle of the inner glow. |
| outerGlow | The outer glow for the element. |
| outerGlowColor | Color of the outer glow. |
| outerGlowSize | Size of the outer glow. |
| innerGlow | The inner glow for the element. |
| innerGlowColor | Color for the inner glow. |
| innerGlowSize | Size for the inner glow. |
| fillGradient | The gradient color used to fill the element. |
| secondaryColor | Secondary Color |
| gradientType | Gradient Type |
| fromX | sets the fromX of the element. |
| fromY | sets the fromY of the element. |
| toX | sets the toX of the element. |
| toY | sets the toY of the element. |
| viaX | sets the viaX of the element. |
| viaY | sets the viaY of the element. |
Element Section
This section is contains properties that are specific to elements of type rectangle.
| Property | Description |
|---|---|
| name | The name of the element. Displayed in the project browser. |
Geometry Section
Use the properties in this section to configure the responsive design behaviors for the element.
| Property | Description |
|---|---|
| responsive | sets if the element size should be responsive. |
| responsiveX | how the element resizes responding to screen changes in the X axis. |
| responsiveY | how the element resizes responding to screen changes in the Y axis. |
| lockResponsiveAspectRatio | Locks the aspect ratio of the element. |
| allowUnderNotch | Stretch to fill notch |
This chapter was last updated on Fri 8 May 2026 15:20:15 BST