Title Line One
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Wrapping
These icon boxes wrap to additional rows. This easily allows the number of columns to be adjusted on devices by changing the Icon Box width.
Wrapping
Advanced > Width > Custom
Wrapping
22% = 4 columns
30% = 3 columns
45% = 3 Columns
Wrapping
Layout > Gaps > Adjust space between columns and rows.
Wrapping
These icon boxes wrap to additional rows. This easily allows the number of columns to be adjusted.
Icon Hover Boxes With Links and Background Color Changes
These Icon Boxes have hover background changes and the entire box is linked. Each Icon Box is located inside its own individual container. The background hover color and links are set in the container, not the Icon Box. The Icon Boxes have equal height.
Icon Box
SVG icon, title and content are placed in the icon box.
Background Color
The background color is found in the container, not the Icon Box. The Icon Box has no background color.
Link
The link is applied to the container. The link can be found at Layout > Additional Options > Html Tag > a (link) > Link.
Icon Hover Boxes With additional elements.
These Icon Boxes have have an additional element below the icon box. To align the elements at the bottom, change Layout > Justify Content > Space Between, and add bottom padding to the container.
No Links
No element within a linked container can have a link.
- No Links
- Align Top & Bottom
- Bottom Padding
Justify Content
Set Justify Content to "Space Between" to align the icons to the top and the additional elements to the bottom.
- No Links
- Align Top & Bottom
- Bottom Padding
Bottom Padding
Add bottom padding to the container.
- No Links
- Align Top & Bottom
- Bottom Padding