Skip to content

Image Box

A grid or slider of images, each with an optional badge plus title / description / link shown as an overlay or a caption, and an optional click action (open a link or zoom in a lightbox). Best for: image galleries, portfolios, feature / service tiles, lookbooks, photo carousels.

📷 Hero image

Target file: assets/img/image-box/hero.webp

A three-across grid of square gallery images on a Light background, evenly spaced with rounded corners. Show a small corner badge on at least one tile and a magnifier zoom icon affordance to signal the lightbox. Captured at desktop width.

At a glance

Gallery Grid or slider Lightbox

  • What it does: renders a repeater of images as a responsive grid or a Splide slider. Each image can carry a corner badge and a content block (title / description / link) shown as an overlay on the image or a caption below it. On click, an image can do nothing, follow a link, or open in a lightbox popup.
  • Best used for: a portfolio or lookbook grid, a photo carousel, clickable tiles, or an overlay-on-hover gallery with badges.
  • Not the right fit if: each item needs a full text block and button (use Content Card), or you want text beside one image (use Content and Media).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. In the HubSpot page editor, click Add and search for Image Box.
  2. Drag it onto your page.
  3. Open Click to update content and choose the View (grid or slider) and the click behaviour (What do you prefer on image click?).
  4. Decide Want to add content on image? (on = overlay, off = caption below).
  5. Add images in the Images repeater, with badge, title, description, and link per item.
  6. Use the Style tab to set image sizing, badge look, overlay tint, and slider chrome.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

A clean grid where each image zooms in a popup.

📷 Result

Target file: recipe-lightbox-gallery.webp

A clean grid of square images with a magnifier zoom icon on each tile and no captions. Capture the grid at desktop width so the even columns and zoom affordance are visible.

Field Set to
Content › View grid
Content › What do you prefer on image click? zoom_image_in_popup
Content › Want to add content on image? off
Image › Ratio of image aspect-1by1

Images with a title and description below, wrapped in cards.

📷 Result

Target file: recipe-caption-cards.webp

Images each wrapped in a card with a title and description in the caption area below, and a soft shadow around each card. Capture the grid at desktop width.

Field Set to
Content › Want to add content on image? off (caption mode)
Card › Simple card › Make a card on
Card › Simple card › Card shadow regular-shadow

Text reveals only when a tile is hovered.

📷 Result

Target file: recipe-overlay-on-hover.webp

A gallery tile mid-hover, with the title and description revealed over the image under a dark overlay tint while the neighbouring tiles stay plain. Capture at desktop width so the hover reveal is clear.

Field Set to
Content › Want to add content on image? on
Card › Overlay card › Overlay reveal hover
Card › Overlay card › Overlay style bg-overlay-1

A continuous loop with faded edges.

📷 Result

Target file: recipe-auto-scroll-marquee.webp

A single row of images scrolling continuously, with the left and right edges softly faded by the mask. Capture at desktop width so the faded corners and the marquee row are visible.

Field Set to
Content › View slider
Slider › Advanced › Slider functionality auto_scroll (Type = loop)
Slider › Add mask at both corner on

"I want to..." quick reference

Goal Setting
Carousel instead of grid Content › View = slider
Click image to enlarge Content › What do you prefer on image click? = zoom_image_in_popup
Make each image a link Content › What do you prefer on image click? = attach_link
Content on top of the image Content › Want to add content on image? = on
Content below the image Content › Want to add content on image? = off (caption mode)
Reveal text only on hover Card › Overlay card › Overlay reveal = hover
Wrap captioned images in cards Card › Simple card › Make a card (grid + caption mode)
Add a corner label Content › Add badge + per item Badge label
Hide the magnifier icon Content › Show zoom icon affordance = off
Square / portrait images Image › Ratio of image (aspect-1by1 / 9by16 etc.)
Fixed pixel-height images Image › Ratio = custom_height + Height [desktop / tablet / mobile]
Image zooms on hover Image › Zoom image on hover + Zoom scale on hover
Continuous auto-scroll Slider › Advanced › Slider functionality = auto_scroll (Type = loop)
Fade slider edges Slider › Add mask at both corner + Mask fade distance
Peek next / prev slides Slider › Advanced › Show all slides in viewport

Field reference

The editor has a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (262 fields total - expand each group as needed.)

Content tab

Click to update content
Field Type Default
View choice (grid / slider) grid
What do you prefer on image click? choice (no_action / attach_link / zoom_image_in_popup) zoom_image_in_popup
Show zoom icon affordance boolean on
Want to add content on image? boolean off
Add badge / title / description / link (overlay + caption toggles) boolean on

Images (repeater, per item): Image, Badge label, Title, Description, Link + Link title, plus separate Caption title / description / link / link title.

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 (overlay + position), blur, parallax, and dual radial glows (color, position, size, opacity).

Section divider settings

Divider type: none / shape / border / shadow, with border, shadow, and 25-shape options (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: images per row for large / medium / small screens (default 3 / 3 / 1).
  • Slide move and Gap between column: per-breakpoint slides-per-move and gap.
  • Section wrapper container and Inner content container: width + alignment.
Card (grid + caption mode)
  • Alignment: content alignment left / right / center.
  • Simple card: Make a card, background (color / gradient / glass blur), border, responsive padding, shadow, round corner.
  • Overlay card: overlay reveal (always / hover), overlay style, height (hug content / full height), content padding, shadow.
Slider settings
  • Slider navigation: none / dots / arrows / both (default dots).
  • Slider arrows: custom icons, background, icon color, border, round corner, spacing, size, inside vs outside.
  • Slider dots: width / height, round corner, separate simple and active states.
  • Advanced settings: Type (loop / slide), functionality (simple / autoplay / auto_scroll), speed, direction, peek slides.
  • Edge mask: fade the slider edges with an adjustable fade distance.
Preset Settings
  • Image: aspect ratio (9 presets) or custom height per breakpoint, focal point, round corner, hover zoom + scale, caption gap.
  • Badge: position (top-left / top-right), background, text color, padding, round corner, border, font size, bold, transform.
  • Zoom icon: position, background, blur, border, size, hover scale (shown in popup mode).
  • Title: heading tag or custom size (desktop / tablet / mobile), color incl. gradient, transform, spacing.
  • Description: typo style, color, spacing.
  • Link: color, font family, bold, optional icon, icon gap, underline + offset, spacing.
Developer use only

Add custom css here: per-module CSS injection field.

Tips & gotchas

Overlay vs caption is one toggle

Want to add content on image? decides everything: on places the title / description / link as an overlay on the image; off places them as a caption below. Each mode has its own toggles and styling group.

Auto-scroll wants clean edges

For a smooth auto_scroll marquee, set Type of slider to loop and remove pagination dots. Add the edge mask so slides fade in and out at the corners instead of cutting off sharply.

Zoom icon only shows in popup mode

The magnifier affordance (Show zoom icon affordance) appears when image click is set to zoom_image_in_popup. It does nothing in attach-link or no-action modes.