Info Box — Documentation

Info Box is a styled box that holds an icon, heading, text, and button as fully editable blocks — the building block for feature grids, service lists, and "why choose us" sections. Because the contents are real blocks, you get all of their controls, plus one simple gap setting for the spacing between them.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Info Box (hover it for a live preview). It drops in pre-filled with a ready-made template — an Icon, an Advanced Heading, a paragraph, and an Advanced Button — so you can start editing immediately. Add or remove any block inside whenever you like. To build a row of boxes, place several inside a columns layout.

What's inside

The starting template uses our own blocks where they add value and core blocks for the basics:

Icon — pick any glyph, size, color, and shape.
Advanced Heading — heading with highlight spans, sub-heading, and typography.
Paragraph — your descriptive text.
Advanced Button — the call to action, with icons, hover states, and style presets.

You're free to remove any of these, reorder them, or add other blocks — a list, an image, more buttons — the box doesn't lock you to the template.

Spacing between items

The Gap between items control (in the Layout panel) sets a single, consistent space between the icon, heading, text, and button. It overrides the blocks' individual margins, so the spacing stays even no matter what's inside.

Layout

Direction — Stack (vertical) for classic feature cards, or Row (horizontal) to put the icon beside the text.
Alignment — align the contents Left, Center, or Right (in row mode this controls vertical alignment).

The block sidebar is split into two tabs. Settings is what the box does; Styles is how it looks.

Tab	Section	Covers
Settings	Layout	Direction, icon position, alignment, gap, link
Settings	Advanced	Visibility, Position, anchor, CSS class
Styles	Card	The box itself
Styles	Icon	The leading icon
Styles	Spacing	Padding and margin

Styling the card

Styles → Card holds everything about the box:

Row	What it does
Background	Solid color, gradient, or image with an overlay
Border	Per-side width, style, and color
Radius	Per-corner rounding
Shadow	Preset or custom shadow
Max width	Per device
Min height	Per device

Styles → Icon sets the icon color and size. The heading, text, and button inside the box are ordinary blocks, so each carries its own styling — there is no separate typography panel here.

Info Box supports Wide and Full alignment plus an HTML anchor.

HTML output

// terminalhtml

<div class="ab-ibox ab-ibox--column ab-ibox--align-center has-shadow-md">
  <!-- your inner blocks render here: Icon, Advanced Heading, paragraph, Advanced Button -->
</div>

The ab-ibox--column|row, ab-ibox--align-*, and has-shadow-* modifier classes drive layout and the shadow preset; the gap, background, border, and radius are --ab-ibox-* custom properties on the wrapper. The inner blocks keep their own markup and styling.