← All elements
<div class="fi"><span class="ic"></span><h3>Instant preview</h3><p>See every change the moment you type, side by side.</p></div>About this card
A feature highlight with a rounded icon tile that tilts on hover, a title and a short explanation.
How it works
The icon tile is a gradient rounded square with a bordered inner square as a simple glyph. Hover raises the card and tilts the tile with the individual rotate property and an overshooting easing.
Ways to customise it
- Replace the glyph with an SVG or emoji.
- Change the gradient for another brand.
- Remove the rotation for a calmer hover.
Good to know
Decorative icons should be aria-hidden in production. The heading and paragraph carry the real message.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.