Testimonial - Grid¶
A responsive grid of testimonial cards - review text, optional star rating, quote mark, company logo, and an author block (photo or initials, name, designation). Best for: social proof sections, customer review walls, "what our clients say", case-study quote grids.
📷 Hero image
Target file: assets/img/testimonial-grid/hero.webp
A three-column grid of testimonial cards on a Light background, each a bordered, softly shadowed, rounded card holding a quote mark, a short review paragraph, a row of star ratings, and an author block with a circular photo, name, and designation at the bottom. Draw the filled stars and quote mark in the Primary color. Captured at desktop width.
At a glance¶
Testimonials Social proof Grid
- What it does: lays out a column grid (set per breakpoint) of testimonials. Each card can show a company logo, star rating, quote mark, review text, and an author block (photo, auto-initials badge, or nothing).
- Best used for: a static wall of reviews where every testimonial is visible at once - homepages, landing pages, and case-study pages.
- Not the right fit if: you want testimonials to rotate in a carousel (use Testimonial - Slider) or you only need one featured pull-quote (use Quote).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Testimonial - Grid.
- Drag it onto your page where you want the reviews to appear.
- Open Click to update content › Testimonials and add each review (name, designation, review text, and optionally a photo or logo).
- Turn on the pieces you want: Add review ratings, Show quote sign, and Do you want to add company logo?.
- Pick Show author visual as (
none/ author photo / author initials). - In the Style tab, set Layout › Columns per breakpoint and, if you want cards, turn on Card › Make a card.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Bordered, shadowed cards, three across on desktop.
📷 Result
Target file: recipe-card-grid-3-up.webp
Three bordered, softly shadowed, rounded testimonial cards side by side, each with review text and an author block.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Shadow › Card shadow | light-shadow |
| Card › Round corner › Card round corner | round-m |
| Layout › Columns › Large / Medium / Small | 3 / 2 / 1 |
Flat, stacked testimonial content with no card chrome.
📷 Result
Target file: recipe-plain-grid-no-card.webp
Center-aligned testimonial content stacked in a grid with no borders, backgrounds, or shadows, the review and author block sitting flat on the section background.
| Field | Set to |
|---|---|
| Card › Make a card | off |
| Card › Alignment › Content alignment | center |
| Elements › Author review › Spacing under element | sb-m |
Star rating on top, quote and review below.
📷 Result
Target file: recipe-rated-reviews.webp
Each card led by a row of stars at the top, including a half star for a decimal rating, with the quote mark and review text below. Filled stars in the Primary color.
| Field | Set to |
|---|---|
| Content › Add review ratings | on |
| Testimonials › Review rating | 4.5 (decimals show half stars) |
| Elements › Rating star › Rating star at | top |
Company logo up top, author block anchored at the bottom.
📷 Result
Target file: recipe-logo-led-card.webp
Each card topped by a grayscale company logo, with the review in the middle and the author block anchored at the bottom of the card.
| Field | Set to |
|---|---|
| Content › Do you want to add company logo? | on |
| Elements › Author company logo › Author logo at | top |
| Elements › Testimonial bottom › Element at | bottom |
| Elements › Author company logo › Add grayscale effect on logo | on |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Show as cards | Card › Make a card (+ background / border / shadow) |
| 3-up desktop / 2-up tablet / 1-up mobile | Layout › Columns = 3 / 2 / 1 |
| Show star ratings | Content › Add review ratings (rating per testimonial) |
| Half-star ratings | Set a decimal review rating (e.g. 4.5) |
| Show a quote mark | Content › Show quote sign + pick a quote style |
| Show company logos | Content › Do you want to add company logo? |
| Fade logos to gray | Author company logo › Add grayscale effect on logo |
| Use initials instead of a photo | Content › Show author visual as = Author initials |
| No author visual at all | Content › Show author visual as = None |
| Circular author photos | Author photo › Round corner = round-100 |
| Author block above the review | Testimonial bottom › Element at = Top |
| Stack author photo over details | Testimonial bottom › Arrangement = Column |
| Center-align card content | Card › Alignment › Content alignment = Center |
| Put stars / logo at the bottom | Rating star / Author company logo › "at" = Bottom |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (188 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 quote sign | boolean | off |
| Quote sign | choice (fill/stroke, top/down) | top_stroke |
| Do you want to add company logo? | boolean | off |
| Add review ratings | boolean | off |
| Show author visual as | choice (none / photo / initials) | none |
Testimonials (repeater, per item): Author name, Author designation, Company logo, Author photo, Review text (rich text), Review rating (number, half-stars supported).
Drag to section name / Developer use only
- Section name: custom anchor name for in-page links.
- Add custom css here: per-module CSS injection field.
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 token (default bg-white), gradient (bg-gradient-1 to 3), image / video overlay (none / bg-overlay-1 to 6) and position, optional blur, parallax (scale + speed), and dual radial glows (color, position, size, opacity - defaults secondary and tertiary).
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
- Columns: per-breakpoint count (default 3 / 2 / 1).
- Gap between column: per-breakpoint gap (default 24 each).
- Section wrapper container: default / full-width / custom (per breakpoint) + block alignment.
- Inner content container: independent inner width + alignment.
Card
| Field | Type | Default |
|---|---|---|
| Alignment › Content alignment | choice (left / center / right) | left |
| Make a card | boolean | off |
| Background | choice (token / gradient / custom) + optional blur | none |
| Border | toggle + width + token/custom color | off |
| Card padding | responsive spacing | 24px all |
| Shadow | none / light / regular / dark | shadow-none |
| Round corner | round-0 to round-xxl / custom | round-s |
Background, border, padding, shadow, and round corner only apply when Make a card is on.
Preset Settings (key groups)
Each element has its own typography, color, and spacing controls:
- Author name / designation: tag or preset (or custom per-screen size), color, bold, spacing.
- Author review: preset or custom size, color, spacing.
- Author photo: width x height (desktop / mobile), round corner (incl.
round-100circle). - Author initials: size, round corner, background (color/gradient, default
bg-primary), text color, font size, bold. - Testimonial bottom: arrangement (row / column), gap, Element at (top / bottom), vertical alignment.
- Rating star: fill / blank color, star size, gap, Rating star at (top / bottom).
- Quote sign: color (default
text-primary), size, spacing. - Author company logo: spacing, max logo width (%), grayscale toggle, Author logo at (top / bottom).
Tips & gotchas¶
Half stars are automatic
Set a decimal Review rating like 4.5 and the star row renders a half star. No extra field needed.
Card styling needs the card on
Background, border, padding, shadow, and round corner in the Card group only take effect when Make a card is turned on. With it off, testimonials show as plain stacked content.
Content alignment drives everything
Card › Alignment › Content alignment sets the alignment of the logo, quote, stars, and author block together. Set it once rather than per element.
Related modules¶
- Testimonial - Slider: the same testimonial cards in a rotating carousel for tight spaces.
- Quote: a single featured pull-quote with a photo column and content box.
- Logo Grid: just the customer logos, without review text.