Search blocks by description or jump to a page.
Feature cards that tilt in 3D as the cursor moves, each holding an icon, title, and copy. Adds depth to a landing page when you want highlights to feel tactile.
3D Cards is a feature section built around a centered heading and subheading followed by an eight-card grid. Each card holds a large icon, a bold title, and a one-line description, and sits on a soft color gradient that is unique per card. When a visitor moves their cursor over a card it tilts toward the pointer in three dimensions and lifts slightly, then springs back flat the moment the cursor leaves.
The heading copy, subheading copy, and the number of cards are all straightforward to change. Each card carries its own gradient and icon independently, so you can add, remove, or reorder cards without touching the others. The tilt behavior lives entirely in the card component and requires no configuration.
Reach for this block when you want a feature grid that rewards exploration rather than just listing capabilities in a static table. The tilt interaction gives each feature a sense of weight and individuality, which works well for an online education platform introducing the tools or modules a learner will encounter. It is more engaging than a flat card grid at the cost of a slightly heavier interaction, so prefer it when the audience is expected to browse rather than scan quickly.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card is a self-contained unit, so the grid adapts to almost any set of product capabilities, course modules, or platform features:
Tip: keep every card description to a single short sentence so the grid stays balanced and the tilt effect reads cleanly at all card sizes.