Content Card¶
A grid or slider of content cards: each with an image, icon, or number lead, plus optional tag, title, description, and button or link. Best for: feature lists, service cards, "how it works" steps, value props, category tiles, and image-overlay galleries.
📷 Hero image
Target file: assets/img/content-card/hero.webp
A three-up grid of content cards on a Light background. Each card leads with an image on top, then a title and a short paragraph, with a simple link or Primary button at the bottom. Show all three cards evenly spaced with rounded corners and a soft shadow. Captured at desktop width.
At a glance¶
Cards Grid or slider Repeater
- What it does: renders a repeater of cards as a responsive grid or a Splide slider. Each card leads with an image, an icon, or a big number, followed by an optional tag, a title, a rich-text description, and a button or plain link. Cards come in Simple (image on top) or Overlay (image as full background) styles.
- Best used for: a 3-up feature grid, icon service cards, numbered "how it works" steps, an image-overlay gallery, or a carousel of highlights.
- Not the right fit if: you only need images with captions or a lightbox (use Image Box), or a single text block (use Content).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Content Card.
- Drag it onto your page.
- Open Click to update content and choose the View (grid or slider) and Card style (simple or overlay).
- Set Want to add image or icon or number? to pick each card's lead element.
- Add cards in the Content cards repeater, filling in the lead, tag, title, description, and button.
- Use the Style tab to size columns, style the card wrapper, and configure the slider.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Image-on-top cards, three across.
📷 Result
Target file: recipe-simple-image-grid.webp
Three image-on-top cards in a row, each with a title and short description below the image. Capture all three at desktop width so the grid is even.
| Field | Set to |
|---|---|
| Content › View | grid |
| Content › Card style | simple |
| Content › Want to add image or icon or number? | image |
| Layout › Columns › Desktop | 3 |
Icon lead with a colored background shape.
📷 Result
Target file: recipe-icon-feature-cards.webp
Cards each leading with an icon on a rounded Primary background chip, followed by a title and description, wrapped in a bordered card. Capture the row at desktop width.
| Field | Set to |
|---|---|
| Content › Want to add image or icon or number? | icon |
| Elements › Icon › Icon background | bg-primary |
| Elements › Icon › Border radius | round-l |
| Card › Simple card › Make a card | on |
Big number lead for a "how it works" sequence.
📷 Result
Target file: recipe-numbered-steps.webp
Cards each led by a big step number hanging at the top-left corner in a faded watermark style, with a title and description beside it. Capture the sequence at desktop width.
| Field | Set to |
|---|---|
| Content › Want to add image or icon or number? | number |
| Elements › Number › Placement of number | hang_at_top_left |
| Elements › Number › Text opacity | lower value for a watermark look |
Image as a full background with text on top.
📷 Result
Target file: recipe-overlay-gallery.webp
Cards where the image fills the whole tile as a background with a dark overlay tint, and the title and text sit over it at the bottom. Capture the row at desktop width.
| Field | Set to |
|---|---|
| Content › Card style | overlay |
| Card › Overlay card › Overlay | Default (scheme) |
| Card › Overlay card › Vertical content position | bottom |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Switch to a carousel | Content › View = slider |
| Image-as-background tiles | Content › Card style = overlay |
| Lead with an icon | Content › Want to add image or icon or number? = icon |
| Lead with a big number | Content › Want to add image or icon or number? = number |
| Add a pill tag | Content › Show tag + per-card Tag text |
| Make the whole card clickable | Content › Want to add a click on full card? |
| Custom SVG icon per card | Card › Icon type = Add SVG code |
| Equal-height cards, CTA at bottom | Layout › Make card same height |
| Bordered / shadowed cards | Card › Simple card › Make a card + Border + Shadow |
| Hang the number in the top corner | Number › Placement of number = hang_at_top_left |
| Arrows outside the track | Slider arrows › Arrow location › Arrangement = outside_slider |
| Auto-advancing carousel | Slider › Advanced › Slider functionality = autoplay (+ Type = loop) |
| Full-width button on mobile | Button › Make button full width [mobile] |
| Overlay text at the bottom | Overlay card › Vertical content position = bottom |
Field reference¶
The editor has a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (270 fields total - expand each group as needed.)
Content tab¶
Click to update content
| Field | Type | Default |
|---|---|---|
| View | choice (grid / slider) | grid |
| Card style | choice (simple / overlay) | simple |
| Want to add tag? | boolean | off |
| Want to add a click on full card? | boolean | off |
| Want to add image or icon or number? | choice (none / image / icon / number) | image |
Content cards (repeater, per card): Image, Icon type (hubspot / upload / add_svg_code) + source, Number, Tag, Title, Description, Add button. Button: Title, Style (btn-1 to btn-8 or simple_link, default simple_link), Link, optional Icon.
Drag to section name
Section name: sets this section's ID for scroll-to-section links.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
Color / gradient / image / video (with overlay + position), blur, parallax, and dual radial glows (color, position, size, opacity).
Section divider settings
Divider type: none / shape / border / shadow, with border (top / bottom / both, width, color), shadow (x / y / blur / spread / color), and shape (25 shapes, flip / invert, color / gradient, responsive heights).
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-xl |
| Left | left-x-0 to left-xl | left-m |
| Right | right-x-0 to right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Columns: cards per row for large / medium / small screens (default 3 / 2 / 1).
- Make card same height: force every card to fill the row / slide height with the CTA anchored to the bottom.
- Slide move and Gap between column: per-breakpoint slides-per-move and column gap.
- Section wrapper container and Inner content container: width + alignment control.
Card
- Alignment: content alignment
left/right/center. - Simple card: Make a card, background (color / gradient / glass blur), border, responsive padding, shadow (
shadow-none/ regular / light / dark), round corner. - Overlay card: overlay tint (preset / custom color / custom gradient), content padding, shadow, round corner, and Vertical content position (top / center / bottom).
Slider settings
- Slider navigation:
none/dots/arrows/both(defaultdots). - Slider arrows: custom icons, background, icon color, border, round corner, spacing, size, inside vs outside placement.
- Slider dots: width / height, round corner, separate simple and active states.
- Advanced settings: Type (
loop/slide), Slider functionality (simple/autoplay), autoplay interval.
Preset Settings
- Image: aspect ratio (10 presets) or full-width custom height, round corner.
- Icon: background (color / gradient / glass blur), icon color, size, padding, roundness, border, spacing.
- Number: color / gradient + opacity, preset or custom font sizes, font family, bold,
at_topvshang_at_top_leftplacement with offsets. - Tag: heading / custom size, letter spacing, padding, round corner, border, text color, background.
- Title: heading tag (h1-h6, default
h5), transform, color, spacing. - Description: typo style, color, spacing.
- Button: Simple link (color, underline + offset, bold, icon size, icon gap) or Button (icon-text gap, full-width on mobile).
Developer use only
Add custom css here: per-module CSS injection field.
Tips & gotchas¶
Round corner missing after turning Card UI off?
Card style and Spacing applied on only appear while Card UI is checked, and HubSpot keeps their last values when they are hidden. So if you set Card style to Overlay (or spacing to Content only) and then switch Card UI off, those stored values still apply, and Round corner stays hidden with no card left to set it on.
To get it back: turn Card UI back on, set Card style to Simple and Spacing applied on to Whole card, then switch Card UI off again.
This is a HubSpot limitation, not a theme bug: a field can only be shown or hidden by a flat list of conditions, and this case needs a nested one.
One lead element per card set
Want to add image or icon or number? applies to every card in the module. Only the chosen lead type renders, so plan your card set around one style (all images, all icons, or all numbers).
Whole-card click turns the button into text
When Want to add a click on full card? is on, the per-card button shows as plain text (the entire card is the link). Leave it off if you want a separate, tappable button.
Two ways to equal heights
Both Layout › Make card same height and Simple card › Make a slider same height force equal heights. Use one to avoid overlap; the layout-level toggle also anchors the CTA to the bottom.
Frequently asked questions¶
Is there a limit on how many cards I can add?
No. The Content cards repeater has no maximum occurrence set, so you can add as many as your layout needs. Columns still controls how many sit per row on grid view, and Slide move controls how many advance per swipe on slider view.
Is there a continuous marquee-style scroll, or only autoplay?
Both. Slider settings › Advanced settings › Slider functionality has three options: Simple (manual), Autoplay (auto-advances slide by slide), and Auto scroll (a continuous marquee-style motion).
Why can't I find the Slide move setting?
Slide move only appears once Content › View is set to slider. It's hidden entirely on grid view, since there's nothing to "slide" through.
Can I fine-tune exactly where a hanging number sits?
Yes, but only in hanging mode. When Number › Placement of number is set to hang_at_top_left, separate Distance from top / right percentage offsets appear for desktop and mobile, so you can nudge the number's position per breakpoint.
Related modules¶
- Image Box: for image galleries with captions, badges, and lightbox zoom.
- Content and Media: a single content column beside a media column.
- Features: feature lists built around icons and short descriptions.
- Portfolio: project / case-study tiles with filtering.