Animated Icon Grid
A grid of feature icons that animate into view on scroll. Adds motion to a list of capabilities so each benefit catches the eye as users read down.
A grid of feature icons that animate into view on scroll. Adds motion to a list of capabilities so each benefit catches the eye as users read down.
The Marketing (Legacy) Collection unlocks the source for every Marketing (Legacy) block. All Access unlocks every Collection.
Already purchased? Log in
Animated Icon Grid opens with a centred header area: a badge, a bold heading, and a short paragraph of supporting copy. Below that sits a responsive grid of cards, up to four columns wide, each card holding a colour-filled circular icon, a feature title, a one-sentence description, and a coloured accent line that slides in along the card bottom on hover. A centred call-to-action button sits beneath the grid to carry visitors forward.
The header copy, badge label, and button text are all independent strings you can rewrite without touching the layout. The grid scales from one to four columns automatically, and you can add or remove feature cards freely. Each card carries its own icon and colour so swapping in new icons or adjusting the palette is a card-by-card change.
This layout works well on a project management or workspace product page where you need to convey a broad capability set at a glance. The hover animation gives each card a moment of attention as a visitor scans down, which makes it better suited to a mid-page features rundown than a tight two-column comparison. Use it when you have eight or more capabilities to show and want the section to feel alive without requiring a click or tab switch.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card is a self-contained feature slot, so the grid works for any list of parallel capabilities. A few concrete fits for a project management context:
Tip: keep descriptions to one short sentence each so the cards stay the same height across the row and the grid reads as a uniform unit.