Use the Icon Box widget to showcase services offered to your customers.
The Content Tab
Icon Box
Icon: Click on the icon box to upload an icon from the library.
View: Choose from three view options: none, stacked, or framed.
Shape: For the Stacked and Framed views, choose from the shapes circle or square.
Title & Description: Fill in a title and description for the icon.
Link: Set the link you want the icon and text to redirect to. Click on the gear icon to customize the link settings.
Icon Position: Set the position of the icon to align to the left, center, or right.
HTML Tag: Set an HTML tag.
The Style Tab
Icon Default View
Primary Color: Customize the color of the icon.
Spacing: Adjust the spacing between the icon and the text.
Size: Customize the size of the icon.
Rotate: Option to rotate the icon 360 degrees.
Hover Mode
Primary Color: Customize the color on hover.
Hover Animation: Choose to set an animation effect on hover.
Icon Stacked View
Primary Color: Set the color of the icon background.
Secondary Color: Set the color of the icon.
Spacing: Adjust the spacing between the icon and the text.
Size: Customize the size of the icon.
Padding: Adjust the internal spacing between the icon and the stack.
Rotate: Option to rotate the icon 360 degrees.
Border Radius: Set the radius of the exterior for shape edge curvature.
Hover Mode
Primary Color: Customize the icon background color on hover.
Secondary Color: Set the color of the icon on hover.
Hover Animation: Choose to set an animation effect on hover.
Icon Framed View
Primary Color: Set the color of the frame and icon.
Secondary Color: Set the color of the background.
Spacing: Adjust the spacing between the icon and the text.
Size: Customize the size of the icon.
Padding: Adjust the internal spacing between the icon and the frame.
Rotate: Option to rotate the icon 360 degrees.
Border Width: Adjust the thickness of the border.
Border Radius: Set the radius of the exterior for shape edge curvature.
Hover Mode
Primary Color: Customize the icon and frame color on hover.
Secondary Color: Set the color of the background on hover.
Hover Animation: Choose to set an animation effect on hover.
Content
Alignment: Align text content to the left, center, right, or justified.
Vertical Alignment: Set the vertical alignment of text to the top, center, or bottom.
Title
Spacing: Set the space between the title and the description.
Color: Customize title color.
Typography: Customize the typographical settings of the title.
Description
Color: Set the color of the description.
Typography: Customize the typographical settings of the description.
The Advanced Tab
In the advanced tab adjust the padding, apply Z-index to your elements, set conditions, motion effects, responsiveness, and more.
Next Up: Star Rating