Testimonial JSON API Examples

1. Basic Testimonial Card

A simple testimonial card with name, title, company, and star rating using the V2 JSON API.

const config = {
    version: 2,
    layoutId: "testimonial-basic",
    breakpoints: { xs: 1, md: 2, lg: 3 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "testimonial",
                quote: "RSL has transformed how we build our dashboards. The accessibility features are outstanding!",
                name: "Sarah Johnson",
                title: "Product Manager",
                company: "TechCorp",
                rating: 5,
                verified: true
            }
        },
        {
            content: {
                type: "testimonial",
                quote: "Zero dependencies means we don't worry about supply chain issues. Well-documented too!",
                name: "Michael Chen",
                title: "Lead Developer",
                company: "StartupXYZ",
                rating: 4.5,
                avatar: "https://i.pravatar.cc/150?img=11"
            }
        },
        {
            content: {
                type: "testimonial",
                quote: "Finally, a CSS framework that puts accessibility first without sacrificing aesthetics!",
                name: "Emily Davis",
                title: "UX Designer",
                company: "DesignStudio",
                rating: 5,
                category: "Design"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

2. Testimonial Variants

The testimonial component supports multiple display variants: card (default), minimal, featured, and bubble.

// Minimal variant
{
    content: {
        type: "testimonial",
        quote: "The best CSS framework I've used in 15 years.",
        name: "James Wilson",
        title: "CTO",
        company: "GlobalTech",
        variant: "minimal"
    }
}

// Featured variant (hero style)
{
    content: {
        type: "testimonial",
        quote: "RSL has become the foundation of our entire design system...",
        name: "Alexandra Martinez",
        title: "VP of Engineering",
        company: "Enterprise Solutions Inc.",
        rating: 5,
        avatar: "https://i.pravatar.cc/150?img=5",
        variant: "featured"
    }
}

// Bubble variant (chat style)
{
    content: {
        type: "testimonial",
        quote: "Just shipped my first RSL project!",
        name: "Robert Kim",
        title: "Freelance Developer",
        avatar: "https://i.pravatar.cc/150?img=8",
        variant: "bubble"
    }
}

3. Accent Colors

Customize testimonial accent colors using preset names (purple, green, orange, red, teal) or custom hex values.

// Preset accent colors
{ type: "testimonial", accent: "purple", ... }
{ type: "testimonial", accent: "green", ... }
{ type: "testimonial", accent: "orange", ... }
{ type: "testimonial", accent: "red", ... }
{ type: "testimonial", accent: "teal", ... }

// Custom hex color
{ type: "testimonial", accent: "#E91E63", ... }

4. With Template System (Data-Driven)

Use the V2 template system to render testimonials from an array of data.

const testimonials = [
    { quote: "Amazing framework!", name: "John Doe", title: "Developer", rating: 5 },
    { quote: "Best in class.", name: "Jane Smith", title: "Designer", rating: 4.5 },
    { quote: "Highly recommend!", name: "Bob Wilson", title: "Manager", rating: 5 }
];

const config = {
    version: 2,
    layoutId: "testimonials-template",
    breakpoints: { xs: 1, md: 3 },
    gap: "1.5rem",
    template: {
        data: testimonials,
        item: {
            content: {
                type: "testimonial",
                quote: "{{quote}}",
                name: "{{name}}",
                title: "{{title}}",
                rating: "{{rating}}"
            }
        }
    }
};

RSL.JSONLayout.renderLayout('#demo4-output', config);

Testimonial - JSON API Examples

1. Basic Testimonial Card

2. Testimonial Variants

3. Accent Colors

4. With Template System (Data-Driven)