Styles

A component's style can be adjusted using the options in the right panel in the View Editor.

Supported Styles

Configuration	Description	Possible Values
Display Settings
Visible	Display or hide the component.	Enabled or disabled
Layout	Display the items in the components in rows or columns.	Row or column
Align	Align the text in the component.	Left, center, right
Vertical	Align the items in the component vertically.	Top, middle, bottom
Horizontal	Align the items in the component horizontally.	Left, center, right
Stretch	Stretch the component full, auto, or equal to the size of other sibling components.	Auto, equal, or full
Wrap	Wrap the items inside the component.	Wrap or no wrap
Scroll	Add a horizontal or vertical scroll to the component.	Vertical and or horizontal
Gap	Add gaps between the items in the components.	Size in pixels
Rounded	Add rounded edges to the component.	Size in pixels
Cursor	Configure the cursor when the mouse hovers over the component.	Please see the View Editor for the full list of supported cursor options.
Size	Set a width and or height to the component.	Width or height in pixels
Font-settings
Color	Set the color of the text.	Color code in hex
Family	Set the font of the text.	Inter, Caveat, Playfair, Lobster
Weight	Set the text to bold, light, or normal.	Light, Normal, Semi-bold, Bold
Size	Set the size of the text.	Size in pixels
Font Shadow Settings
Color	Set the color of the shadow of the text.	Color code in hex
Blur	Set the blurriness of the text shadow.	Size in pixels
Left	Set the horizontal position of the text shadow.	Position in pixels
Top	Set the vertical position of the text shadow.	Position in pixels
Box Shadow Settings
Color	Set the color of the box shadow.	Color code in hex
Blur	Set the blurriness of the box shadow.	Size in pixels
Left	Set the horizontal position of the box shadow.	Position in pixels
Top	Set the vertical position of the box shadow.	Position in pixels
Border Settings
Color	Set the color of the border.	Color code in hex
Style	Set the style of the border.	None, solid, dotted, dashed, or inset
Left	Set the thickness of the left border.	Size in pixels
Right	Set the thickness of the right border.	Size in pixels
Top	Set the thickness of the top border.	Size in pixels
Bottom	Set the thickness of the bottom border.	Size in pixels
Padding Settings
Left	Set the left padding of the component.	Size in pixels
Right	Set the right padding of the component.	Size in pixels
Top	Set the top padding of the component.	Size in pixels
Bottom	Set the bottom padding of the component.	Size in pixels
Background Settings
Color	Set the color of the component background.	Color code in hex
Image	Set the background image of the component.	URL or base64 data
Fill	Set the fill	Unset, contain, or cover
Position	Set the position of the background.	Top, left, right, bottom, center
Repeat	Configure the background to repeat.	No repeat, repeat-x, repeat-y, repeat both
Size	Set the size of the component background.	Width and or height in pixesl

Background Settings

To configure a background image of a component, an image can be uploaded or a URL can be set. Uploaded images are converted into base64 data and embeded to the component on Save.

Variables that exist in your logic or template (created using Create Variable Effect) can be used to set as an image url.

Questions?

Let us know on [e-mail].