Highlight Card

The Highlight Card is a web design element that adds clickable box to the page with an image and an overlaid heading that animates on hover. These are often used in conjunction with columns to present multiple side-by-side.

Demo

Instructions for use

While editing a page:

1. Move your cursor to the area of the page you wish to add the component.
2. Click the "Insert Component" button in the editor toolbar.
3. Select the Highlight Card component from the list.
4. Enter the header text.
5. Choose the heading level (ensure proper heading order on the page).
6. Select the image.
7. Enter the image alt text.
8. Enter the URL.
9. Click the "Save" button.