Domain

TestimonialSection

Customer quote section that renders one or more testimonials with author identity and optional role/company context.

import { TestimonialSection } from '@lostgradient/cinder/testimonial-section';
marketingtestimonialsocial-proof
01

Overview

Renders customer testimonial quotes in a single-featured or multi-card grid layout.

Usage

svelte 
<script lang="ts">
  import TestimonialSection from '@lostgradient/cinder/testimonial-section';

  const testimonials = [
    { quote: 'Cinder cut our page build time in half.', name: 'Alex Morgan', role: 'VP Product' },
    { quote: 'We shipped our redesign in two weeks.', name: 'Riley Chen', role: 'Design Lead' },
  ];
</script>

<TestimonialSection title="Loved by product teams" {testimonials} />
Live preview
02

When to use

Use when
  • Building a social-proof block with customer quotes and attributed people.
  • Displaying one featured quote or a compact testimonial grid on landing pages.
Avoid when
03

Examples

TestimonialSection

TestimonialSection showing attributed customer quotes in a responsive grid.

04

Props

Props for testimonial-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text Optional section heading.
description text Optional heading description.
testimonials TestimonialSectionItem[] req Testimonials to render.
layout 'single' | 'grid' 'grid' Layout mode.
columns 2 | 3 3 Columns used by grid layout.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.