Testimonial Component API

Quick Start

Add a testimonial to your page in seconds:

RSL has transformed how we build our dashboards. The accessibility features are outstanding!

<div class="rsl-testimonial"
     data-rsl-testimonial
     data-testimonial-name="Sarah Johnson"
     data-testimonial-title="Product Manager"
     data-testimonial-company="TechCorp"
     data-testimonial-rating="5">
    <blockquote>RSL has transformed how we build our dashboards!</blockquote>
</div>

Required Files

Include these files in your project:

styles/testimonial.css
javascript/testimonial.js
styles/star-rating.css (optional, for ratings)
javascript/star-rating.js (optional, for ratings)

Data Attributes API

Configure testimonials entirely through data attributes:

Attribute	Type	Default	Description
`data-rsl-testimonial`	flag	-	Required. Enables testimonial component
`data-testimonial-variant`	string	`card`	Visual style: `card`, `minimal`, `featured`, `bubble`
`data-testimonial-size`	string	`md`	Size variant: `sm`, `md`, `lg`
`data-testimonial-name`	string	-	Author's name
`data-testimonial-title`	string	-	Author's job title
`data-testimonial-company`	string	-	Author's company
`data-testimonial-avatar`	URL	-	Avatar image URL (auto-fallback to initials)
`data-testimonial-logo`	URL	-	Company logo URL
`data-testimonial-rating`	number	-	Star rating (0-5, supports half stars)
`data-testimonial-category`	string	-	Category for filtering (e.g., "Enterprise")
`data-testimonial-date`	string	-	Date in ISO format (e.g., "2024-01-15")
`data-testimonial-verified`	boolean	`false`	Show verified badge
`data-testimonial-accent`	string	-	Accent color: `purple`, `green`, `orange`, `red`, `teal`, or hex
`data-testimonial-animate`	boolean	`false`	Enable animate on scroll

Slideshow Attributes

Attribute	Type	Default	Description
`data-testimonial-slideshow`	boolean	`false`	Enable slideshow mode
`data-testimonial-autoplay`	boolean	`false`	Auto-advance slides
`data-testimonial-interval`	number	`5000`	Autoplay interval in milliseconds
`data-testimonial-pause-on-hover`	boolean	`true`	Pause autoplay on hover
`data-testimonial-nav`	boolean	`true`	Show prev/next buttons
`data-testimonial-dots`	boolean	`true`	Show pagination dots

FilterBus Integration

Attribute	Type	Description
`data-filterbus-category`	string	FilterBus field name to subscribe for category filtering
`data-filterbus-rating`	string	FilterBus field name to subscribe for rating filtering

JavaScript API

Method	Parameters	Description
`RSL.Testimonial.init()`	-	Initialize all testimonials on page
`RSL.Testimonial.create(element, options)`	element, options	Create a testimonial instance programmatically
`RSL.Testimonial.destroy(element)`	element	Destroy a testimonial instance
`RSL.Testimonial.getInstance(element)`	element	Get instance for an element
`RSL.Testimonial.goToSlide(element, index)`	element, index	Go to specific slide in slideshow
`RSL.Testimonial.getCurrentSlide(element)`	element	Get current slide index
`RSL.Testimonial.pause(element)`	element	Pause slideshow autoplay
`RSL.Testimonial.play(element)`	element	Resume slideshow autoplay

CSS Classes

Class	Description
`.rsl-testimonial`	Base class for testimonial container
`.rsl-testimonial-card`	Card variant (default)
`.rsl-testimonial-minimal`	Minimal inline variant
`.rsl-testimonial-featured`	Large featured/hero variant
`.rsl-testimonial-bubble`	Chat bubble variant
`.rsl-testimonial-sm`	Small size
`.rsl-testimonial-lg`	Large size
`.rsl-testimonial-accent-purple`	Purple accent color
`.rsl-testimonial-accent-green`	Green accent color
`.rsl-testimonial-accent-orange`	Orange accent color
`.rsl-testimonial-accent-red`	Red accent color
`.rsl-testimonial-accent-teal`	Teal accent color
`.rsl-testimonial-animate`	Enable animate on scroll

Accessibility

The Testimonial component is fully WCAG 2.1 AA compliant:

Semantic HTML: Uses <blockquote>, <cite>, <figure>, and <figcaption> for proper structure
ARIA Labels: Quotes are properly associated with their authors via aria-labelledby
Screen Reader Support: Slideshow includes live region for announcements
Keyboard Navigation: Full keyboard support in slideshow mode (Arrow keys, Home/End)
Focus Indicators: Visible focus states on all interactive elements
Reduced Motion: Respects prefers-reduced-motion preference
Color Contrast: All text meets WCAG 4.5:1 contrast ratio

Accessibility Note

When using avatar images, ensure you provide meaningful alt text via data-testimonial-avatar-alt. If not provided, the component generates alt text from the author's name.

Next Steps

See Examples

View examples.html for comprehensive demos

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components