Quotes
Persona Quote
A testimonial component pairing a profile picture with a quote, personal details, and optional company branding.
Overview
PersonaQuote shows a single testimonial centered on a profile picture, with quote text, persona name and details, and an optional company logo. Three profile-picture styles (speech bubble, round, square) and surface-tone-aware backgrounds adapt the component to any brand.
For multiple testimonials, wrap several PersonaQuotes with PersonaQuoteSlider. If a profile image isn't available, reach for QuoteCard instead.
Key Business & UX Benefits
- A face plus a quote is the most credible form of social proof, lifting trust on landing and brand pages where conversion depends on belief.
- Three profile-picture styles (speech bubble, round, square) adapt the testimonial to story-driven or grid layouts without restyling.
- Surface-tone awareness lets the same testimonial sit on light, dark, or photographic backgrounds while staying legible.
- Editors swap quotes per market or campaign in Studio, keeping the social proof locally relevant as the brand expands.
Pro-Tip from Larry: Choose the speech-bubble profile style when the testimonial sits inside a story-driven layout; round or square work better in grids.
Usage
LPersonaQuote
Feature List
- Three profile-picture styles (speech bubble, round, square) adapt the testimonial to story-driven or grid layouts
- Profile picture plus quote, persona name and details, and an optional company logo form a complete credibility unit
- Surface-tone-aware backgrounds keep the testimonial readable on light, dark, and photographic surfaces
- Editors swap quotes per market or campaign in Studio, keeping social proof locally relevant
- Pair with PersonaQuoteSlider when multiple testimonials should rotate in the same slot
- Reach for QuoteCard when a profile image isn't available or a simpler presentation fits better
API Reference
| Prop | Default | Type |
|---|---|---|
personNamerequired | string | |
companyNamerequired | string | |
quoterequired | string | |
personNameColor | UserColor { dark, light } | |
personNameVisible | true | boolean |
personPosition | string | |
personPositionColor | UserColor { dark, light } | |
personPositionVisible | true | boolean |
companyNameColor | UserColor { dark, light } | |
companyNameVisible | true | boolean |
companyLogo | ||
hideLogo | false | boolean |
profileImage | ||
profileImageStyle | speech-bubble | "speech-bubble" | "round" | "square" |
quoteColor | UserColor { dark, light } | |
quoteVisible | true | boolean |
cardBackground | UserColor { dark, light } |
| Slot | Type |
|---|---|
navigation | any |