Quote¶
A single testimonial / pull-quote block - optional subtitle pill, quote sign, star rating, person photo, quote text, author name, designation, and company logo, in a one or two column layout. Best for: featured testimonials, customer pull-quotes, review highlights, founder and leadership quotes.
📷 Hero image
Target file: assets/img/quote/hero.webp
A single featured pull-quote in a two-column layout on a Light background: a person photo on the left, and on the right a subtitle pill, a large quote sign, a star rating row, the quote text, and the author name and designation below. Draw the quote sign in the Secondary color and the filled stars in the Tertiary color. Captured at desktop width.
At a glance¶
Quote Testimonial Social proof
- What it does: renders one quote as a photo column beside a content column (or a single centered column when no photo is used). The content stacks a subtitle pill, quote sign, star rating, quote text, author name, designation, and company logo - each independently toggled and styled. The whole block can sit inside a styled content box.
- Best used for: a single spotlighted testimonial or pull-quote you want to feature, not a list of many reviews.
- Not the right fit if: you have several testimonials to show (use Testimonial - Grid or Testimonial - Slider).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Quote.
- Drag it onto your page where you want the featured quote.
- Open Click to update content › Quote and fill in the Quote text, Person name, and Person designation.
- Turn on the pieces you want: Show tag, Add quote sign, Show star rating, Show person image, and Show company logo.
- In the Style tab, set the Layout › Width column ratio and Image order if you use a photo.
- Optionally turn on Card UI to wrap it in a card.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
No photo, single centered column.
📷 Result
Target file: recipe-centered-text-only-quote.webp
A single centered column with no photo: a large quote text set in a display size, with the author name and designation centered beneath it.
| Field | Set to |
|---|---|
| Quote › Show person image | off (grid collapses to one column) |
| Layout › Content alignment › Alignment | center |
| Quote text › Show quote text as | typo-1 |
A person photo beside the testimonial.
📷 Result
Target file: recipe-photo-quote-two-column.webp
A circular person photo in the left column beside the quote text and author details in an evenly split right column.
| Field | Set to |
|---|---|
| Quote › Show person image | on |
| Layout › Width › Content x content | 1fr 1fr |
| Layout › Width › Image order | image_first |
| Person image › Round corner | round-100 |
Rating stars above an italic quote.
📷 Result
Target file: recipe-star-rated-review.webp
A row of five filled rating stars sitting above an italicized quote text, with the author details below.
| Field | Set to |
|---|---|
| Quote › Show star rating | on |
| Quote › Rating (out of 5) | 5 |
| Quote text › Italic style | on |
Content wrapped in a styled box with a border and shadow.
📷 Result
Target file: recipe-boxed-testimonial-card.webp
The full quote wrapped inside a bordered, shadowed, rounded content box that sets it apart from the section background.
| Field | Set to |
|---|---|
| Style › Card UI | on |
| Card UI settings › Background › Background | custom_color |
| Card UI settings › Border › Show border | on |
| Card UI settings › Shadow › Shadow | regular-shadow |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Quote without a photo | Quote › Show person image off (grid collapses to one column) |
| Photo on the right | Layout › Width › Image order = text first |
| Circular avatar | Person image › Round corner = round-100 |
| Add a star rating | Quote › Show star rating + Rating (out of 5) |
| Big quotation mark | Quote › Add quote sign (right/left, fill/outline) |
| Italic testimonial | Quote text › Italic style |
| Eyebrow label above quote | Quote › Show tag + Tag (+ icon) |
| Wrap in a card | Style › Card UI |
| Image-filled card | Card UI settings › Background › Background = image (+ overlay + parallax) |
| Glass-effect box | Card UI settings › Background › Add blur in background |
| Adjust column ratio | Layout › Width › Content x content (e.g. 3fr 2fr) |
| Stack columns sooner | Layout › Width › Responsive breakpoint for stacking |
| Image below text on mobile | Layout › Width › Image below text [mobile] |
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. (226 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 - Quote
| Field | Type | Default |
|---|---|---|
| Show tag / Tag | boolean / text | off / Testimonial |
| Add icon to tag / Tag icon | boolean / icon | off / Star (SOLID) |
| Icon position | choice (before / after) | before |
| Add quote sign | choice (none / right-left, fill/outline) | none |
| Show star rating / Rating (out of 5) | boolean / choice (1 to 5) | off / 5 |
| Show person image / Person image | boolean / image | on |
| Show quote text / Quote text | boolean / text | on |
| Show person name / Person name | boolean / text | on |
| Show person designation / Person Designation | boolean / text | on |
| Show company logo / Company logo | boolean / image | on |
Turning Show person image off collapses the grid to a single column.
Drag to section name / Developer use only
- Section name: custom anchor name for in-page links.
- ARIA label: accessible section label announced by screen readers (default "Testimonial").
- 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
- Content alignment: center / left / right (default
left). - Width › Content x content: desktop column ratio (
1fr 1fr,2fr 3fr,3fr 2fr,3fr 7fr,7fr 3fr, or1fr). - Width › Responsive breakpoint for stacking: where the columns stack (
tablet_mini/tablet_max). - Width › Image order:
image_firstortext_first. - Width › Image below text on mobile: reverses the stack on mobile.
- Vertical alignment: items-start / center / end.
- Gap between column: responsive gap (default 24 each).
- Section wrapper container / Inner content container: width + alignment control.
Preset Settings (key groups)
- Subtitle: background (color/gradient), border, padding, round corner (default
round-xxl), transform, color, font size, icon size, gap, bold. - Quote sign: color (default
text-secondary), size, stroke width (for outline styles), spacing. - Star rating: filled color (default
text-tertiary), empty color, star size, gap, spacing. - Person image: round corner (incl.
round-100), aspect ratio crop, custom per-screen width, shadow, focal position, spacing. - Quote text: heading/typo/custom size (default
typo-1), color, italic, transform, letter spacing, bold, spacing. - Person name / designation: tag/typo/custom size, color, transform, letter spacing, bold, spacing.
- Company logo: desktop and mobile width.
Card UI settings
| Field | Type | Default |
|---|---|---|
| Card UI | boolean | on |
| Background › Background | choice (none / color / gradient / image) | none |
| Background › Add blur in background | boolean (glass effect) | off |
| Background › Add parallax | boolean (image only) | off |
| Spacing | responsive | 60 / 44 / 32 px |
| Border | toggle + width + color | off |
| Roundness › Round corner | round-0 to round-xxl / custom | round-l |
| Shadow › Shadow | none / regular / dark / light | regular-shadow |
Tips & gotchas¶
No photo, one column
Leaving Show person image off automatically collapses the two-column grid into a single centered column - ideal for a clean text-only quote.
Parallax needs an image background
The content box Add parallax option only does anything when the box Background › Style is set to image.
Set an ARIA label
The Accessibility label field (default "Testimonial") is announced by screen readers. Give it a descriptive value when the quote sits in a page with several similar sections.
Frequently asked questions¶
Are the quote sign's side and fill/outline separate settings?
No, they're one field. Add quote sign is a single dropdown: No quote sign, Right fill, Left fill, Right outline, or Left outline.
Can I bold or link part of the quote text?
No. Quote text is a plain multi-line text field, not rich text, so it can't hold mixed formatting or links. Italic style in Preset Settings applies to the whole quote at once.
Can the star rating show half stars, like 4.5?
No. Rating (out of 5) is a whole-number dropdown from 1 to 5 star.
Can I show two quotes side by side in this module?
No, one instance renders exactly one quote. For more than one, use Testimonial - Grid or Testimonial - Slider instead.
Can I make the company logo clickable?
No. Company logo is a plain image field with no link option.
Related modules¶
- Testimonial - Grid: many testimonials laid out in a static grid.
- Testimonial - Slider: a rotating carousel of testimonial cards.
- Call to Action: pair a featured quote with a nearby conversion prompt.