Element

Overview

An element holds the contents of a storefront site (project) or asset (apps, public blocks, and blueprint). The content includes text, image, video, button, spacer, place holder, input box, shape, carousel, media gallery, etc.

For example, a page with two text elements and an image element is shown below:

The elements can be text, rich text, image, input, button, spacer, block, placeholder, checkbox, text area, radio, toggle, select, video, shape, carousel, data table, tabs, accordion, extension, form, or media gallery.
Note: Extension element is available only for the Apps and is used to configure thirty-party libraries and scripts needed for the Apps.

Each element has a unique list of properties. You can configure the properties using the properties panel on the right-side panel. For more details, see the section Properties of Elements.

Elements can be placed on a cell of a page or block. By default, an element is created as a standard element. However, you can convert a standard element to a shared element and vice-versa for reusability. For more details, refer to the sections Converting an Element to a Shared Element, Unlinking and Converting a Shared Element to a Standard Element, and Reusing an Element.

Properties of Elements

Properties of elements are available under the tabs GENERAL and INPUT.

General Tab

Below are the general properties of different elements:

• Common Properties
• Element Specific Properties

Common Properties

Below are the general properties of all the elements:

Property	Description
Element Name	Indicates the name of the element.
Element ID	Holds the auto-generated ID of the element.

Element Specific Properties

The following sections list the general properties of the different elements.

Text Area

Below are the general properties of the Text Area element:

Property	Description
Label	Enables or disables the label of the Text Area element. When this toggle has been enabled, you can find the LABEL tab in the properties panel:
Validation Message	Enables or disables the validation message of the Text Area element. When this toggle has been enabled, you can find the VALIDATION MESSAGE tab in the properties panel:
Preview Validation Message	Enables or disables the previewing of the validation message of the Text Area element in the Simulate mode.

Radio

Below are the general properties of the Radio element:

Property	Description
Label	Enables or disables the label of the Radio element. When this toggle has been enabled, you can find the LABEL tab in the properties panel:
Validation Message	Enables or disables the validation message of the Radio element. When this toggle has been enabled, you can find the VALIDATION MESSAGE tab in the properties panel:
Preview Validation Message	Enables or disables the previewing of the validation message of the Radio element in the Simulate mode.

Select

Below are the general properties of the Select element:

Property	Description
Label	Enables or disables the label of the Select element. When this toggle has been enabled, you can find the LABEL tab in the properties panel:
Validation Message	Enables or disables the validation message of the Select element. When this toggle has been enabled, you can find the VALIDATION MESSAGE tab in the properties panel:
Preview Validation Message	Enables or disables the previewing of the validation message of the Select element in the Simulate mode.

Toggle

Below are the general properties of the Toggle element:

Property	Description
Label	Enables or disables the label of the Toggle element. When this toggle has been enabled, you can find the LABEL tab in the properties panel:

Check Box

Below are the general properties of the Check Box element:

Property	Description
Label	Enables or disables the label of the Check Box element. When this toggle has been enabled, you can find the LABEL tab in the properties panel:
Validation Message	Enables or disables the validation message of the Check Box element. When this toggle has been enabled, you can find the VALIDATION MESSAGE tab in the properties panel:
Preview Validation Message	Enables or disables the previewing of the validation message of the Check Box element in the Simulate mode.

Input

Below are the general properties of the Input element:

Property	Description
Label	Enables or disables the label of the Input element. When this toggle has been enabled, you can find the LABEL tab in the properties panel:
Validation Message	Enables or disables the validation message of the Input element. When this toggle has been enabled, you can find the VALIDATION MESSAGE tab in the properties panel:
Preview Validation Message	Enables or disables the previewing of the validation message of the Input element in the Simulate mode.

Accordion

Below are the general properties of the Accordion element:

Property	Description
Concertina Effect	Specifies whether the opening (expanding) of the Accordion element closes the other Accordions (even if it is expanded or collapsed) or not. When this toggle is enabled, the other Accordions are closed when the Accordion element is opened. When this toggle is disabled, the other Accordions are collapsed even if it is already in the expandable view.
Open By Default	Specifies whether the Accordion element is displayed in the expanded view by default or not. When this toggle is enabled, the Accordion element is displayed in the expanded view by default whereas the other Accordion options are in the collapsed view. When this toggle is disabled, all the accordions are in the collapsed view by default.
Show chevron, +/- icons	Specifies whether the chevron and +/- icons are displayed in the Accordion element or not. When this toggle is enabled, If the Chevron option is selected, the chevron icon is displayed for each Accordion option. If the +/- option is selected, in a collapsed view, “+” is displayed. When “+” is clicked, the Accordion is expanded with “-” in the header. When “-” is clicked, the Accordion is collapsed with “+” in the header. When this toggle is disabled, no icon is displayed on the expanded and collapsed view of the Accordion options.

Input Tab

The Input tab has the following tabs:

• Settings – Holds properties related to the settings of the element.
• Style – Holds properties to set the element style.
• Actions – Holds the options to configure the actions of the element.
• Other Tabs – Holds the properties to set label, options, scripts, libraries, etc. of the different elements.

Settings Tab

The following sections list the settings properties of the different elements.

Text Area

Below are the properties of the Text Area element which are used in the settings:

Property	Description
Auto Resize	Indicates whether the element can be resized automatically or not. Enable this toggle to allow the automatic resizing of the element.
Input Name	Holds the input name of the element.
Value	Holds the value of the element.
Map Value	Holds the map value of the element.
Placeholder	Holds the placeholder value of an input element.
Pattern	Contains the input pattern of an input element.
Max length	Specifies the maximum length of the input of an input element.
Required	Specifies whether the input of an input element is mandatory or optional. Enable the toggle to make the input as mandatory.
Readonly	Specifies whether the input of an input element is read-only or not. Enable the toggle to make the input as read-only.
Inactive	Specifies whether the element is inactive or not. Enable the toggle to make the element as inactive.

Rich Text

Below are the properties of the Rich Text element which are used in the settings:

Property	Description
Open Editor	Holds a text editor.

Radio

Below are the properties of the Radio element which are used in the settings:

Property	Description
Input Name	Holds the input name of the element.
Options Data	Holds an array of objects.
Options	Holds a list of options of the Radio element.
Value	Holds the value of the Radio element.
Map Value	Accepts the variable token that will be updated with the value of the currently selected option.
Map Object	Accepts the object variable token that will be updated with the object corresponding to the currently selected option.
Radio Alignment	Specifies the alignment for the radio element.

Select

Below are the properties of the Select element which are used in the settings:

Property	Description
Input Name	Holds the input name of the element.
Options Data	Holds the options of the Select element as an object. You need to provide an object variable token. The object should have two nested variables such as name and value.
Map Value	Accepts the variable token that will be updated with the value of the currently selected option.
Map Object	Accepts the object variable token that will be updated with the object corresponding to the currently selected option.
Required	Specifies whether the input of an input element is mandatory or optional. Enable the toggle to make the input as mandatory.
Inactive	Specifies whether the element is inactive or not. Enable the toggle to make the element as inactive.

Video

Below are the properties of the Video element which are used in the settings:

Property	Description
Set Video Source	Specifies the source of the video. Note: Click  to Set individual source for different languages and vice versa. This allows to set locale-specific videos.
Set Video Caption File	Specifies the caption file of the video. Note: Click  to Set individual source for different languages and vice versa. This allows to set locale-specific caption files.
Display Controls	Specifies whether the display controls are visible or not.
Loop	Specifies whether the looping of the video is there or not.
Enable Captions By Default	Specifies whether the captions are enabled by default or not. If this toggle is disabled, the user needs to enable it.

Toggle

Below are the properties of the Toggle element which are used in the settings:

Property	Description
Input Name	Holds the input name of the element.
Value	Holds the value of the element.
Checked	Specifies whether the element is selected by default or not. Enable the toggle to make it selected by default.
Required	Specifies whether the input of an input element is mandatory or optional. Enable the toggle to make the input as mandatory.
Inactive	Specifies whether the element is inactive or not. Enable the toggle to make the element as inactive.

 Image

Below are the properties of the Image element which are used in the settings:

Property	Description
Set Source	Holds the image source of an element. New images can be uploaded using either the + option or existing assets can be reused by using the asset token. Note: For more details on asset tokens, refer to the page Theme.
Set Alt Source	Holds the alternate source of the image.
Set Title	Holds the title of the image.

Check Box

Below are the properties of the Check Box element which are used in the settings:

Property	Description
Input Name	Holds the input name of the element.
Value	Holds the value of the element.
Map Value	Accepts the variable token that will be updated with the value of the currently selected option.
Dynamic Checked	Specifies the state of the checkbox based on the value of a Boolean variable. The checkbox is enabled when the value of the variable is set to true. By default, it is disabled. Note: For more details, see variables.
Checked	Specifies whether the element is selected by default or not. Enable the toggle to make it selected by default.
Required	Specifies whether the input of an input element is mandatory or optional. Enable the toggle to make the input as mandatory.
Inactive	Specifies whether the input of an input element is disabled or not. Enable the toggle to disable the input.

 Placeholder

Below is the property of the Placeholder element which is used in the settings:

Property	Description
Markdown Content	Holds the markdown content of the element.
Default Content	Holds the default content of the element.

Button

Below are the properties of the Button element which are used in the settings:

Property	Description
Set Text	Holds the text of the element. You can set text for individual languages using the ellipsis.

Input

Below are the properties of the Input element which are used in the settings:

Property	Description
Type	Holds the type of input. The value can be Text, Email, Password, Date, Number, Phone Number, or URL.
Input Name	Holds the input name of the element.
Input Format	Holds the input format of the element.
Separator	Holds the separator of the element.
Value	Holds the value of the element.
Map Value	Accepts the variable token that will be updated with the value of the currently selected option.
Placeholder	Holds the placeholder value of an input element.
Pattern	Contains the input pattern of an input element.
Max length	Specifies the maximum length of the input of an input element.
Required	Specifies whether the input of an input element is mandatory or optional. Enable the toggle to make the input as mandatory.
Readonly	Specifies whether the input of an input element is read-only or not. Enable the toggle to make the input as read-only.
Inactive	Specifies whether the input of an input element is inactive or not. Enable the toggle to make the input element as inactive.

Text

Below are the properties of the Text element which are used in the settings:

Property	Description
Set Text	Holds the text of the element. Click the ellipsis to set individual text for different languages.
Type	Holds the type of the text. The value can be H1, H2, H3, H4, H5, H6, Paragraph, or Anchor.

Carousel

Below are the properties of the Carousel element which are used in the settings:

Property	Description
Show Arrows	Indicates whether the arrows of the carousel are shown or not. Note: When this toggle is enabled, you can set the style of the arrows using the ARROWS tab under the STYLE tab: Note: For details on arrow styles, see Carousel Arrows.
Enable Swipe	Specifies whether the swipe of the carousel element is enabled or not.
Show Indicator	Specifies whether the indicator of the carousel element is shown or not.
Indicator Type	Holds the type of the indicator such as dots.
Animate	Specifies whether the options of the carousel are navigated automatically or not. When enabled, the options are shown automatically one by one.
Auto Loop	Enables or disables the automatic looping of the options of the carousel. When enabled, the options are shown continuously, after showing the last option again it shows from the first option.

Mediagallery

Below are the properties of the mediagallery element which are used in the settings:

Property	Description
Show Thumbnails	Indicates whether the thumbnail of the media is shown or not. Note: When this toggle is enabled, you can set the style of the thumbnail via the THUMBNAILS tab under the STYLE tab:
Show Arrows	Indicates whether the arrows of the media and thumbnail are shown or not. For example, Note: When this toggle is enabled, you can set the style of the arrows via the ARROWS tab under the STYLE tab: Note: For details on arrow styles, see Mediagallery Arrows.
Show Preview Arrows	Indicates whether the preview arrows of the slide and thumbnail are shown or not. Note: When this toggle is enabled, you can set the style of the preview arrows using the ARROWS tab under the STYLE tab: For details on preview arrow styles, see Mediagallery Arrows.
Auto Loop	Enables or disables the automatic looping of the slides of the media gallery. When enabled, the slides are shown continuously, after showing the last slide again it shows from the first slide. Note: When this toggle is enabled, you can set the show time of the slides using Show slide for:
Animate	Specifies whether the slides of the media gallery are navigated automatically or not. When enabled, the options are shown automatically one by one. Note: When this toggle is enabled, you can set the transition effect and loading time of the slides using: Transition Effect – the value can be fade or loop Loading Speed – the value is specified in milliseconds

Style Tab

The following sections list the style properties of the different elements.

Text Area

Below are the properties of the Text Area element to set the style:

Group	Property	Description
–	Element Pseudo-state	Indicates the state of an element. The value can be Default, Focus, Valid, Error, or Disabled.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image.
	Color	Holds the color of the element background.
	Opacity	Holds the opacity of the element background. The value can be set as a % value.
Corner Radius	Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the border. The color is applied to the selected border as present in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the border. The value is set as a %.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.

Rich Text

Below are the properties of the Rich Text element to set the style:

Group	Property	Description
General Settings	Width
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.

Radio

Below are the properties of the Radio element to set the style in the Style tab and Option Style tab:

Group	Property		Description
–		Element Pseudo-state	Indicates the state of an element. The value can be Default, Focus, Valid, Error, Checked, or Disabled.
General Settings		Size	Specifies the size of the element. The value can be set as a pixel value.
Background		Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image.
		Color	Holds the color of the element background.
		Opacity	Holds the opacity of the element background.
Border		Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
		Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
		Color	Holds the color of the border. The color is applied to the selected border as present in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
		Opacity	Holds the opacity of the border. The value is set as a %.
Drop Shadow		Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink. Color – Specifies the color of the shadow.
Dot		Dot Size	Holds the fill type of the element background.
		Dot Border Width	Holds the dot border width.
		Dot Color	Holds the dot color.
		Dot Border Color	Holds the dot border color.
		Dot Opacity	Holds the dot opacity.

Select

Below are the properties of the Select element to set the style:

Group	Property	Description
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background.
	Opacity	Holds the opacity of the element background.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element border. The value is set as a %.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.

Video

Below are the properties of the Video element to set the style:

Group	Property	Description
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element border. The value is set as a %.

Toggle

Below are the properties of the Toggle element to set the style:

Group	Property	Description
—	Element Pseudo-state	Indicates the state of an element. The value can be Default, Focus, Valid, Error, Checked, or Disabled.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value.
	Height	Specifies the height of an element. The value can be set as a % or pixel value.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background.
	Opacity	Holds the opacity of the element background.
Corner Radius Border	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the border. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink. Color – Specifies the color of the shadow.
Dot	Dot Size	Holds the dot size. The value can be set as a % or pixel value.
	Dot Border Width	Holds the dot border width. The value can be set as a % or pixel value.
	Dot Color	Holds the dot color. The value can be set as a color name or hex code.
	Dot Border Color	Holds the dot border color. The value can be set as a color name or hex code.
	Dot Opacity	Holds the dot opacity. The value can be set as a % value.

Spacer

Below are the properties of the Spacer element to set the style:

Group	Property	Description
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.

Image

Below are the properties of the Image element to set the style:

Group	Property	Description
–	Element Pseudo-state	Indicates the state of an element. The value can be Default or Hover.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Rotation	Specifies the rotation of the element. The value can be set as 0 to 360 degrees.
Opacity	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Corner Radius	Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.

Check Box

Below are the properties of the Check Box element to set the style:

Group	Property	Description
—	Element Pseudo-state	Indicates the state of an element. The value can be Default, Focus, Valid, Error, Checked, or Disabled.
General Settings	Size	Specifies the width of a page. The value can be set as a pixel value.
Opacity	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background.
	Opacity	Holds the opacity of the element background.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the border. The color is applied to the selected border as present in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the border. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink. Color – Specifies the color of the shadow.
Tick	Tick Length	Holds the tick length.
	Tick Height	Holds the tick height.
	Tick Thickness	Holds the thickness of the tick.
	Tick Color	Holds the tick color.
	Tick Opacity	Holds the tick opacity.

Placeholder

Below are the properties of the Placeholder element to set the style:

Group	Property	Description
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Wrap Text	Specifies whether the element content is wrapped or not.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Opacity	Holds the opacity of the element typography.
Overflow	Type	Holds the overflow type of the element when it does not fit in the padding-box. The value can be: Visible – Content is not clipped Hidden – Content is clipped Scroll – Scroll bars are added Auto – Adds scroll bars automatically

Button

Below are the properties of the Button element to set the style:

Group	Property	Description
—	Element Pseudo-state	Indicates the state of an element. The value can be Default, Focus, Hover, Clicked, or Disabled.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Opacity	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Wrap Text	Specifies whether the element content is wrapped or not.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background.
	Opacity	Holds the opacity of the element background.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the border. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink. Color – Specifies the color of the shadow.
Corner Radius	Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.

Input

Below are the properties of the Input element to set the style:

Group	Property	Description
—	Element Pseudo-state	Indicates the state of an element. The value can be Default, Focus, Valid, Error, or Disabled.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background.
	Opacity	Holds the opacity of the element background.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the color of the border of an element. The value can be set as a color name or hex code. Uniform values can be set for all the sides or different values can be set for each side.
	Opacity	Holds the opacity of the element’s border. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink. Color – Specifies the color of the shadow.

Text

Below are the properties of the Text element to set the style:

Group	Property	Description
—	Element Pseudo-state	Indicates the state of an element. The value can be Default, Hover, or Disabled.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of an element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Rotation	Specifies the rotation of the element. The value can be set as 0 to 360 degrees.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Wrap text	Specifies whether the text content is wrapped or not.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.

Shape

Below are the properties of the Shape element to set the style:

Group	Property	Description
Options	Shape	Holds the shape. The shape can be a Square/Rectangle, Circle/Oval, Polygon, Line, Star, or Triangle. Note: If you select Polygon, the number of sides of the polygon can be changed from 4 to 20. The default value is 4. If you select Star, the number of points of the star can be changed from 3 to 50. The default value is 5. the radius of the star can be changed from 0% to 100%. The default value is 50%. If you select Triangle, the direction of the triangle can be changed to left, right, upward, or downward.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
Opacity	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s background. The value is set as a %.
Corner Radius	—	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element border. The value is set as a %.

Carousel

Below are the properties of the carousel element to set the style:

Group	Property	Description
Breakpoints	–	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of the carousel element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of the carousel element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the carousel element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the carousel background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the carousel background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s background. The value is set as a %.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the carousel. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the carousel border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the carousel border. The value is set as a %.

Carousel Indicators

Below are the properties to set the style of the carousel indicators:

Group	Property	Description
Breakpoints	–	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
—	Element Pseudo-state	Indicates the state of carousel indicators. The value can be Default, Hover, Active, or Inactive.
General Settings	Width	Specifies the width of the carousel indicators. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of the carousel indicators. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Space Between Dots	Holds the space between dots. The value can be set as a % or pixel value.
Position	–	Holds the position of the carousel indicators. For example, dots position in the vertical carousel, You can position the indicators inside or outside the carousel option using the indicators shown in the right-side panel. Note: The indicators position is flipped when you change the carousel direction. For example, indicators position in the horizontal carousel,
Background	Fill Type	Holds the fill type of the carousel indicators background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the carousel indicator. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s background. The value is set as a %.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the carousel. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the carousel border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the carousel border. The value is set as a %.

Carousel Arrows

Below are the properties to set the style of the carousel arrows:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
—	Element Pseudo-state	Indicates the state of carousel arrows. The value can be Default or Hover.
General Settings	Width	Specifies the width of the carousel arrows. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of the carousel arrows. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the carousel arrows. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Position	–	Holds the position of the carousel arrows. For example, arrows position in the vertical carousel, You can position the arrows inside or outside the carousel option using the dots shown in the right-side panel. Note: The arrows position is flipped when you change the carousel direction. For example, arrows position in the horizontal carousel,
Background	Fill Type	Holds the fill type of the carousel arrows background. The value can be Solid Colour.
	Color	Holds the color of the carousel arrows. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s background. The value is set as a %.

Carousel Panel

Below are the properties to set the style of the carousel panel:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Height	Specifies the height of the carousel panel. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the carousel panel. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the carousel arrows background. The value can be Solid Colour.
	Color	Holds the color of the carousel panel. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s background. The value is set as a %.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element border. The value is set as a %.
Overflow	Type	Holds the overflow type of the element when it does not fit in the padding-box. The value can be: Visible – Content is not clipped Hidden – Content is clipped Scroll – Scroll bars are added Auto – Adds scroll bars when needed

Data Table

Below are the properties of the Data Table element to set the style:

Group	Property	Description
Breakpoints	–	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Direction	Represents the direction of the element. The contents can be arranged either in the vertical or horizontal direction. Note: Click  and select Manually customize per orientation to set the direction separately for LR (Left-to-Right) and RL (Right-to-Left).
	Alignment	Represents the alignment of the element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click  and select Manually customize per orientation to set the alignment separately for LR (Left to Right) and RL (Right to Left).
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element border. The value is set as a %.
Overflow	Type	Holds the overflow type of the element when it does not fit in the padding-box. The value can be: Visible – Content is not clipped Hidden – Content is clipped Scroll – Scroll bars are added Auto – Adds scroll bars automatically

Data Table Y-Axis

Below are the properties of the Y-Axis of the Data Table element to set the style:

Group	Property	Description
Breakpoints	–	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Alignment	Represents the alignment of the element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click and select Manually customize per orientation to set the alignment separately for LR (Left to Right) and RL (Right to Left).
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s border. The value is set as a %.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.

Data Table Data Cell

Below are the properties of the Data Cell of a Data Table element to set the style:

Group	Property	Description
Breakpoints	–	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Alignment	Represents the alignment of the element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click  and select Manually customize per orientation to set the alignment separately for LR (Left to Right) and RL (Right to Left).
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element border. The value is set as a %.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.

Tabs

Below are the properties of the Tabs element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.

Tabs Header

Below are the properties of the header of a Tabs element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Space Between Tabs	Holds the space between tabs. The value can be set as a % or pixel value.
	Alignment	Represents the alignment of the element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click  and select Manually customize per orientation to set the alignment separately for LR (Left-to-Right) and RL (Right-to-Left).
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Overflow	Type	Holds the overflow type of the element when it does not fit in the padding-box. The value can be: Visible – Content is not clipped Hidden – Content is clipped Scroll – Scroll bars are added Auto – Adds scroll bars automatically

Tabs Tab

Below are the properties of the tab of a Tabs element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
—	Element Pseudo-state	Indicates the state of the element. The value can be Default, Hover, Active, or Inactive.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.

Tabs Panel

Below are the properties of the panel of a Tabs element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Overflow	Type	Holds the overflow type of the element when it does not fit in the padding-box. The value can be: Visible – Content is not clipped Hidden – Content is clipped Scroll – Scroll bars are added Auto – Adds scroll bars automatically

Accordion

Below are the properties of the Accordion element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Space Between panes	Holds the space between panes. The value can be set as a % or pixel value.
Background	Fill Type	Holds the fill type of the element’s background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.

Accordion Header

Below are the properties of the header of the Accordion element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
—	Element Pseudo-state	Indicates the state of the element. The value can be Default, Hover, Active, or Inactive.
General Settings	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as present in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Place Holder Text Color	Holds the Fill Type, Color, and Opacity of the place holder text.
Chevron	Color	Holds the color of the chevron icon of the element. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of the chevron icon of the element. The value can be set as a % value.

Accordion Panel

Below are the properties of the panel of the Accordion element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Height	Specifies the height of an element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Background	Fill Type	Holds the fill type of the element’s background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the element background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Border	Border Size	Sets the size of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the border of the element. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the element border. The color is applied to the selected border as present in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Specifies the transparency of an element. The value can be set as a % value.
Overflow	Type	Holds the overflow type of the element when it does not fit in the padding-box. The value can be: Visible – Content is not clipped Hidden – Content is clipped Scroll – Scroll bars are added Auto – Adds scroll bars automatically

Mediagallery

Below are the properties panel of the mediagallery element to set the style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Height	Specifies the height of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Media Preview Width	Specifies the media preview width of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Media Preview Height	Specifies the media preview height of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Padding	Specifies the padding of the mediagallery element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side. Note: If you have enabled the toggle Link to theme, you can set padding using Spacing Styles in Theme. For example,
	Alignment	Represents the alignment of the mediagallery element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click and select Manually customize per orientation to set the alignment separately for LR (Left to Right) and RL (Right to Left).
Background	Link to theme	Specifies whether the background color can be set using the color styles of the Theme or not. For example,
	Fill Type	Holds the fill type of the element background. The value can be Solid Colour.
	Color	Holds the color of the element. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the element’s background. The value is set as a % value.
Border	Border Size	Sets the width of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the color of the border of an element. The value can be set as a color name or hex code. Uniform values can be set for all the sides or different values can be set for each side.
	Opacity	Holds the opacity of the block background. The value is set as a % value.

Mediagallery Thumbnail

Below are the properties panel  of the mediagallery element to set the thumbnail style:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
General Settings	Width	Specifies the width of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Wrapper Width	Specifies the wrapper width of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Wrapper Height	Specifies the wrapper height of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Padding	Specifies the padding of the mediagallery element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side. Note: If you have enabled the toggle Link to theme, you can set padding using Spacing Styles in Theme. For example,
	Space Between Thumbnails	Specifies the space between the thumbnail of the mediagallery element. The value can be set as a % or pixel value.
	Position	Holds the position of the thumbnail. For example, Note: If you poisition the thumbnail at the top or bottom of the screen, you need to set the width and height of the thumnails and slide accordingly.
Background	Link to theme	Specifies whether the background color can be set using the color styles of Theme or not. For example,
	Fill Type	Holds the fill type of the thumbnail’s background. The value can be Solid Colour.
	Color	Holds the color of the thumbnail’s background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the thumbnail’s background. The value is set as a % value.
Border	Border Size	Sets the width of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the color of the border of an element. The value can be set as a color name or hex code. Uniform values can be set for all the sides or different values can be set for each side.
	Opacity	Holds the opacity of the block background. The value is set as a % value.

Mediagallery Arrows

Below are the properties to set the style of the arrows of the mediagallery element:

Group	Property	Description
Breakpoints	—	Holds a list of breakpoints of the element. Note: For more details, see Breakpoint.
—	Element Pseudo-state	Indicates the state of arrows of the mediagallery element. The value can be Default or Hover.
General Settings	Width	Specifies the width of arrows of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
	Height	Specifies the height of arrows of the mediagallery element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its content.
Background	Link to theme	Specifies whether the background color can be set using the color styles of the Theme or not. For example,
	Fill Type	Holds the fill type of the arrows’ background. The value can be Solid Colour.
	Color	Holds the color of the arrows’ background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the arrows’ background. The value is set as a % value.

Actions Tab

For the details on the Actions tab, see the Actions section.

Other Tabs

The following sections list the properties of the different elements to set label, options, libraries, and scripts of different elements.

Label Tab of Input Element

Below are the properties of the label style of an Input element:

Group	Property	Description
Settings	Set Text	Holds the text of the label in the input element. Click the ellipsis to set individual text for different languages.
—	Element Pseudo-state	Indicates the state of the label in the input element. The value can be Default, Disabled, or Hover.
General Settings	Width	Specifies the width of the label in the input element. The value can be set as a % or pixel value.
	Height	Specifies the height of the label in the input element. The value can be set as a % or pixel value.
	Padding	Specifies the padding of the label in the input element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.

Label Tab of Select Element

Below are the properties of the label style of the Select element:

Group	Property	Description
Settings	Set Text	Holds the text of the label in the Select element. Click the ellipsis to set individual text for different languages.
General Settings	Width	Specifies the width of the label in the input element. The value can be set as a % or pixel value.
	Height	Specifies the height of the label in the input element. The value can be set as a % or pixel value.
	Padding	Specifies the padding of the label in the input element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Rotation	Specifies the rotation of the element. The value can be set as 0 to 360 degrees.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.

Option Style Tab of Radio Button

Below are the properties of the option style of the Radio element:

Group	Property	Description
—	Element Pseudo-state	Indicates the state of the option in a Radio element. The value can be Default, Disabled, or Hover.
General Settings	Width	Specifies the width of the option in a Radio element. The value can be set as a % or pixel value.
	Height	Specifies the height of the option in a Radio element. The value can be set as a % or pixel value.
	Padding	Specifies the padding of the option in a Radio element. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
Typography	Linked Style	Specifies whether reusable typography is applied instead of manually setting typography or not. When enabled, you can select reusable typography instead of manually setting typography.
	Font	Specifies the font type, size, color, character, alignment, justification, etc. of the font. Note: You can click  and select Manage Font to add the fonts. For more details, see Managing Fonts of Elements.
	Text Color	Holds the Fill Type, Color, and Opacity of the text.
	Placeholder Text Color	Holds the Fill Type, Color, and Opacity of the placeholder text.

Options Tab of Carousel Element

Below are the properties of the options of a Carousel element:

Property	Description
Options	Holds the options of the carousel element. For more details, see Adding a New Option to an Element.

Options Tab of Data Table Element

Below are the properties of the options of a Data Table element:

Group	Property	Description
Source	—	Holds a list of sources of the data table. The variables of type Datamatrix are listed as the source.
X-AXIS	Show X-Axis	Specifies whether the X-Axis can be shown or not.
	X-Axis is sortable	Specifies whether the values in the X-Axis can be sorted or not.
	X-Axis max length	Indicates the length of the X-Axis. It is a numeric value. Only the specified number of items is displayed. Note: When AUTO is enabled, the length of the element is changed based on the width of its contents.
Y-AXIS	Show Y-Axis	Specifies whether the Y-Axis can be shown or not.
	Y-Axis is sortable	Specifies whether the values in the Y-Axis can be sorted or not.
	Y-Axis max length	Indicates the length of the Y-Axis. It is a numeric value. Only the specified number of items is displayed. Note: When AUTO is enabled, the length of the element is changed based on the width of its contents.

Options Tab of Tabs Element

Below are the properties of the options of a Tabs element:

Group	Property	Description
Options	—	Holds a list of options. Note: For more details on adding options, see Adding a New Option to an Element. In the list of options, the first option is selected by default.

Options Tab of Accordion Element

Below are the properties of the options of an Accordion element:

Group	Property	Description
Options	—	Holds a list of options. Note: For more details on adding options, see Adding a New Option to an Element.

Options Tab of Mediagallery Element

Below is the property of the mediagallery element to set the options:

Group	Property	Description
Options	—	Holds a media matrix variable that contains the media URLs. Note: For more details on adding options, see Mediamatrix variable and Configuring the Mediagallery Element.

Libraries and Scripts Tab of Extension Element

Below are the properties of the extension element to configure the third-party libraries and scripts:

Property	Description
Libraries	Holds the libraries to support third-party integrations. Note: For more details on how to add a third-party library, see Adding a Library for Analytics of a Page.
Scripts	Holds the script to support third-party integrations. For more details on adding third-party scripts, see Adding Script for Analytics of a Page.

How To

A user can:

• Create a New Element
• Edit an Element
• Convert an Element to a Shared Element
• Reuse an Element
• Unlink and Convert a Shared Element to a Standard Element
• Move a Shared Element to a New Bucket
• Delete an Element
• Create an Action for an Element
• Add a New Option to an Element
• Manage Fonts of Elements
• Configure the Mediagallery Element

Creating a New Element

You can create a new element on a cell of a page or a block.

To create a new element:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page:
   
5. Click available at the top-left corner.
   A list of items that need to be added to a cell appears:
   
6. Drag and drop any element from the ELEMENTS section of the add-panel to the desired cell.
   Note: When a new element is created, it is placed as a standard element by default, however, it can be converted to a shared element. For more details, refer to the section Converting an Element to a Shared Element.
   A new element is added in the desired cell of the page:
   
   Note: To configure the properties for the newly added element, see Eding an Element.

Editing an Element

After creating an element on the cell of a page or block, you can edit its properties.

To edit an element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell available on the page:
   
5. Select an element available on the cell. For example,
   
6. Edit the values of the properties available under the GENERAL tab.
   Note: You can also edit the properties available under the INPUT tab by selecting it.

Converting an Element to a Shared Element

You can convert a standard (local) element to a shared element. The shared element will be stored in a bucket. This gives you the reusability of an existing element across multiple places.

Every shared element has a master and an instance. A new instance of the element is created every time an element is reused. For more details, refer to the section Reusing an Element. Each element instance has its properties such as Element Name, Element ID, and so on under the Settings tab. An instance retrieves the Style properties from the master.

To convert a standard element to a shared element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired standard element to be converted to a shared element:
5. Click available at the top of the right-side panel.
6. Select Move To from the dropdown list:
   
7. In the pop-up, select the desired bucket where you want to store the shared element.
   
8. In the pop-up, click the CONFIRM button.
   An element is converted as a shared element under the selected bucket:
   
   Note: The shared element can be moved to any bucket as desired. For more details, refer to the section Moving a Shared Element to a New Bucket.

Reusing an Element

You can drag and drop a shared element from a bucket and reuse it anywhere on the project. Any changes done in the master in one place will reflect everywhere in the project.

To reuse a shared element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Click available at the top-left corner.
5. Select a bucket from where you want to reuse a shared element:
   
   The contents of the bucket appear:
   
6. Select a desired shared element from the bucket onto a cell:
   
   The shared element has been added to the cell:
   

Unlinking and Converting a Shared Element to a Standard Element

You can convert a shared element to a standard element using the Unlink and then Unshare options.

To unlink and convert a shared element to a standard element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell. For example,
   
5. Select the desired shared element to be converted to a standard element:
   
6. Click available at the top of the right-side panel.
7. Select Unlink from the dropdown list:
   
   Now, you can find the element available in the General bucket.
8. Click  available at the top of the right-side panel.
9. Select Unshare from the dropdown list:
   
   A shared element is converted to a standard element:
   

Moving a Shared Element to a New Bucket

A shared element can be moved from one bucket to another using the Move To option.

To move a shared element to a new bucket,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired shared element to be moved:
   
5. Click available at the top of the right-side panel.
6. Select Move To from the dropdown list:
   
7. In the pop-up, select the desired bucket where you want to move the shared element:
   
8. Click the CONFIRM button:
   
   The shared element is moved to the selected bucket:
   

Deleting an Element

You can delete an element. If the element is a shared element and it has:

• more than one instance, an instance is deleted, and all the other instances will remain as is.
• only one instance, that instance can be deleted. But the shared element will be available in the bucket for future use.

To delete an element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired element to be deleted under a cell:
   
5. Click available at the top of the right-side panel.
6. Select Delete from the dropdown list:
   
   The element is deleted from the cell:
   

Creating an Action for an Element

You can create an action for an element.

Note: You can create an action for all the elements, except the Spacer, Placeholder element, and Data Table elements.

To create an action for an element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the required element. For example,
   
5. Select the INPUT tab.
6. Select the ACTIONS tab available under the INPUT tab:
   
7. Click the ADD ACTION button to add an action.
8. Provide the required inputs:
   
   Note: For more details on action inputs, refer to the section Actions.
   An action is created for an element.

Adding a New Option to an Element

You can add options to a carousel, accordion, and tab elements.

Note: By default, an element is created with an option.

To add an option to an element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select a carousel, tab, or accordion. For example,
   
5. Select the OPTIONS tab in the right navigation panel.
   
6. Click the Add Option button.
   You can find a new option is added:
   
   Note: When you add an option, a layout cell is added under the element. For more details, see Layout Cell.

Managing Fonts of Elements

You can add fonts to an element either from font files or using the links. You can:

• Add a font from font files
• Add a font using a link

Adding a Font from Font Files

To add a font from font files,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page.
4. Select the required element.
   
5. In the right-side properties panel, select the STYLE tab under the INPUT tab.
   
6. Click Typography.
   The typography details appear:
   
7. Click .
   
8. Select Manage Font.
   The MANAGE FONTS pop-up appears.
9. Select the ADD A NEW FONT tab.
   
10. Provide a font name that describes the font.
11. Select a file with extension .ttf, .otf, or .woff.
12. Click the IMPORT FONT button:
    
    Now, you can find the font has been added:
    

Adding a Font Using a Link

To add a font using a link,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required element.
   
4. In the right-side properties panel, select the STYLE tab under the INPUT tab.
   
5. Click Typography.
   The typography details appear:
   
6. Click .
   
7. Select Manage Font.
   The MANAGE FONTS pop-up appears.
8.  Select the LINK TO A NEW FONT tab.
   
9. Provide a font link.
10. Click the ADD ONLINE FONT button.
    Now, you can see that the font is added:
    

Configuring the Mediagallery Element

You can configure the source of the mediagallery element as a variable of type Mediamatrix. This variable is linked with a datapoint of media gallery API. Hence, it shows the media details of the API.

Note: Before configuring this element, you need to create a variable of type mediamatrix and link it with a media gallery API (see creating a datapoint). For example, https://my-json-server.typicode.com/rajeshbosak/jsonserver/mediamatrix1

To configure the mediagallery element,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the mediagallery element:
   
5. Click the OPTIONS tab in the properties panel.
   
6. Select a Mediamatrix type variable as the source of the element.
   Now, you can see the slide and thumbnail of the mediagallery element:
   

 

Revision History 

Date	Description	Created By	Peer-Reviewed By	Approved By
2023-06-22	Page created and content added.	AN	JP	Suganya