Skip to content
Bricks Academy
Community Forum
Get Bricks

Icon box

The Icon Box element combines an icon with content in a flexible layout.

Settings

Section titled “Settings”

  • Direction (direction) - Layout direction of the icon and content.

  • Spacing (number with units) - Gap between the icon and content.

Icon

Section titled “Icon”

  • Icon (icon) - The icon to display. Default: WordPress icon from Themify library.

  • Align (align-items) - Vertical alignment of the icon.

  • Link (link) - Make the icon clickable with a link.

  • Margin (spacing) - Margin around the icon.

  • Padding (spacing) - Padding inside the icon container.

  • Size (number with units) - Font size of the icon.

  • Height (number with units) - Height of the icon container.

  • Width (number with units) - Minimum width of the icon container.

  • Color (color) - Color of the icon.

  • Background color (color) - Background color of the icon container.

  • Border (border) - Border styling for the icon container.

  • Box shadow (box-shadow) - Shadow effect for the icon container.

Content

Section titled “Content”

  • Content (rich text) - The text content to display alongside the icon. Supports rich text and dynamic data.

  • Align (align-items) - Vertical alignment of the content.

  • Margin (spacing) - Margin around the content.

  • Padding (spacing) - Padding inside the content container.

  • Heading typography (typography) - Font settings for heading elements (h1-h6) in the content.

  • Body typography (typography) - Font settings for the content text.

  • Background (color) - Background color of the content container.

  • Border (border) - Border styling for the content container.

  • Box shadow (box-shadow) - Shadow effect for the content container.