Content Controls
Content
In this section, you’ll find controls that let you add and customize elements within your Stats Grid. You can insert icons, numbers, and text, and each of these can be repeated as needed to build your grid.
- Items – Add and arrange multiple elements like icons, numbers, and text snippets that make up your grid content.
- Icon – Choose an icon to represent your data or point visually.
- Number – Input numerical data relevant to the grid that you want to display.
- Text – Add descriptive text to accompany the icons and numbers in your items.
Design Controls
Layout
Control the structure of your Stats Grid Element with these layout options. Adjust how many items appear per row and define the width to ensure your grid looks great on any device.
- Items Per Row – Set the number of items to display in each row of your grid.
- Width – Define the overall width of your grid or individual items within the grid.
Items
Enhance the visual appeal of each item in your Stats Grid. Align content, set background colors, and adjust padding and borders for a polished look.
- Content Alignment – Align the text and icons within each item to the left, right, center, or justify.
- Background – Select a background color to make the items stand out or blend in with your site’s design.
- Padding – Control the spacing inside each item to ensure the content has breathing room.
- Padding – Adjust the padding on all sides or specify different values for each side.
- Borders – Define the look of your item borders with radius for rounded corners and other styling options.
- Radius – Set how rounded the item corners should be.
- Styling – Choose border color, width, and style for a unique look.
- Shadow – Add a shadow effect to give items depth on the page.
Icon
Icons in your Stats Grid can be customized extensively with these controls. Adjust color, size, and style, and tweak advanced settings like corner rounding and padding when certain styles are applied.
- Color – Pick a color that best suits the icon and aligns with your design scheme.
- Size – Determine the scale of the icon relative to other elements in the item.
- Style – Choose between different icon styles such as solid or outlined.
- Corners – Customize the corner styles of your icons (available only when the icon style is set to solid or outline).
- Radius – Set a custom radius for your icon corners (available only when custom corners are selected).
- Padding – Adjust the space around your icon (available only when the icon style is solid or outline).
- Background – Choose a background color for your icons (available only when the icon style is solid or outline).
- Border – Define the border color of your icon (available only when the icon style is outline).
- Outline Width – Set the thickness of your icon’s outline (available only when the icon style is outline).
- Nudge – Slightly adjust the icon’s position with nudge controls (available only when the icon style is solid or outline).
- X – Nudge the icon horizontally.
- Y – Nudge the icon vertically.
Typography
The typography controls allow you to customize the appearance of text and numbers within your Stats Grid. You can set the font style, size, weight, and color for the numbers and text separately to create a visually appealing and readable grid.
- Number – Customize the font, size, color, and weight for the numbers displayed in the grid.
- Text – Tailor the typography settings for all text elements, ensuring they complement your overall design.
Spacing
The spacing controls are designed to help you fine-tune the layout of your Stats Grid. You can adjust the margins to control the space around the grid wrapper and set specific distances between the grid items and icons, as well as after the numbers for a clean, organized look.
- Wrapper – Control the overall spacing of the Stats Grid wrapper, including its margins.
- Margin Top – Adjust the top margin of the grid wrapper to increase or decrease space above the grid.
- Margin Bottom – Modify the bottom margin to manage the space below the grid.
- Between Items – Set the space between individual items in the grid to ensure balanced spacing.
- After Icon – Define the space after the icon to visually separate it from the following content.
- After Number – Adjust the spacing after the number to ensure it stands out or blends with the subsequent text.
