1. Home
  2. Docs
  3. App Builder – User Guide
  4. Widget catalog
  5. Icon Box

Icon Box

1. Generral

TemplateThere are 3 available templates: Item default, Item contained, Item group
IconAllow users to choose an icon from the library
TitleSet title for the icon. It will be shown next to the icon
DescriptionSet description for the icon. It will be shown next to the icon title
AlignmentSet the alignment for the icon, title, description
Note: only display when users choose template = Item default
Add itemAllow users to add more icons as they want

2. Style

Config Section
Padding / MarginSet padding/margin for the whole section
Background ColorSet background color for the whole section
Pad ItemSet space between icons (in case there is more than 1 icon)
Height / Max widthSet height/width for icons
Note: only apply for carousel layout
Column / RatioColumn: Users can set column numbers in case there is more than 1 icon.
Ratio: User should set value for this field to display clearly icons
Note: Only apply for grid layout
Indicator colorSet color for the indicator
Note: Only apply for slideshow layout
Indicator Active colorSet color for the active indicator
Note: Only apply for slideshow layout
Config Item
Background colorSet background color for each icon item
Border colorSet border color for each icon item
Border RadiusSet radius for each icon item
Config Icon
Enable box iconShow/hide box icon
Ex: Disable https://prnt.sc/139i105
Enable https://prnt.sc/139i2ba
Color iconSet color for the icon
Size iconSet size for the icon
Size box iconSet size for the box icon
Box color iconSet box icon color
Border color iconSet color for box icon border
Box ShadowUser can set: Shadow color, Offset X, Offset Y, Blur radius, Spread radius to show shadow for each icon item

3. Layout

ListThe icon list will be shown as a list
CarouselThe icon list will be shown as a carousel
MasonryThe icon list will be shown as a masonry
SlideshowThe icon list will be shown as a slideshow
GridThe icon list will be shown as a grid

Was this article helpful to you? Yes No

How can we help?