Content Controls
Content
The content controls allow you to add and customize various elements of your Icon Box, such as the icon itself, its rotation, the title and descriptive text, and any buttons you want to include.
- Icon – Choose the icon you wish to display in your Icon Box.
- Rotate – Set a specific degree to rotate your icon.
- Title – Input the text you want to display as your Icon Box’s title.
- Text – Enter the descriptive text that appears in your Icon Box.
- Button – Add a call-to-action button to your Icon Box, with customizable text and link.
- Text – Define what your button says.
- Link – Set the URL to which your button will redirect.
- Title Tag – Choose the HTML tag for your title, affecting SEO importance and styling.
Design Controls
Container
The container controls let you manipulate the outer section of your Icon Box, adjusting alignment, dimensions, background color, borders, and padding to suit your overall design aesthetic.
- Alignment – Decide the content alignment within the Icon Box.
- Width – Adjust the width of the Icon Box container.
- Height – Adjust the height of the Icon Box container.
- Background – Choose a background color for the Icon Box.
- Borders – Customize the borders of your Icon Box with options for radius, style, and shadow.
- Radius – Define the roundness of your Icon Box’s corners.
- Styling – Choose border style, width, and color.
- Shadow – Add a shadow effect to your Icon Box.
- Padding – Set the spacing inside the border of your Icon Box, around the content.
Icon
These controls let you get creative with the style and positioning of your icon, allowing for changes in color, size, and style, as well as nuanced adjustments with corner shaping and nudging.
- Style – Refine the look of your icon with these comprehensive styling options:
- Color – Pick the color scheme of your icon.
- Size – Adjust the icon’s size to scale with your design.
- Style – Select between solid or outline styles for your icon.
- Corners – Decide if your icon has sharp or rounded corners. This control is only available when the style is set to “solid” or “outline.”
- Radius – Specify the corner radius if you’ve chosen custom-shaped corners. This control is only available when corners are set to “custom.”
- Padding – Adjust the spacing around your icon. This control is only available when the style is set to “solid” or “outline.”
- Background – Choose a background color for your icon. This control is only available when the style is set to “solid” or “outline.”
- Border – Select a border color for your icon. This control is only available when the style is set to “outline.”
- Outline Width – Determine the thickness of your icon’s outline. This control is only available when the style is set to “outline.”
- Nudge – Make fine adjustments to the icon’s position with the X and Y controls. This control is only available when the style is set to “solid” or “outline.”
- X – Nudge your icon horizontally.
- Y – Nudge your icon vertically.
- Position – Choose the layout positioning for your icon within the Icon Box.
- Top At – Decide at which breakpoint the icon should be displayed at the top, applicable only when the icon is positioned to the left or right. This control is only available when the position is set to “left” or “right.”
- Vertical Alignment – Align the icon vertically when it’s positioned to the left or right. This control is only available when the position is set to “left” or “right.”
Typography
Control the typography of your Icon Box’s title and text, ensuring they align with your brand’s style or the page’s visual hierarchy.
- Title – Customize the font, size, weight, and more for your Icon Box’s title.
- Text – Similarly, customize the typography of the text in your Icon Box.
Button
This section allows extensive customization of the button’s appearance and behavior, offering controls for style, text, and other properties. Users can personalize aspects such as typography, padding, fancy underline effects, arrow indicators, and more. Additionally, advanced options are available for creating custom button designs, adjusting dimensions, background, outline, colors, iconography, and effects.
- Style – Customize the overall button style.
- Text – Modify the Text button’s appearance and properties.
- Typography – Adjust font settings for the button’s text.
- Padding – Set the padding around the button’s text.
- Padding – Fine-tune the specific padding amounts.
- Fancy Underline – Choose an underline style for the text.
- Underline Color – Select a color for the underline.
- Arrow – Add and customize an arrow indicator.
- Arrow – Choose the arrow style.
- Custom Arrow – Create a custom arrow design.
- Space Before – Specify spacing before the arrow.
- Hover Transform – Set a hover effect for the arrow.
- Arrow Size – Adjust the size of the arrow.
- Custom – Create a custom button style with various adjustable properties.
- Size – Determine the button’s size and padding.
- Size – Select a predefined or custom size.
- Padding – Customize the padding for a custom size.
- Override Width – Optionally override the button’s width.
- Full Width At – Define a breakpoint for full button width.
- Background – Choose a background color.
- Outline – Toggle an outline around the button.
- Color – Select the outline color (available if outline is set).
- Width – Set the outline width (available if outline is set).
- No Fill On Hover – Choose to have no fill on hover (available if outline is set).
- Typography – Configure the font properties.
- Corners – Select corner style options for the button.
- Corner Radius – Set a specific corner radius (available if “custom” corners are selected).
- Icon – Add and personalize an icon for the button.
- Icon – Choose an icon to display.
- Position – Select the icon’s position relative to the text.
- Size – Determine the icon’s size.
- Color – Pick a color for the icon.
- Space Before – Set space before the icon.
- Space After – Set space after the icon.
- Hover Transform – Apply a hover transformation effect to the icon.
- Effects – Apply and customize various visual and interaction effects.
- Transition Duration – Adjust the duration of effect transitions.
- Scale On Hover – Set the button’s scale when hovered over.
- Shadow – Add a shadow effect to the button.
Spacing
This section provides controls to adjust the spacing and layout around and within the Icon Box widget, ensuring proper alignment and visual balance. It allows for precise management of the space after the icon, below the title, above the button, and around the container. By customizing these options, users can achieve a more coherent and aesthetically pleasing presentation of content.
- After Icon – Adjust the space following the icon.
- Below Title – Modify the spacing below the title text.
- Above Button – Control the amount of space above the button.
- Container – Manage the overall container spacing.
- Margin Top – Set the top margin of the container.
- Margin Bottom – Set the bottom margin of the container.
