MarketingTestimonial
A testimonials section. 'single' features one large centered quote; 'grid' lays out several quote cards with author + avatar. Presentational and theme-driven.
Hex UI cut our design-to-ship time in half. Our agents draft entire landing pages from a single prompt and the output is on-brand the first try.
Jordan Lee
Head of Design, Acme
Installation
pnpm
pnpm dlx @hex-core/cli add marketing-testimonialVariant values
layoutTestimonial composition.| Value | Description |
|---|---|
singledefault | One large centered quote. |
grid | A grid of quote cards. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
testimonialsrequired | object | — | ReadonlyArray<{ quote; authorName; authorTitle?; avatar? }>. In 'single' layout only the first is shown; in 'grid' all are rendered as cards. Avatars are ReactNode (Avatar or img) — none is bundled. |
eyebrow | ReactNode | — | Section eyebrow above the title (grid layout). |
title | ReactNode | — | Section heading (grid layout). |
layout | enum | single | 'single' for one large featured quote, 'grid' for a card grid. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use to add social proof below features or pricing. 'single' for one high-trust quote; 'grid' for several shorter quotes.
When not to use
Don't use for logo-only social proof (use marketing-logo-cloud) or for case-study long-form content. Don't fabricate quotes.
Common mistakes
- Using 'grid' layout with a single testimonial — leaves a lopsided row; use 'single'.
- Putting the author name inside the quote text instead of authorName, which breaks the figure/figcaption structure.
- Avatars with no empty alt — decorative avatars should have alt="" since the name is already in text.
Accessibility
Each testimonial is a <figure> with the attribution in <figcaption>, so the quote and its author are programmatically associated. Avatars are decorative (the name is text) and should carry empty alt.
Related components
Token budget: 650
Verified against @hex-core/components@1.12.0