v5 · block
Testimonial
A single-quote testimonial. Quote-mark, large bold quote text, and an attribution line. With image: circular portrait sits beside the blockquote. Without image: the blockquote sits on a soft tinted card.
Canonical render
hue="blue", with portrait.
Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Layouts
Image presence drives the layout. With image: side-by-side. Without image: blockquote on tinted card.
Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Hues (tinted card)
data-hue drives the quote-mark color and (in the
no-image layout) the card tint.
hue="blue"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="aqua"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="earth"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="green"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="magenta"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="purple"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Hues (with portrait)
With portrait, the hue only colors the quote-mark — no card tint.
hue="blue"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="aqua"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="earth"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="green"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="magenta"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
hue="purple"Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Attribution pieces
Author / title / company each drop independently.
Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
Indeed's platform is so easy to use. We've hired about 35–40 people on Indeed in the past two years.
When to use
- One testimonial near a decision point — pricing, contact, sign-up.
- When a single human voice carries more weight than a row of three.
- Pair with a portrait if you have one that's portrait-quality; otherwise drop to the tinted-card variant — it's the stronger fallback.
When not to use
- For a row of testimonials. Use a CardGroup or ProfileList variant.
- As a hero. Quotes don't open pages well.
v4 → v5 diff
- Flattened: compound API (Blockquote.Root / .Quote / .Attribute) → one props interface.
- Ported: primary→complementary hue cascade. Block-local mapping table colors quote-mark + quote text in
--quote-accent; tinted card surface (no-image) uses primary--color-accent. blue/purple→earth substitute for v5's retired orange. - Recreated: v4's 24-col columnOffset/columnSpan inset. Block-local
--testimonial-content-max(56rem) +--testimonial-card-max(65rem). Card surface extends past the content edge, both inset from the page edge. - Retired:
background_color(page composes outer section). - Retired: trailing
”appended to quote text. Consumer writes punctuation. - Kept: mobile portrait overlap (negative bottom margin biting into the body).