Icon Box

Icon Box combines an icon, title, text, and optional button in one element. Use it for a service summary or feature card with a consistent internal layout.

Add and configure Icon Box

1. Click Add, choose Icon Box, and place it in the container.
2. Set Content > Content > Icon, Title, and Text.
3. Configure Button if the card needs a destination, and choose Title Tag for its heading level.
4. Style Container, Icon, Typography, Button, and Spacing under Design.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Icon	Icon.	Shared
Rotate	Set rotate. Range: 0–360.	Shared
Title	Item title.	Shared
Text	Visible text.	Shared
Button > Text	Visible text.	Shared
Button > Link	Destination and link options.	Shared
Title Tag	h1, h2, h3, h4, h5, h6.	Shared

Design > Container

Setting	Purpose and options	Behavior
Alignment	Left, Center, Right.	Responsive
Width	Width.	Responsive
Height	Height.	Responsive
Background	Color or supported fill.	Shared
Borders	borders controls.	See linked controls
Padding	Padding.	Responsive

Design > Icon

Setting	Purpose and options	Behavior
Style > Color	Color or supported fill.	Shared
Style > Size	Size and unit.	Responsive
Style > Style	None, Solid, Outline.	Shared
Style > Corners	Square, Round, Custom. When: Style = Solid, Outline.	Shared
Style > Radius	Radius and unit. When: Corners = Custom.	Shared
Style > Padding	Padding. When: Style = Solid, Outline.	Responsive
Style > Background	Color or supported fill. When: Style = Solid, Outline.	Shared
Style > Border	Color or supported fill. When: Style = Outline.	Shared
Style > Outline Width	Outline width and unit. When: Style = Outline.	Responsive
Style > Nudge > X	X and unit. When: Style = Solid, Outline.	Responsive
Style > Nudge > Y	Y and unit. When: Style = Solid, Outline.	Responsive
Position	Top, Left, Right.	Shared
Top At	Breakpoint. When: Position = Left, Right.	Shared
Vertical Alignment	Top, Middle, Bottom. When: Position = Left, Right.	Shared

Design > Typography

Setting	Purpose and options	Behavior
Title	typography controls.	See linked controls
Text	typography controls.	See linked controls

Design > Button

Setting	Purpose and options	Behavior
Style	Primary, Secondary, Custom, Text.	Shared

Shown when Style = Text.

Setting	Purpose and options	Behavior
Text > Typography	typography controls.	See linked controls
Text > Padding	spacing controls.	See linked controls
Text > Fancy Underline	Style 1, Style 2, Style 3, Style 4, Style 5, Style 6, Style 7, Style 8.	Shared
Text > Underline Color	Color or supported fill.	Hover
Text > Arrow > Arrow	Arrow 1, Arrow 2, Arrow 3, Custom.	Shared

Setting	Purpose and options	Behavior
Text > Arrow > Custom Arrow	Icon. When: Style = Text and Arrow = Custom.	Shared
Text > Arrow > Space Before	Space before and unit. When: Style = Text.	Shared
Text > Arrow > Hover Transform	Hover transform and unit. When: Style = Text and Arrow ≠ Arrow 3.	Shared
Text > Arrow > Arrow Size	Arrow size and unit. When: Style = Text.	Shared
Custom Type	Custom, Preset. When: Style = Custom.	Shared
Custom > Size > Size	Custom, Small, Default, Large. When: Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset.	Responsive
Custom > Size > Padding	Padding. When: Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset and Size = Custom.	Responsive

Shown when Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset.

Setting	Purpose and options	Behavior
Custom > Size > Override Width	Override width and unit.	Shared
Custom > Size > Full Width At	Breakpoint.	Shared
Custom > Background	Color or supported fill.	Hover
Custom > Outline	On/off.	Shared

Shown when Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset and Outline is set.

Setting	Purpose and options	Behavior
Custom > Color	Color or supported fill.	Hover
Custom > Width	Width.	Shared
Custom > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Custom > Typography	typography controls. When: Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset.	See linked controls
Custom > Corners	Square, Round, Custom. When: Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset.	Shared
Custom > Corner Radius	Corner radius and unit. When: Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset and Corners = Custom.	Responsive

Shown when Style = Custom and Custom Type = Custom or Style = Custom and Custom Type is unset.

Setting	Purpose and options	Behavior
Custom > Icon > Icon	Icon.	Shared
Custom > Icon > Position	Before, After.	Shared
Custom > Icon > Size	Size and unit.	Responsive
Custom > Icon > Color	Color or supported fill.	Hover
Custom > Icon > Space Before	Space before and unit.	Responsive
Custom > Icon > Space After	Space after and unit.	Responsive
Custom > Icon > Hover Transform	Hover transform and unit.	Shared
Custom > Effects > Transition Duration	Transition duration.	Responsive
Custom > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Custom > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover

Setting	Purpose and options	Behavior
Preset	Set preset. When: Style = Custom and Custom Type = Preset.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
After Icon	After icon and unit.	Responsive
Below Title	Below title and unit.	Responsive
Above Button	Above button and unit.	Responsive
Container	spacing controls.	See linked controls

Troubleshooting