Quotes

Quote Card Slider

Slider wrapping multiple `QuoteCard` items.

Overview

QuoteCardSlider wraps multiple QuoteCard items in a slider. Use it for review and testimonial rotations on PDP and homepage.

For testimonials that lead with a profile picture, reach for PersonaQuoteSlider instead.

Rotates customer reviews and ratings on PDP and homepage, multiplying social proof per pixel of layout.
Star-rated quotes inside a slider provide the same trust lift as a full review section in a fraction of the space.
Editors curate the rotation in Studio, so the strongest reviews always lead while older ones cycle in over time.
One slider drives both review carousels and brand testimonial walls, keeping the rotation pattern consistent across pages.

QuoteCardSlider Default

<QuoteCardSlider
    :slides="quotes"
    :has-logo="true"
    :has-rating="true"
    navigation-style="navigation-buttons"
  />

Wraps multiple QuoteCard items in a slider for PDP and homepage review rotations
Star-rated quotes inside a slider provide the same trust lift as a full review section in a fraction of the space
One slider drives both review carousels and brand testimonial walls, sharing one pattern across pages
Editors curate the rotation in Studio so the strongest reviews always lead the cycle
Reach for it when QuoteCard's compact format fits better than the larger PersonaQuote layout

Prop	Default	Type
`slides`required		`QuoteCardProps[] { quote, quoteColor, avatarPic, 11 more }`
`hasLogo`required		`boolean`
`hasRating`required		`boolean`
`cardsAlignment`		`"left" \| "center"`
`navigationStyle`	`navigation-buttons`	`"scrollbar-buttons" \| "navigation-buttons"`

Quote Card

Compact testimonial card with optional star rating, author info, and company logo, with left or center alignment.

Review

Product review display section with rating summary, sort and filter controls, and a Write a Review dialog.