Hover Effect Card
A card that lifts, scales, or shades when the pointer moves over it. Use it for clickable tiles in a gallery, menu, or dashboard to signal they react.
A card that lifts, scales, or shades when the pointer moves over it. Use it for clickable tiles in a gallery, menu, or dashboard to signal they react.
Search blocks by description or jump to a page.
Hover Effect Card is a single card with a title, short description, a paragraph of body text, and a footer row holding two buttons. The card lifts with a larger shadow, scales up slightly, and tints its border when the pointer moves over it, giving the whole surface a clear interactive signal.
The title, description, body copy, and button labels are all plain text you can replace without touching anything else. The two buttons in the footer are independent: swap, relabel, or remove either one to match your action model.
Reach for this block when you need a single interactive tile that a user clicks to proceed, such as a project creation prompt, a listing detail card, or an action panel on a property search result page. On a real estate marketplace it works well as the entry point to a new listing flow or a saved search action, where the lift effect signals that the card is a destination, not just a summary.
A natural flow around it on a Components page:
Before
After
Any short task or action that needs a title, a sentence of context, and one or two buttons fits this frame well:
Tip: keep the body text to two or three short sentences so the card stays compact and the scale effect reads cleanly on hover.