Components
ExpertQuote
BetaA pull quote card featuring an expert's first-hand testimonial, circular author photo, destination visited, and optional star rating — used to build trust on destination and product pages.
The Masai Mara delivers the most dramatic wildlife spectacle I have ever witnessed. The Great Migration crossing is something no photograph can prepare you for.
Purpose
ExpertQuote surfaces a first-hand endorsement from a Kuoni travel specialist. It is designed to convert browsing into booking by lending human credibility to a destination or hotel recommendation at the point where a traveller is considering their options.
The component follows the principle that expert voices — people who have visited the destination themselves — carry more weight than editorial copy. The circular photo, named attribution, destination badge, and star rating work together as a trust cluster: every element reinforces the authenticity of the recommendation.
Usage
Use ExpertQuote on destination overview pages, hotel detail pages, itinerary builders, and quote summaries — anywhere a personal, named endorsement adds trust at a decision point. Do not use it for generic marketing copy, anonymous testimonials, or customer reviews; ExpertQuote implies personal expert knowledge, so a generic Callout or plain text block is more honest for unattributed copy.
Anatomy
Santorini at sunset from the caldera rim is the kind of scene that makes every other travel photo look flat.
- 1Decorative quotation mark — An oversized opening double-quote in teal-50 rendered behind the quote text at the top-left of the card. Purely decorative — hidden from the accessibility tree.
- 2Quote text — The expert statement, wrapped in semantic quotation marks by the component. Do not include quotation marks in the quote prop value. Supports up to three sentences comfortably.
- 3Author photo — A 48x48px circular image with a 2px teal-50 border. When authorImage is omitted, the initial letter of authorName is shown in a teal circle as a fallback avatar.
- 4Author name and title — Full name in semi-bold dark text. Job title in grey-500 below. Destination renders in teal below the title as "Visited: [destination]".
- 5Star rating — One to five gold SVG stars aligned to the right of the author row. Only renders when the rating prop is provided.
Variants
With author photo
When an authorImage is supplied the circular avatar uses the provided image. Use a square crop of the author's face with good lighting — the circular mask is applied by the component.
Bali is endlessly rewarding. Even after eight visits, I discover something new — whether it is a hidden temple, a rice terrace at dawn, or a family-run warung serving the best nasi goreng I have ever tasted.
With initial avatar (no photo)
When authorImage is omitted, the component falls back to a circular teal avatar showing the first letter of authorName. Use this for newer specialists whose professional photography is not yet available.
The Amalfi Coast is best explored slowly — a few days in Ravello away from the busier towns gives you the landscape without the crowds.
Without rating
Omit rating when the expert is providing a nuanced qualitative recommendation rather than an overall score, or when the quote applies to a broad destination rather than a specific hotel.
Japan in spring and autumn offers two completely different countries. Cherry blossom season is romantic and busy; autumn foliage is quieter and just as spectacular.
Without destination
Omit destination when the quote is about a hotel or experience that spans multiple locations, or when destination context is already prominent on the page.
The Aman properties share a philosophy of stillness and privacy that is hard to articulate until you experience it. Once you have stayed in one, you understand why guests return year after year.
States
ExpertQuote is a display-only component. There are no interactive states.
If authorImage.src fails to load, the component gracefully degrades to the initial-letter avatar. This fallback is implemented with an onError handler on the <img> element and does not require caller intervention.
Best practices
Write quote text that is specific, personal, and based on the expert's direct experience of the destination or property.
A specific, personal observation — a temple at dawn, a crossing in the Mara — is far more persuasive than a generic endorsement.
Use vague superlatives or copy that could apply to any destination without modification.
Quotes like 'This destination is truly wonderful' read as marketing copy, not expert knowledge.
Keep the quote to one to three sentences. The card has a fixed visual weight and long quotes break the layout.
Two to three sentences is the right length — enough to convey voice and credibility, short enough to scan.
Include the full body of an expert article or blog post as the quote value.
A six-sentence quote forces the card to grow and creates an imbalance with surrounding content.
Always provide both authorName and authorTitle. The title should reflect the expert's specialist area, not a generic job title.
Accurate attribution is the trust signal — the full name and verified title make the endorsement credible.
Use a generic or anonymised author attribution without a real name.
'Our team' or 'A Kuoni specialist' with no name removes the human element that makes the quote trustworthy.
Use the rating prop when the quote is about a specific hotel or experience that warrants a score from the expert.
A hotel-level rating from someone who stayed there is a meaningful buying signal alongside the quote.
Apply a star rating to an entire country or destination — ratings should be for specific properties or experiences.
Rating a continent or country on a five-star scale is not meaningful and creates a false sense of precision.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quote* | string | — | The expert quote text. Do not include opening or closing quotation marks — the component adds them. Keep to one to three sentences. |
| authorName* | string | — | The expert's full name. Used for the attribution label and as the fallback avatar initial when no authorImage is provided. |
| authorTitle | string | — | The expert's job title or specialist area, e.g. 'Kenya Specialist' or 'Luxury Resorts Advisor'. Displayed in grey-500 below the name. |
| authorImage | { src: string, alt: string } | — | Profile image for the author avatar. Use a square head-and-shoulders crop. When omitted, the component shows an initial-letter avatar in teal. |
| destination | string | — | Destination the expert has personally visited. Rendered as 'Visited: [destination]' in teal below the author title. Omit for hotel or cross-destination quotes. |
| rating | number | — | Star rating from 1 to 5. Renders as filled gold SVG stars aligned to the right of the author row. Omit when a numeric score is not appropriate. |
| className | string | — | Additional Tailwind classes merged onto the card root element. |
Accessibility
Quote semantics
The quote text renders inside a <blockquote> element. The component adds the opening and closing typographic quotation marks as CSS ::before and ::after pseudo-elements on an inner <p>, keeping them out of the accessibility tree. Screen readers will read the plain text of the quote without announcing the quotation mark characters.
Author image
When authorImage is supplied, the alt string from the authorImage object is applied to the <img> element. Provide a descriptive alt that includes the name and role: 'Sarah Omondi, Kenya Specialist'. When the fallback avatar is shown, the initial letter inside the circle has aria-hidden="true" and the author name adjacent to it provides the accessible label.
Star rating
Stars render as a visually hidden text string 'Rated [n] out of 5 stars' before the SVG stars. The SVG stars themselves are aria-hidden="true". This means a screen reader announces the rating precisely without reading individual star characters.
Decorative quotation mark
The large teal-50 decorative " at the top-left of the card is rendered with aria-hidden="true" to prevent it from being announced as content.
Colour contrast
| Element | Foreground | Background | Ratio |
|---|---|---|---|
| Quote text | #1A1A1A (dark) | #FFFFFF | 18.1:1 |
| Author name | #1A1A1A | #FFFFFF | 18.1:1 |
| Author title | #666666 (grey-500) | #FFFFFF | 5.7:1 |
| Destination | Teal-600 | #FFFFFF | 4.9:1 |