Content module
Icon Box block
A feature or service card: tinted icon badge, title, description and an optional link.
Overview
The Icon Box is the classic “feature” card: an icon in a badge, a title, a short description and optionally a link. The icon can sit on top or beside the text, and the box comes as a bordered Card, a Tinted panel or Plain. When linked, the whole card is clickable.
At a glance
- Block name
wpbb/icon-box- Module
- Content
- Find it by searching
- Icon Box
- Loads JavaScript on the site
- No
When and why to use it
- Features, services, benefits or steps.
- Short explanations with a visual anchor.
- Clickable cards leading to detail pages.
Example scenarios
- Homepage: six Icon Boxes (“Fast”, “Secure”, “Accessible”…) in a 3-column grid Container.
- Services: Side layout cards with a “Learn more” link.
See it in action
These are live examples: real Icon Box blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.
How to add the Icon Box block
- Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
- Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
- Search for the block. Type Icon Box in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
- Insert it. Click Icon Box in the results. The block appears with a light bulb icon and empty title and text.
- Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
- Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
- Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.
Content settings
You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.
On the block (in the editor canvas)
Title
- What it does
- The card heading.
- What to enter or choose
- A few words.
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Always.
- Example
- “Fast by default”.
- Result
- Shown in the chosen Title tag.
Text
- What it does
- A short description.
- What to enter or choose
- One or two sentences.
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- To explain the benefit.
- Example
- “Pages load in under a second.”
- Result
- A paragraph under the title.
- Good to know
- If both title and text are empty, the block is not shown on the site.
Block toolbar
Align
- What it does
- Aligns the icon and text.
- What to enter or choose
- One of: Align left, Align center.
- Default
- Align left
- How to use it
- Select the block; the button is in the toolbar that appears above it.
- Example
- Centre in a 3-column grid.
- Result
- The content moves.
Settings panel: Layout
Icon position
- What it does
- Places the icon above the text or beside it.
- What to enter or choose
- One of: Top, Side.
- Default
- Top
- How to use it
- Click one of the buttons in the group.
- When to use it
- Top for grids of cards; Side for lists.
- Example
- Side for a vertical list of features.
- Result
- The layout changes.
Box style
- What it does
- The look of the box.
- What to enter or choose
- One of: Card, Tinted, Plain.
- Default
- Card
- How to use it
- Click one of the buttons in the group.
- When to use it
- Card (bordered, lifts on hover when linked) for standalone cards; Tinted for a soft background; Plain for text-only layouts.
- Example
- Tinted on a white page.
- Result
- Background, border and padding change.
Title tag
- What it does
- The HTML element of the title.
- What to enter or choose
- One of: H2, H3, H4, H5, H6, p.
- Default
- H3
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Usually H3 under a section H2.
- Example
- H3.
- Result
- Structure only; the look stays the same.
Settings panel: Icon
Icon
- What it does
- The line icon shown in the badge.
- What to enter or choose
- Any icon from the bundled library (49 icons).
- Default
- lightbulb
- How to use it
- Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
- Example
- “phone” for a contact block, “shield-check” for a security feature.
- Result
- The icon appears inside the badge.
Icon style
- What it does
- The look of the badge behind the icon.
- What to enter or choose
- One of: Warm tint (brand), Cool tint (mint), Solid brand, Solid dark, Outline, Plain icon.
- Default
- Warm tint (brand)
- How to use it
- Open the dropdown and pick an option.
- When to use it
- “Warm tint” is the signature Donix look; use “Solid brand” to draw more attention, or “Plain icon” for a minimal style without a badge.
- Example
- Choose “Cool tint (mint)” for a calm, secondary feature list.
- Result
- The badge colour and background change.
ShapeShown when the Icon style is not “Plain icon”
- What it does
- A round badge or a rounded square.
- What to enter or choose
- One of: Circle, Rounded.
- Default
- Circle
- How to use it
- Click one of the buttons in the group.
- Example
- Rounded squares suit app-like or technical designs.
- Result
- The badge shape changes.
Badge size (px)Shown when the Icon style is not “Plain icon”
- What it does
- The width and height of the badge.
- What to enter or choose
- A number from 32 to 160 (px).
- Default
- 64 px
- How to use it
- Drag the slider, or type a number in the box next to it.
- Example
- 64 px is the standard size.
- Result
- The badge grows or shrinks; the icon stays centred.
Icon size (px)
- What it does
- The size of the icon itself.
- What to enter or choose
- A number from 12 to 96 (px).
- Default
- 26 px
- How to use it
- Drag the slider, or type a number in the box next to it.
- Example
- 26 px suits the standard badge.
- Result
- The icon grows or shrinks. Keep it at about 40–45% of the badge size for the best balance.
Settings panel: Link
Link
- What it does
- The page the card goes to when clicked.
- What to enter or choose
- A web address (https://…) or a page, post or file on your site. Start typing a page title to search your site.
- Default
- Empty
- How to use it
- Click the link button, then paste an address or search for a page on your site and press Enter.
- When to use it
- Almost always — a call to action should lead somewhere.
- Example
- Type “Contact” and pick your Contact page, or paste
https://example.com/pricing. - Result
- The card becomes a real link.
- Good to know
- Two extra switches appear once a link is set.
Open in new tabShown when a link is set
- What it does
- Opens the link in a new browser tab.
- What to enter or choose
- On or off.
- Default
- Off
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- For links to other websites or documents (PDFs) you do not want visitors to lose your page for.
- Example
- A link to your booking platform.
- Result
- The link gets
target="_blank"andrel="noopener"for security, and screen readers hear “(opens in a new tab)”. - Good to know
- Avoid it for normal links inside your own site — visitors can choose to open a new tab themselves.
Add rel="nofollow"Shown when a link is set
- What it does
- Tells search engines not to pass ranking credit to the linked page.
- What to enter or choose
- On or off.
- Default
- Off
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- For paid, sponsored or untrusted links.
- Example
- An affiliate link to a product.
- Result
- The link gets
rel="nofollow". Visitors see no difference.
Link textShown when a link is set
- What it does
- Text for an explicit link at the bottom of the card.
- What to enter or choose
- Short action text, or empty.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Leave empty to make the whole card clickable via its title.
- Example
- “Learn more”.
- Result
- Empty: the whole card is one link. Filled: a separate link line appears.
Design & styling
Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:
- Element — which part of the block to style.
- State — Normal, or a state such as Hover (only the states the part supports are offered).
- Device — Desktop, Tablet or Mobile, for values that can differ per screen size.
Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Icon Box offers.
Element: Card
The whole card (shown as “Card”), with a Hover state.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Background | Type | — | Normal, Hover |
| Color / Gradient | — | Normal, Hover | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover |
| Border | — | Normal, Hover | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal, Hover |
| Shadow layers | — | Normal, Hover | |
| Spacing | Margin | Yes | Normal |
| Padding | Yes | Normal | |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Block alignment | Yes | Normal | |
| Position | Position | Yes | Normal |
| Top / Right / Bottom / Left | Yes | Normal | |
| Z-index | Yes | Normal | |
| Overflow | Yes | Normal | |
| Transform | Move X / Move Y | — | Normal, Hover |
| Scale X / Scale Y | — | Normal, Hover | |
| Rotate (°), Rotate X (°), Rotate Y (°) | — | Normal, Hover | |
| Skew X (°) / Skew Y (°) | — | Normal, Hover | |
| Effects | Opacity (%) | Yes | Normal, Hover |
| State transition (ms) | — | Normal | |
| Timing | — | Normal | |
| Visibility | Show on Desktop / Tablet / Mobile | — | Normal |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Element: Icon
The icon badge. Its Hover state applies when the pointer is over the card.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Colors | Text | — | Normal, Hover |
| Background | Type | — | Normal, Hover |
| Color / Gradient | — | Normal, Hover | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover |
| Border | — | Normal, Hover | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal, Hover |
| Shadow layers | — | Normal, Hover | |
| Spacing | Margin | Yes | Normal |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal |
States for this part:
- Hover — When the mouse pointer is over the whole card — so this part changes as soon as visitors point at the card.
Element: Title
The title.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover | |
| Colors | Text | — | Normal, Hover |
States for this part:
- Hover — When the mouse pointer is over the whole card — so this part changes as soon as visitors point at the card.
Element: Text
The description.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Link
The link line.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover | |
| Colors | Text | — | Normal, Hover |
States for this part:
- Hover — When the mouse pointer is over the whole card — so this part changes as soon as visitors point at the card.
Responsive settings
Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.
In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%), Font size, Line height, Letter spacing, Alignment.
The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.
Advanced options
- HTML anchor (Advanced section of the Settings tab) — a unique name such as
pricing, so you can link straight to this block with#pricingat the end of the page address (for example from a menu). - Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
- Custom attributes (Advanced section) — add
data-*,title,aria-label,aria-describedby,langordirattributes. See Custom attributes. - State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
How it works on your site
Static HTML with an inline SVG icon; a whole-card link when linked without Link text. No JavaScript.
Accessibility
- The icon is decorative; the title carries the meaning.
- With a whole-card link, the title is announced as the link text — keep it descriptive.
Tips and best practices
- Keep titles similar in length so cards in a grid line up.
- Use one Icon style per group of cards.
Limitations and notes
- Icons come from the bundled library only.