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: Show rating star, Show quote sign, and Show author 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 › Desktop / Tablet / Mobile | 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 below element | 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 › Show rating star | 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 › Show author 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 › Show rating star (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 › Show author 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: Primary, Secondary, Tertiary, Light, Dark, White, Black, White transparent, or a custom color or custom gradient (default bg-light). Image / video overlay (none / solid / gradient, plus a custom overlay color or gradient) 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-xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-xl |
| 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 / 8 presets 384px to 1152px / 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.
Frequently asked questions¶
Can I show both a photo and initials for the author?
No. Show author visual as is a single choice: none, author photo, or author initials, so only one shows per card.
What happens if a testimonial has no photo but 'Show author visual as' is set to Author photo?
Nothing shows for that author. Unlike some other modules, there's no automatic fallback to initials or a placeholder icon, so upload a photo for every testimonial once you choose the photo option.
How many testimonials can I add?
There's no limit. Testimonials is an open repeater, so add as many as your grid needs.
What rating values can I enter?
Review rating accepts 1 to 5 in steps of 0.5, so you can do whole or half stars (like 4.5) but not finer decimals like 4.3.
Can I move the quote mark to a different spot on the card?
Only its icon style is configurable (fill or stroke, pointing up or down), not its position. It always renders in the same spot relative to the top-positioned author block and the review text.
What happens if I leave 'Review rating' blank on one testimonial?
The star row still renders, just as five empty stars, rather than hiding automatically. Fill in a rating for every testimonial once Show rating star is on, or turn the setting off if some reviews shouldn't show a rating.
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.