The Icon Box element displays an icon with a heading and text.
Add a Icon Box element to your page from Add+ > Helpers > Icon Box.
Layout & Spacing
- Content Alignment - align all content within the element left, center, or right.
- Icon Position - positions the icon relative to the text and link content: top, right, left, or bottom.
- Icon Vertical Alignment - aligns the icon vertically within the Icon Box element top, middle, or bottom. This parameter is visible only when Icon Position is set to left or right.
- Icon Space Before - sets the spacing before the icon. If Icon Position is set to either top or bottom, this controls the spacing on top of the icon. Otherwise, if Icon Position is set to either right or left, this controls the spacing to the left of the icon.
- Icon Space After - sets the spacing after the icon. If Icon Position is set to either top or bottom, this controls the spacing on the bottom of the icon. Otherwise, if Icon Position is set to either right or left, this controls the spacing to the right of the icon.
- Heading Space Above - sets the spacing above the heading.
- Heading Space Below - sets the spacing below the heading.
- Text Space Above - sets the spacing above the text.
- Text Space Below - sets the spacing below the text.
- Link Space Above - sets the spacing above the link area of the Icon Box.
- Link Space Below - sets the spacing below the link area of the Icon Box.
Responsive
In this tab, you can control the responsiveness of the alignment of the elements within the Icon Box element.
- Vertical Layout Below - set the screen width below which the Icon Box contents will be aligned based on the Content Alignment in this tab.
- Content Alignment - the alignment set here will only applies to screen widths below the width set in Vertical Layout Below.
Typography
In this tab you can control the typography for the Heading and Text inside the Icon Box.
Each of these three tabs have identical typography settings, which are the same as those found at Advanced > Typography.
Link Area
Drag a button or link into the icon box to nest it inside of the icon box. It will be displayed below the Text.