Components

Icon Box

An icon, heading and text, in many layouts.

Live demo

See it in action

Fast

An icon, a heading and a line of supporting text.

Flexible

Many layouts and hover styles to choose from.

Free

Every element is free under the GPL.

Box Presets

Hover animations on a box.

A Box Preset can pick any effect from the shared Hover Animations library — the same list a Button offers. Left: the "Hover Lift" preset (box-only hover_fx). Middle and right: the "Hover Grow" preset, whose Grow comes from the library. Hover each card.

Hover Lift

Lift + glow: the box-only hover_fx composite.

Hover Grow

Grow: the shared library's built-in effect, on a box.

Hover Grow

Same preset — add one animation, every consumer offers it.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="icon-box icon-box__wrapper icon-box--style-top-title icon-box--mobile-stack icon-box--full-height">
		<div class="icon-box__inner icon-box__inner--top">
			<div class="icon-box__icon-align text-center">
				<span class="icon-box__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="1.4em" height="1.4em"><path d="M13 2L3 14h7l-1 8 10-12h-7z" /></svg></span>
			</div>
			<h4 class="icon-box__title">Fast</h4>
			<div class="icon-box__content">
				<p>An icon, a heading and a line of supporting text.</p>
			</div>
		</div>
	</div>
</section>

To learn more about the Icon Box shortcode, please check out the online manual here.