Overview
Badges are colored text elements containing small bits of information. They are used for labeling content, displaying metadata, and highlighting information.
Steps for configuration:
Go to Component
Search the badge component drag and drop the badge component in the Layout
Configurations of a Badge component
Label: Badge label is used to give the identity for a badge which display on UI
Variant: Users can set various types of variants for the badge which is displayed in different color formats according to their conditions
The badge comes in a five variants
Default: Default is used to display the default color of the badge
Inverse: Inverse is used when you need higher contrast than our default badge which is displayed in grey color
Lightest: Lightest is used when you need higher contrast, such as on colored backgrounds
Success: Success is used to communicate success which is displayed in green color
Warning: Warning is used to communicate warning which is displayed in orange color
Error: Error is used to communicate an error which is displayed in red color
No Left Icon: If the checkbox is true, then the left icon is disabled
Left Icon: Display the icon on the left side of the badge
No Right Icon: If the checkbox is true, then the right icon is disabled
Right Icon: Display the icon on the right side of the badge
How to Configure:
Goto Components tab
Search and select the component
Drag and drop the component in the layout. You can also select the drop zone in a layout and then click on the component it will add in place of the drop zone
Following are the common configurations of components on the layout:
UI:
Component Size: The user can modify the size of the component in the layout as per grid size
Padding Location: Defines the position of the padding for a component. The padding creates extra space within a component.
Around: Creates padding around the component
Top: Creates padding at the top of the component
Left: Creates padding at the left side of the component
Bottom: Creates padding at the bottom of the component
Right: Creates padding at the right side of the component
Horizontal: Creates padding horizontally
Vertical: Creates padding vertically
Padding Size: The padding size of the component can be set to:
None
xxx-small
xx-small
x-small
Small
Medium
Large
x-large
xx-large
Style: Styles described how fields should be rendered in preview mode. Users need to create one cdn link from the CSS tab on the layout designer page for use styles
Classes: Classes are used to apply unique styling and formatting to the fields in preview mode. Users need to create one cdn link from the CSS tab on the layout designer page for using classes
Margin Location: Defines the position of the margin for a component. margin creates extra space around a component.
Around: Margin gets added around the component
Top: Margin gets added at the top of the component
Left: Margin gets added at the left side of the component
Bottom: Margin gets added at the bottom of the component
Right: Margin gets added at the right side of the component
Horizontal: Margin gets added horizontally
Vertical: Margin gets added vertically
Margin Size: The margin size of the view can be set to:
None
xxx-small
xx-small
x-small
Small
Medium
Large
x-large
xx-large
Visibility:
Never: The field cannot be visible
Always: The field will be always visible
Conditional: Depending on the visibility criteria, the field can be set as visible or not
Read-only:
Never: The field cannot be read-only
Always: The field will be always read-only
Conditional: Depending on the read-only criteria, the field can be set as read-only or not
Disable:
Never: The field cannot be disabled
Always: The field will be always disabled
Conditional: Depending on the disability criteria, the field can be set as disabled or not
New Section:
Layout item Label: This field show the name of the components with the count of its usage e.g: if you are adding the section for third time in a layout then it will display with label of Section 3