HubSpot module documentation

Hover Utility Card

A single card with a background image or colour, a title, description and a link or CTA, plus optional hover and tilt animation. Drop several into one row to build a feature grid, a team section, or a set of service cards.

$19, one time Site pages and landing pages View on the HubSpot Marketplace

Install it

1. Buy and install from the Hover Utility Card listing.
2. In the page editor, drag Hover Utility Card into your layout.
3. To build a row of cards, add a drag-and-drop row with the number of columns you want and drop one card into each column. Each card is configured on its own.

Set up the content

Under Card content in the Content tab.

Make the cards the same size

This is the most common question, so it has its own section.

Cards in a row grow to fit their text, so uneven copy gives uneven cards. Two controls fix it, both under Styles, Card layout, Size.

• Minimum height. Set the same number on every card in the row. Simple, predictable, works in every theme. Start around 280 to 320px for a card with a title, two lines of description and a link, then adjust. Content sits at the top of the card, so titles line up across the row however much copy sits under each one.
• Fill the column height. Makes each card fill its drag-and-drop column, so the cards match the tallest one automatically. This depends on your theme laying the row out as a flex row, which most modern themes do. If turning it on changes nothing, use Minimum height instead.

You can use both: Fill the column height for automatic matching, plus a Minimum height as a floor so a short card does not collapse.

Style it

Divider line

The rule under the title, on by default, with its own colour.

Card background

• Background Option: image or colour.
• Image and Color: the background itself.
• Change Content BG Color and the three Content BG Color fields add an optional tinted panel behind the text, for when the background image is busy behind the copy.

Card layout

• Color. Override Theme Font Color is on by default here, because a card usually sits on its own background rather than the page's. Turn it off to inherit your theme.
• Size. Special Width Off/On plus Max-Width caps how wide a single card gets; Center centres it in its column. Minimum height and Fill the column height are covered above.
• Padding. Separate top and bottom values for desktop, tablet and mobile.

Animations

• Fade in Animation. The card fades up as it scrolls into view. Self-contained since September 2026; earlier versions relied on the host theme providing an animation library, and quietly did nothing when it did not. It also respects a visitor's reduce motion setting.
• Content Animation on Desktop View and on Mobile View. On by default on desktop, and worth understanding before you place the module: with it on, only the title shows at rest, and the description and link reveal when the cursor reaches the card. Turn it off if you want everything visible without a hover, which is usually what you want for a feature grid. Mobile is off by default, because there is no hover on a touch screen; on a phone the card reveals on tap instead.
• Pop-up Card on Hover on Desktop. The card lifts on hover.

Card Tilt Effect

The card tilts toward the cursor in 3D. Desktop only, and best used on one row rather than a whole page.

Common questions

My cards are different heights.

Use Styles, Card layout, Size, Minimum height, with the same value on each card. See the section above.

Open in new tab does nothing on the full-card link.

Fixed in the September 2026 version. Before that the setting was read from a field that did not exist, so it never applied. Update the module from the marketplace.

The fade-in animation does nothing.

Also fixed in the September 2026 version. The animation used to require the host theme to load a library it did not necessarily have. It is now built into the module.

The tilt effect does not work.

Tilt is desktop only and needs a mouse. Check it on a laptop rather than a phone emulator, and make sure Card Tilt Effect Off/On is on.

Support