Docs / Cards & Grids / Hover Cards
A grid of interactive cards where each card has a front face and a back face that's revealed on hover (or on tap on touch devices). Use it for feature grids, team highlight tiles, service callouts, or product line showcases where the surface story is short and the detail wants room to breathe.
The grid-shaping controls live here. Pick the card mode (full-screen image cards vs. standard image-over-text cards), pick the hover effect, set the column counts, and optionally turn on category filtering or a Load More / pagination control for long card lists.
Switches the visual model of every card in the grid. Full Screen cards are large image tiles where heading + body sit on top of the image; Standard cards are smaller, with an image at the top and text beneath in a card body. Many of the controls in this group and in Style only apply to Standard mode (column count, filters, Load More, pagination, card border / shadow). The card heights and content padding for Full Screen are configured in /// Full Screen Style.
full_screen Full Screen (default)standard StandardControls whether the section heading area (badge h6, title h2, description p) renders above the card grid. Turn it off when the section follows a stronger heading from the row above. The heading area is hidden in Full Screen mode regardless.
Text alignment for the heading area on desktop (993px and above).
left Leftcenter Center (default)right RightHeading alignment for tablet / mobile (below 992px). Set independently from desktop.
Caps the width of the heading block so long descriptions wrap to a readable measure even when the row is full-width. Lower to 600-700px for tighter centered headings; raise toward 1200 for wide layouts.
How the back face is revealed when a visitor hovers (or taps on touch). Fade is the safe default; Flip is the showiest but breaks down badly on Standard cards with text under the image. On touch devices, the first tap on a card flips it; the second tap (or a tap on the CTA) activates the link.
fade Fade (default) - back face cross-fades over frontslide_up Slide Up - back face slides in from the bottom edgezoom Zoom - front face scales out, back face scales inflip Flip - 3D Y-axis rotation reveals the back faceHow many cards render per row on desktop (993px and above). In Full Screen mode the grid is fixed to a single full-width column per card by design.
2 2 Cards3 3 Cards (default)4 4 CardsMobile column count (below 992px). 1 column gives full-width readable cards; 2 columns suits compact icon-style cards.
1 1 (default)2 2Force-disables the hover/tap reveal animation. The back face still renders on hover/tap, just without transition motion. Useful for accessibility-sensitive pages or low-end device targets. Visitors with prefers-reduced-motion: reduce already get a non-animated swap automatically.
Adds a chip-style filter bar above the grid that lets visitors narrow the cards by category. Tags come from each card's Filter Tag field (comma-separated). Best used when you have 6+ cards spanning 2-4 clear categories.
Fades/scales cards in and out as the active filter changes. Turn off for an instant snap if you have a large grid where the staggered animation feels slow.
The label for the first chip that resets the filter (shows every card). Rename to "All Services" / "Everything" / etc. to match the page's voice.
How the grid handles long card lists. None renders every card at once. Load More starts with a slice of cards and reveals more in batches as the visitor clicks the button. Pagination splits the grid into numbered pages.
none None (default) - render every cardload_more Load More - button reveals additional cards in batchespagination Pagination - numbered pagesFine-tunes the Load More button behavior. Children:
btn_text Button Text (text, default: Load More)cards_on_first_load Cards Shown Initially (number 1-30, default 6) - how many cards are visible on page loadload_num_cards Cards Per Load (number 1-12, default 3) - how many cards reveal each time the button is clickedbtn_style Button Style (select, default: Primary) - cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-sixChildren:
visible_cards Cards Per Page (slider 1-50, default 6) - how many cards render per page; the rest are split into numbered pagesThe actual cards plus the section heading and the scroll-in animation. The heart of this group is the repeatable Cards list, where each entry has a separate Front face and Back face.
The badge + title + description block above the card grid. Default markup is <h6> (rendered as a pill badge if Badge Styling is set to Show), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.
none No animation (default)bottom Fade Up (slides up from below)top Fade Down (slides down from above)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.
The grid is built from a repeatable list of cards. The defaults ship with 3 cards (Mission / Vision / Values) and the editor can add or remove entries freely. Each card has three top-level pieces: an optional Filter Tag, a Front group, a Back group, plus a Card Link Options group for wrapping the whole card in a link.
Comma-separated tags assigned to this card. Each unique tag across all cards becomes a chip in the filter bar. Example: design, branding.
What the visitor sees before hover/tap.
The image that fills the front face. Responsive sizing is on; the file manager handles SRC + alt text. For Full Screen mode use a high-contrast image so overlaid text stays legible.
Tip: Use a unique filename when you replace a card image; HubSpot's CDN caches by URL, so overwriting with the same name can serve the stale image for hours.
Solid color overlay drawn between the image and the text. Default 30% black darkens the photo so white text reads cleanly. Set opacity to 0 to disable the overlay without removing the field.
The front-face heading. Default markup is <h3>; switch to other heading tags in the rich text toolbar if the visual hierarchy demands it.
Optional body copy under the front heading. Often left blank for Full Screen cards (the heading is enough) and used for short taglines on Standard cards.
Reveals the CTA Text + CTA Link fields below. Turn off if the whole card is meant to be the click target (use Card Link Options instead).
Button label rendered on the front face.
Destination for the CTA. Supports external URLs, HubSpot content, files, email, and blog posts. Has its own "Open in new tab" and "No-follow" toggles.
Where the front-face content stacks vertically inside the card.
top Topcenter Centerbottom Bottom (default)Horizontal alignment of the front-face content.
left Left (default)center Centerright RightWhat the visitor sees on hover/tap. Same field set as Front, with slightly different defaults (back overlay is 50% black, back body text is populated by default since the back face is where the actual story lives).
The image for the back face. Reuse the front image for a subtle hover or pick a different image for a stronger reveal.
Overlay for the back face. Heavier by default than the front (50% vs 30%) so the longer body copy stays legible.
The back-face heading. Often duplicates the front heading for continuity; can be different to emphasize the reveal.
The detail copy that reveals on hover. This is the back face's reason to exist - 1-3 sentences is the sweet spot.
Reveals CTA Text + CTA Link for the back face. Pairs well with a focused back-face story ending in a single action.
Button label on the back face.
Destination for the back-face CTA.
Vertical stack position of the back-face content. Same options as front: top, center, bottom.
Horizontal alignment of the back-face content. Same options as front: left, center, right.
Wraps the entire card in a link so a click anywhere on the card navigates. Mutually exclusive with the per-side CTA buttons - if you turn this on, leave Show CTA Button off on both Front and Back to avoid nested-link warnings.
What the card links to. Drives which sub-field appears.
page Another Page, File, Email, Etc. - reveals the URL pickeranchor A Section of This Page - reveals the Anchor ID text fieldnone Nowhere (default) - card is not a linkThe destination URL. Supports External, Content, Email Address, and File link types.
Section id to scroll to (without the #). Example: about scrolls to #about on the same page.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #features) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful for page-specific overrides via custom CSS.
Everything visual: card chrome, card height (per mode), hover transition speed, filter colors, pagination alignment, badge, section dividers, and the row's background/width/spacing.
Visible only in Standard card mode. Controls card chrome (background, border, shadow), padding, image height, and the grid gap.
Fill color of the card body (the area beneath the image where heading + text sit).
Rounded corners on each card. 12px matches the theme's default tile rounding; 0 for hard corners.
Inner padding around the whole card (image + text). Defaults to 0 so the image bleeds to the card edges; raise to 8-16 to inset the image.
Padding around the heading + body text area beneath the image.
Whether each card has a visible border. Turn off for a flat, borderless tile look.
Card border color + opacity. The faint near-black default reads as a subtle hairline against most backgrounds.
Border thickness in pixels.
Adds a soft drop shadow under each card.
Color + opacity of the card drop shadow. Stay under 15% opacity for a tasteful render.
Space between cards in the grid (both row and column gap).
Fixed height of the image area at the top of each Standard card on desktop. The image is rendered as object-fit: cover inside this height.
Image area height on mobile. Smaller default keeps the card compact enough to scan in a vertical stack.
Visible only in Full Screen card mode. Controls overall card height and the padding around the overlaid content.
Fixed height of each Full Screen card on desktop.
Card height on mobile.
Padding around the heading/body/CTA stack overlaid on the image. Raise for bigger negative space; lower if you want the text to sit close to the card edge.
Duration of the hover reveal animation in seconds. 0.3-0.5s feels snappy; 0.7-1.0s feels cinematic. Applies to all Hover Effect modes (fade, slide_up, zoom, flip).
Colors for the chip-style category filter bar. Only relevant when Enable Category Filter is on.
Text color of inactive filter chips.
Text color of the currently-selected filter chip.
Background pill color of the active filter chip.
Horizontal alignment of the numbered page controls beneath the grid.
left Leftcenter Center (default)right RightStyles the <h6> inside the section heading as a pill badge.
show Show (default) - render h6 as a pillhide Hide - render h6 as a plain headingFill color of the badge pill.
Border color of the badge pill.
Text color inside the badge pill.
Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleEach divider also exposes: Divider Height (0-200px, default 80; matches the rest of the section spacing), Divider Color (set this to the background color of the adjacent section so the shape blends in), and Flip Horizontally (mirror the shape left-right).
The section's wrapping row: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountstandard Standard (uses theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Container Width number input (default 1200px)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input.