Balancing Copy Blocks with Icons
Hibu Policy
All icon-based copy block sections must appear balanced and visually consistent. When the total number of copy blocks doesn’t divide evenly by three, designers and copywriters should adjust the layout so the final row still looks intentional and complete. Never leave an unbalanced row that breaks the visual rhythm of the section.
What It Is
Copy blocks with icons are small content features that pair an icon with a short piece of text — usually a title, a brief description, and sometimes a “Learn More” button.
There are two layout types commonly used across Hibu websites:
- Three-column layout: Each block is stacked vertically, with an icon above the copy.
- Two-column layout: Each block pairs an icon on the left with text on the right, side by side.
Both layouts present key information clearly and visually, helping users scan the page quickly.
Why We Do It
A balanced layout creates a stronger first impression and supports how users naturally read and navigate a page.
When a section ends with an incomplete row — for example, one or two copy blocks sitting off to one side — it can look uneven and distract from the message. Adjusting the layout or using an image to fill space keeps the design looking polished, intentional, and professional.
This approach ensures that every website section maintains the same visual rhythm, no matter how many copy blocks it contains.
How To Use the Visual Guide
Review the examples below to find the layout type and number of copy blocks that matches your page. Each example shows how to rebalance the section when the last row isn’t full — by centering, stretching, or adding an image where needed.
Use these graphics as your reference when deciding how to arrange or adjust copy blocks with icons.
