About this block
A content card with an image, a heading, a short description, and a Learn more link. When someone moves their mouse over it, the card rises a few pixels and its shadow deepens, which tells them it's something they can interact with. It's a single card you can duplicate into a grid.
When to use it
- In a grid of services, features, case studies, or blog posts.
- When you want cards to feel clickable without adding loud borders or colours.
- On a portfolio or team page where each card leads to more detail.
What's inside
- A rounded card on your theme's light surface colour with a soft shadow.
- An image across the top, cropped to 192px tall.
- An h3 heading, a muted description, and a Learn more Link in your primary colour.
- A lift-on-hover animation that moves the card up 6px, with the shadow growing at the same time.
- A maximum width of 384px, so it sits neatly in a two-, three-, or four-column grid.
How to customize it
- Swap the image and write alt text that describes it.
- Change the heading and description, and point the Learn more link at the matching page.
- Duplicate the card and place the copies inside a Container set to a grid to build a row.
- Pick a different hover effect in the animation settings, like grow or glow, if lift doesn't suit your style.
Questions
- Does the hover effect work on phones?
- Phones have no hover, so the card just shows in its resting state. Nothing is hidden behind the hover, so no content is lost.
- Can the whole card be clickable?
- The Learn more link is the click target. To make the whole card a link, add a link action to the card itself and turn the Learn more line into plain text.
- Will the animation hurt page speed?
- No. It's a small CSS transition on the card's position and shadow, with no script and no extra download.