Skip to content

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

  1. In the HubSpot page editor, click Add and search for Quote.
  2. Drag it onto your page where you want the featured quote.
  3. Open Click to update content › Quote and fill in the Quote text, Person name, and Person designation.
  4. Turn on the pieces you want: Show subtitle, Add quote sign, Show star rating, Show person image, and Show company logo.
  5. In the Style tab, set the Layout › Width column ratio and Image order if you use a photo.
  6. Optionally turn on Content box › Make a box around content 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
Content box › Make a box around content on
Content box › Background › Style color
Content box › Border › Show Border on
Content box › Shadow › Choose 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 subtitle + Subtitle text (+ icon)
Wrap in a card Content box › Make a box around content
Image-filled card Content box › Background › Style = image (+ overlay + parallax)
Glass-effect box Content box › 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 on 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 subtitle / Subtitle text boolean / text off / Testimonial
Add icon to subtitle / Subtitle 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 off
Show quote text / Quote text boolean / text off
Show person name / Person name boolean / text off
Show person designation / Person Designation boolean / text off
Show company logo / Company logo boolean / image off

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 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
  • Content alignment: center / left / right (default left).
  • Width › Content x content: desktop column ratio (1fr 1fr, 2fr 3fr, 3fr 2fr, 3fr 7fr, 7fr 3fr, or 1fr).
  • Width › Responsive breakpoint for stacking: where the columns stack (tablet_mini / tablet_max).
  • Width › Image order: image_first or text_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.
Content box
Field Type Default
Make a box around content boolean off
Background › Style 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 › Choose 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 ARIA 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.