Icon Boxes

Feature box with icon, title, and description. Supports multiple icon styles, sizes, layouts, and hover effects. It is shown in the block inserter as Canvas Icon Box and registered as canvas-core/icon-box.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• IconDefaultbi bi-gem

  Glyph shown above or beside the copy, standing for what the box is about.

• Icon TextDefaultEmpty

  Text rendered inside the icon element: a step number or short label. Works with or without an icon class.

• Icon ImageDefault0

  Optional image used in place of the icon (e.g. a custom PNG/SVG glyph).

• Icon Image URLDefaultEmpty

  A glyph image referenced by URL, for artwork that lives in the theme rather than the media library. The Icon Image above wins when both are set.

• Icon Image Alt TextDefaultEmpty

  Overrides the attachment alt text.

• Media BoxDefaultOff

  Use a large media image with a title/subtitle instead of an icon glyph.

• Media ImageDefault0

  Image shown at the top of the media box.

  Shown when Media Box is on

• Media Image Alt TextDefaultEmpty

  Overrides the attachment alt text.

  Shown when Media Box is on

• Media Image ClassesDefaultEmpty

  Classes on the media image. Enter "none" for an unclassed image.

  Shown when Media Box is on

• Media Image LinkDefaultEmpty

  Wraps the media image in a link.

  Shown when Media Box is on

• Media Embed URLDefaultEmpty

  Video embed shown instead of the media image.

  Shown when Media Box is on

• Embed WidthDefaultEmpty

  Width of the embedded player at the top of the box. Leave it empty to let the box decide.

  Shown when Media Box is on

• Embed HeightDefaultEmpty

  Height of that player. Leave it empty to let the box decide.

  Shown when Media Box is on

• Embed Allow AttributeDefaultEmpty

  What the embedded player is permitted to do, such as start on its own or go full screen. Leave it empty to grant nothing.

  Shown when Media Box is on

• Use the Icon as the MediaDefaultOff

  Shows the chosen icon at media size above the copy, instead of an image or embed.

  Shown when Media Box is on

• SubtitleDefaultEmpty

  Smaller supporting line shown beneath the title.

• TitleDefaultFeature Title

  Headline of the box, naming the feature or service it describes.

• DescriptionDefaultLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

  Supporting copy under the title.

• Product AttributeDefaultEmpty

  On a WooCommerce product, the name of a product attribute (Product data → Attributes) whose value becomes the description, so the box states what this product actually offers. A product that does not carry the attribute hides the box rather than promising anything on the shop's behalf. Leave empty to use the Title and Description above.

• Attribute Name as TitleDefaultOn

  On: the attribute's own name is the box title, so the heading is the shop's wording too. Off: keeps the Title above.

  Shown when Product Attribute is set

• Call-to-Action TextDefaultEmpty

  Adds a link below the box content, e.g. "Read More". Leave empty for no link.

• Call-to-Action URLDefaultEmpty

  Where that call-to-action link sends a visitor.

  Shown when Call-to-Action Text is set

• Call-to-Action IconDefaultEmpty

  Glyph shown after that link's wording, such as an arrow pointing onward.

  Shown when Call-to-Action Text is set

• Link URLDefaultEmpty

  Makes part of the box clickable. Choose which part below. Leave it empty for a box that is not a link.

• Link WrapsDefaultIcon

  Which part of the box carries that link.

  ChoicesIconTitle

• Link TargetDefaultEmpty

  Whether the link opens in the same tab or a new one. Use a new tab for a destination that leaves your site.

  ChoicesSame window (empty)New window

• Nofollow LinkDefaultOff

  Tells search engines not to pass ranking credit through this link. Use it for paid placements and links you do not vouch for.

• Link Accessibility LabelDefaultEmpty

  Announced name for the icon link. An icon is not text, so a link wrapping only an icon has no name for a screen reader until you give it one.

• Subtitle PositionDefaultInside the title

  Place the subtitle above the title as its own line, for a label such as "Call Us:" that is not part of the heading.

  ChoicesInside the titleAbove the title (own line)

Style

• Description ClassesDefaultEmpty

  Utility classes on the description paragraph, for a muted colour or a different size.

• Content Wrapper ClassDefaultEmpty

  Replaces the default fbox-content wrapper class. Use when the design names that block differently, or type none for a design that leaves the wrapper unclassed; leave empty to keep the default.

Settings

• Subtitle ClassesDefaultEmpty

  Utility classes on the subtitle, for its font, weight or colour.

• Call-to-Action ClassesDefaultEmpty

  Classes on that link, which is how it is drawn as a plain link or as a button.

  Shown when Call-to-Action Text is set

• Icon StyleDefaultDefault (Filled Circle)

  How the icon is framed: a filled disc, an outline, a rounded square, or nothing at all behind the glyph.

  ChoicesDefault (Filled Circle)Outline (Double Border)Border (Single Outline)Rounded SquarePlain (No Background)

• Color SchemeDefaultTheme Color

  Colour the icon takes. Light suits a box placed on a dark section.

  ChoicesTheme ColorDarkLight

• Icon SizeDefaultDefault (4rem)

  How large the icon is drawn.

  ChoicesDefault (4rem)Small (2rem)Large (6rem)Extra Large (8rem)

• LayoutDefaultCentered

  Whether the icon sits beside the copy or above it with everything centred.

  ChoicesHorizontalCentered

• Compact ContentDefaultOff

  Smaller content text, for tight sidebar/column placements.

• Hover EffectDefaultOff

  Animated ring/pulse on hover.

• Card BackgroundDefaultOff

  Card-style box with border and background.

• Active StepDefaultOff

  Mark this box as the active/completed step in a vertical-connector stack (colors its icon and line segment).

• Hide Connector LineDefaultOff

  Suppress the vertical connector line behind this box (use on the last step of a stack).

• Icon AnimationDefaultEmpty

  Scroll-triggered animation on the icon container.

  ChoicesNone (empty)bounceInfadeInfadeInUpfadeInDownfadeInLeftfadeInRightzoomInpulsetadarubberBand

• Icon Animation DelayDefault0

  Delay in ms before the icon animation starts.

  Shown when Icon Animation is "!="

• Icon Hover AnimationDefaultEmpty

  Animation played on the icon each time the pointer enters the Hover Trigger element (e.g. fadeIn, slideInDown, zoomIn).

• Icon Hover Animation (Out)DefaultEmpty

  Animation played when the pointer leaves. Left empty the reveal fades out.

  Shown when Icon Hover Animation is "!="

• Hover Animation Speed (ms)Default0

  Duration of the hover animation. 0 uses the design default (600ms).

  Shown when Icon Hover Animation is "!="

• Hover Animation Delay (ms)Default0

  Wait this long after the pointer enters before animating: stagger several boxes to build a layered reveal.

  Shown when Icon Hover Animation is "!="

• Hover TriggerDefaultEmpty

  How much of the design a visitor has to hover over before the icon animates. Name the whole box so it reacts anywhere on the card, or the row so every box in it animates together. Left empty, only the icon triggers it.

  Shown when Icon Hover Animation is "!="

• Reset After HoverDefaultOff

  Return the icon to its hidden state when the pointer leaves instead of keeping the revealed state.

  Shown when Icon Hover Animation is "!="

• Hover BreakpointDefaultEmpty

  Limit the hover animation to a breakpoint and up (e.g. "lg"). Enter "false" to require large screens. Left empty it runs everywhere: pointer-less devices have no hover, so a reveal-only design should set this.

  Shown when Icon Hover Animation is "!="

• Title HTML TagDefaultH3

  Heading level the box title takes. Keep it in step with the heading above the row of boxes, or choose a plain container to leave the boxes out of the page outline.

  ChoicesH2H3H4H5H6divspan

• Title CSS ClassesDefaultEmpty

  Utility classes applied to the title tag itself (designs often restyle the feature-box heading with weight/transform utilities).

• Content ClassesDefaultEmpty

  Extra classes on .fbox-content. Enter "none" to clear the media-box px-0 default.

• Icon Inline StyleDefaultEmpty

  One-off styling for the icon, such as an exact colour the palette does not name.

• Title Inline StyleDefaultEmpty

  One-off styling for the title, such as an exact size the theme sizes do not offer.

• Description Inline StyleDefaultEmpty

  One-off styling for the description paragraph, such as an exact size the theme sizes do not offer.

• Icon Wrapper ClassesDefaultEmpty

  Extra classes on the .fbox-icon wrapper.

• Icon Image ClassesDefaultEmpty

  Classes applied to the icon when the icon is an image.

• Bare Icon (No Link Wrapper)DefaultOff

  Emit the icon on its own, without the non-navigating wrapper. Only applies when no link or lightbox is set.

Style tab

• Icon Color

  A style control in the Icon group of the Style tab. It has a hover state as well as a resting one.

• Icon Background

  A style control in the Icon group of the Style tab. It has a hover state as well as a resting one.

• Icon Container Size

  A style control in the Icon group of the Style tab.

• Icon Font Size

  A style control in the Icon group of the Style tab.

• Icon Spacing

  A style control in the Icon group of the Style tab.

• Icon Border Radius

  A style control in the Icon group of the Style tab.

• Title Color

  A style control in the Title group of the Style tab. It has a hover state as well as a resting one.

• Title Typography

  A style control in the Title group of the Style tab.

• Description Color

  A style control in the Description group of the Style tab. It has a hover state as well as a resting one.

• Description Typography

  A style control in the Description group of the Style tab.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.