Logo Grid¶
A responsive grid of client or partner logos, with an optional header, per-logo links, hover effects, and card or single-border layouts. Best for: "Trusted by" / "As seen in" logo walls, partner and client showcases, integration and brand strips.
📷 Hero image
Target file: assets/img/logo-grid/hero.webp
A responsive grid of client and partner logos laid out in even rows on a Light background, with a small "Trusted by" pill in the Primary color and a short title centered above them. Show the logos in a muted greyscale so the row reads as one calm social-proof band. Every logo stays visible at once, evenly spaced across columns. Captured at desktop width.
At a glance¶
Social proof Grid Logos
- What it does: renders a column-based grid (set per breakpoint) of uploaded logos. Each logo can be sized, aligned, and wrapped in a link, with an optional subtitle-plus-title header above or below.
- Best used for: a static wall of brand logos where every logo stays visible at once - client rosters, press mentions, integration partners.
- Not the right fit if: you want the logos to move or scroll continuously (use Logo Slider), or you need a numbers/stats block (use Counter).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Logo Grid.
- Drag it onto your page, usually just under the hero or in a social-proof band.
- Open Click to update content › Logos and upload each logo image.
- (Optional) Turn on Apply a link on logo for any logo that should link out.
- (Optional) Turn on Show subtitle and Show title to add a header, then set Title position to top or bottom.
- In the Style tab, set the Columns per breakpoint and pick a look under Card or Layout settings.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Greyscale logos on a clean row that color up on hover.
📷 Result
Target file: recipe-plain-logo-strip.webp
A single clean row of greyscale logos on a Light background with no card boxes. Show one logo mid-hover in full color to hint at the reveal effect.
| Field | Set to |
|---|---|
| Card › Make a card | off |
| Logo › Hover effect › Logo effect on hover | remove_grayscale |
| Logo › Hover effect › Idle opacity | 100 |
| Layout › Columns | 4 / 2 / 1 |
A "Trusted by" pill and title above the logos.
📷 Result
Target file: recipe-header-grid.webp
A centered "Trusted by" pill in the Primary color with a bold title beneath it, sitting above the logo grid. Capture the header and the first row of logos together.
| Field | Set to |
|---|---|
| Content › Show subtitle | on |
| Content › Show title | on |
| Content › Title position | top |
| Layout › Alignment › Header alignment | center |
Each logo sits in a bordered, padded card.
📷 Result
Target file: recipe-card-style.webp
Each logo centered inside its own bordered, padded card with rounded corners and a light shadow, arranged in a tidy grid on a Light background.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Shadow › Card shadow | light-shadow |
| Card › Round corner › Card round corner | round-m |
Connected cells sharing one clean border grid.
📷 Result
Target file: recipe-single-border-table.webp
Logos in a connected table-style grid where every cell shares one continuous thin border, with zero gap between columns. The result looks like a single unified frame divided into logo cells.
| Field | Set to |
|---|---|
| Layout › Single border layout | on |
| Layout › Gap between column | 0 |
| Card › Make a card | off |
| Layout › Border Style › Border color | --color-1 |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Greyscale logos that color on hover | Logo › Hover effect › Remove grayscale |
| Logos that grow on hover | Logo › Hover effect › Increase scale |
| Add a "Trusted by" label | Content › Show subtitle + Subtitle text |
| Put the title below the logos | Content › Title position = bottom |
| Connected table-style grid | Layout › Single border layout (gap 0, card off) |
| Faded grid edges | Layout › Add mask at both corner (gap 0, card off) |
| Logos in cards | Card › Make a card + background / border / shadow |
| Size logos by height instead of width | Logo › Logo dimension basis = height |
| 4-up desktop / 2-up tablet / 1-up mobile | Layout › Columns = 4 / 2 / 1 |
| Link each logo to a site | Content › Logos › Apply a link on logo + Link |
| Grey the logos out until hovered | Preset Settings › Logo effect on hover = remove_grayscale |
Field reference¶
The editor is split into a Content tab and a Style tab. Groups below match the HubSpot editor. (168 fields total - expand each group as needed.)
Content tab¶
Section background settings
| Field | Type | Options | Default |
|---|---|---|---|
| Type | choice | none / color / gradient / image / video | none |
| Upload background image | image | - | - |
| Video | file | - | - |
Click to update content
| Field | Type | Default |
|---|---|---|
| Show subtitle | boolean | off |
| Subtitle | text | Trusted by |
| Show title | boolean | off |
| Title | text | Industry leaders building with our platform |
| Title position | choice (top / bottom) | top |
Logos (repeater) - per item: Logo (image), Apply a link on logo (boolean, off), Link (link).
Drag to section name
Section name (text): sets the section ID so scroll-to-section buttons elsewhere can link here.
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
Background color (bg-primary to bg-color-3, default bg-white) or gradient (bg-gradient-1 to 3). Image / video overlay style (none / bg-overlay-1 to 6) and position. Optional blur, parallax (scale / speed), and up to two radial glows each with color (token or custom), position (9 spots), size, and opacity.
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top / bottom / both, width, color (default
--tertiary). - Shadow divider: regular / light / dark / custom with x / y / blur / spread / color.
- Shape divider: 25 shapes, top / bottom / both, flip / invert, color or 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 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / 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
| Field | Type | Default |
|---|---|---|
| Header alignment | choice (left / center / right) | center |
| Columns [large / medium / small] | number | 3 / 2 / 1 |
| Gap between column [large / medium / small] | number | 24 / 24 / 24 |
| Gap between row [large / medium / small] | number | 24 / 24 / 24 |
| Single border layout | boolean | off |
| Add mask at both corner | boolean | off |
Plus Section wrapper container and Inner content container (default / full-width / custom per breakpoint + alignment), and a Border Style group (width, color default --color-1) for the single-border layout.
Card
| Field | Type | Default |
|---|---|---|
| Make a card | boolean | off |
| Background | choice (none / tokens / gradient / custom) | none |
| Show border | boolean | off |
| Card padding [large / medium / small] | spacing | 24px all |
| Card shadow | choice | shadow-none |
| Card round corner | choice (round-0 to round-xxl / custom) | round-s |
Background also supports an optional backdrop blur (glass effect) with adjustable radius.
Preset Settings - Subtitle & Title
Subtitle (pill): spacing, background (token / gradient / custom), text transform (default uppercase), color, padding, round corner (default round-xxl), optional border, responsive font sizes, bold.
Title: show as h3 to h6 (default h5), color (default / custom_color / custom_gradient), text transform, make font bold, spacing below element. The title has no per breakpoint font size fields; the responsive sizes (14 / 13) belong to the Subtitle pill.
Preset Settings - Logo
| Field | Type | Default |
|---|---|---|
| Logo dimension basis | choice (width / height / none) | width |
| Logo width | number | 120 |
| Logo height | number | 80 |
| Logo alignment | choice (left / center / right) | center |
| Logo effect on hover | choice (none / remove_grayscale / increase_scale) | remove_grayscale |
| Idle opacity | number | 100 |
| Scaling on hover | number | 1.05 |
Both mobile width and mobile height overrides are available; leave empty to inherit the desktop value.
Developer use only
Add custom CSS here: per-module CSS injection field.
Tips & gotchas¶
Single-border layout needs the right setup
For the connected table look, set the column gap to 0 and keep Make a card off. The same applies to Add mask at both corner - it only reads cleanly on a gap-0, card-off grid.
Sizing by height can distort logos
Logo dimension basis = height forces a fixed height, which can crop or stretch logos of different shapes. If your logos vary a lot, size by width instead so each keeps its natural proportions.
Idle opacity vs scaling
Idle opacity only applies to the greyscale reveal effect, and Scaling on hover only applies to the scale effect. Setting one has no effect on the other hover mode.
Related modules¶
- Logo Slider: the same logos as a moving carousel or marquee instead of a static grid.
- Counter: animated stat numbers for a "by the numbers" band near your logos.
- Features: icon-led feature cards when each item needs a title and description, not just a logo.
- Section Title: a standalone heading block to introduce your logo wall.