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 › Large screen | 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 › Roundness of icon | 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 style | bg-overlay-1 |
| Card › Overlay card › Vertical 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 › Want to add 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 a button width full in mobile |
| Overlay text at the bottom | Overlay card › Vertical position = bottom |
Field reference¶
The editor has a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (269 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-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| 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 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, 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, hover color, font, icon, underline, bold) or Button (icon-text gap, full-width on mobile).
Developer use only
Add custom css here: per-module CSS injection field.
Tips & gotchas¶
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.
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.