How To Build An Icon Box

An Icon Box is a small block of persuasion: an icon, a short title and a line or two of copy. Reach for it when you need to say the same kind of thing three or four times across a row, such as the services you offer, the reasons to choose you, or the steps in a process. It is the block behind most feature strips on a Canvas site, and getting it right once means every later row takes a minute.

This page works through three layouts and the settings that make each one behave. For the full settings list, see Canvas Icon Box.

When To Use It

Reach for an Icon Box when all of these are true:

• The item is short: a title, a sentence or two, and at most one link.
• There are several of them, and they should look identical.
• The point is carried by an icon or a small image rather than by a photograph.

Use a different block for a full article teaser, a product, or anything that has its own page and its own metadata. Those have blocks that read from the record itself, so nothing has to be retyped and nothing goes stale when the record changes.

How To Build A Row Of Three

Starting screenthe block editor, on the page you are building.

Insert a Columns block and choose the three column layout, then insert Canvas Icon Box in the first column. Open the block settings, go to the Content panel, choose an icon, and replace the placeholder title and description. The block arrives with placeholder copy on purpose, so you can judge the shape before you write the words.

Open the Settings panel next. Set Layout to the centred option, then pick an Icon Style and an Icon Size. Now select the block, copy it, and paste it into the other two columns, changing only the icon and the copy in each. Leaving every other setting alone is what makes the three read as a set rather than as three unrelated boxes.

There is no shared style for a group of boxes, so a later change to Icon Size has to be made on each one. Keep the number of variations small and that stays a small job.

How To Fit One Into A Narrow Column

A centred box wastes the width in a sidebar or a narrow column, so change three settings:

• Set Layout to the horizontal option, which moves the icon to the left of the copy.
• Turn on Compact Content, which reduces the text size to suit the space.
• Choose a smaller Icon Size, so the icon does not dominate the row.

How To Build A Connected Step List

Icon Boxes can be stacked into a vertical list with a line running through the icons, which reads as a sequence rather than as a set.

Insert a Group block and put your Icon Boxes inside it. Select the Group, and in the WordPress Advanced panel put feature-box-border-vertical into Additional CSS class(es). That class is what draws the connecting line, and without it the two step settings below have nothing to act on.

In each box, set Layout to horizontal and use Icon Text to put the step number inside the icon, with or without an icon behind it. On the step the visitor has reached, turn on Active Step. On the last box, turn on Hide Connector Line, so the line stops at the final step instead of running past it.

How To Use An Image Or A Video Instead Of An Icon

Turn on Media Box in the Content panel. The layout changes to a media panel above the copy, and a set of media settings appears below: an image, its alternative text, an optional link, or a video embed in place of the image. To show the chosen icon at that larger size rather than an image, turn on Use the Icon as the Media.

Note

All of those media settings stay hidden until Media Box is on. They are not missing, and they will not appear in a search of the sidebar.

Pitfalls

The title is not clickable. Setting Link URL does not turn the whole box into a link. Link Wraps decides what the link attaches to, and it starts on the icon. Change it to the title if that is what you want, or add Call-to-Action Text if you want the icon linked and a visible link as well.

The call to action has nowhere to go. Call-to-Action URL only appears once Call-to-Action Text has something in it. Write the label first.

The step settings do nothing. Active Step and Hide Connector Line only have an effect inside a wrapper carrying the connector class. See the step list above.

The block animates twice. Icon Animation animates the icon on scroll, and the shared Animation panel animates the whole block. Using both moves the icon inside a box that is itself moving. Pick one.

Placeholder copy reaches production. The block arrives with a placeholder title and description so it is visible the moment you insert it. Search a finished page for the placeholder wording before you publish.

Every Setting

The list below is generated from the product, so it is current by construction. It names each setting exactly as the editor names it, with its default, its choices and the condition that reveals it.

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.

Every Icon Box also carries the Animation, Scroll Effects and Advanced panels that every Canvas block has. See Controls Every Canvas Block Has.

What To Read Next

• How To Read A Block Page
• Canvas Icon Box, the full settings reference