Testimonial — Veritheme

Simple Quote

Minimal testimonial with quote and attribution.

html

"This product has completely transformed how our team collaborates. We've seen a 40% increase in productivity since switching."

Sarah Johnson

CEO at TechCorp

<div class="vt-max-w-md vt-mx-auto vt-text-center">
  <svg class="vt-w-8 vt-h-8 vt-text-mains-quaternary/30 vt-mx-auto vt-mb-4">...</svg>
  <p class="vt-text-base vt-leading-relaxed vt-mb-4">"Quote text here."</p>
  <div>
    <p class="vt-text-sm vt-font-semibold">Author Name</p>
    <p class="vt-text-xs vt-text-mains-quaternary">Role at Company</p>
  </div>
</div>

With Avatar

Testimonial with user avatar and role.

html

JD

John Doe

Product Designer at Figma

"The component library saved us weeks of development time. The quality and consistency is outstanding. Highly recommend for any design system."

<div class="vt-max-w-md vt-mx-auto">
  <div class="vt-rounded-2xl vt-border vt-p-6">
    <div class="vt-flex vt-items-center vt-gap-3 vt-mb-4">
      <div class="vt-icon-badge vt-bg-info-background">
        <span class="vt-text-sm vt-font-semibold vt-text-info-primary">JD</span>
      </div>
      <div>
        <p class="vt-text-sm vt-font-semibold">John Doe</p>
        <p class="vt-text-xs vt-text-mains-quaternary">Product Designer</p>
      </div>
    </div>
    <p class="vt-text-sm vt-leading-relaxed vt-text-mains-tertiary">"Testimonial quote text."</p>
    <div class="vt-flex vt-items-center vt-gap-0.5 vt-mt-4">
      <svg class="vt-w-4 vt-h-4 vt-text-warning-primary">...</svg>
      <svg class="vt-w-4 vt-h-4 vt-text-warning-primary">...</svg>
      <svg class="vt-w-4 vt-h-4 vt-text-warning-primary">...</svg>
      <svg class="vt-w-4 vt-h-4 vt-text-warning-primary">...</svg>
      <svg class="vt-w-4 vt-h-4 vt-text-warning-primary">...</svg>
    </div>
  </div>
</div>

Testimonial Grid

Multiple testimonials in a grid layout.

html

"Absolutely love it! The design quality is top-notch and it saved us so much time."

AK

Alex Kim

Frontend Dev

"Best investment we made this year. The team onboarding was smooth and painless."

ML

Maria Lopez

CTO at StartupXYZ

"Clean, well-documented, and easy to customize. Exactly what we needed."

TP

Tom Park

Lead Engineer

"Customer support is incredible. They helped us migrate in under a day."

EN

Emma Nash

PM at DesignCo

<div class="vt-grid vt-grid-cols-1 vt-sm:grid-cols-2 vt-gap-4">
  <div class="vt-rounded-2xl vt-border vt-p-5">
    <div class="vt-flex vt-items-center vt-gap-0.5 vt-mb-3">
      <svg class="vt-w-3.5 vt-h-3.5 vt-text-warning-primary">...</svg>
      <svg class="vt-w-3.5 vt-h-3.5 vt-text-warning-primary">...</svg>
      <svg class="vt-w-3.5 vt-h-3.5 vt-text-warning-primary">...</svg>
      <svg class="vt-w-3.5 vt-h-3.5 vt-text-warning-primary">...</svg>
      <svg class="vt-w-3.5 vt-h-3.5 vt-text-warning-primary">...</svg>
    </div>
    <p class="vt-text-sm vt-leading-relaxed vt-mb-4">"Quote text."</p>
    <div class="vt-flex vt-items-center vt-gap-2">
      <div class="vt-icon-badge vt-w-8 vt-h-8 vt-bg-info-background">
        <span class="vt-text-xs vt-font-semibold vt-text-info-primary">AK</span>
      </div>
      <div>
        <p class="vt-text-xs vt-font-semibold">Alex Kim</p>
        <p class="vt-text-[10px] vt-text-mains-quaternary">Frontend Dev</p>
      </div>
    </div>
  </div>
</div>

Large Featured

Hero-style testimonial for landing pages.

html

"We replaced three different tools with this single platform. The ROI was visible within the first month. I can't imagine going back to our old workflow."

RW

Rachel Williams

VP of Engineering at ScaleUp Inc.

<div class="vt-max-w-lg vt-mx-auto vt-text-center vt-py-8">
  <div class="vt-flex vt-items-center vt-justify-center vt-gap-0.5 vt-mb-6">
    <svg class="vt-w-5 vt-h-5 vt-text-warning-primary">...</svg>
    <svg class="vt-w-5 vt-h-5 vt-text-warning-primary">...</svg>
    <svg class="vt-w-5 vt-h-5 vt-text-warning-primary">...</svg>
    <svg class="vt-w-5 vt-h-5 vt-text-warning-primary">...</svg>
    <svg class="vt-w-5 vt-h-5 vt-text-warning-primary">...</svg>
  </div>
  <p class="vt-text-lg vt-leading-relaxed vt-mb-6">"Featured quote text."</p>
  <div class="vt-icon-badge vt-w-14 vt-h-14 vt-bg-info-background vt-mx-auto vt-mb-3">
    <span class="vt-text-lg vt-font-semibold vt-text-info-primary">RW</span>
  </div>
  <p class="vt-text-sm vt-font-semibold">Rachel Williams</p>
  <p class="vt-text-xs vt-text-mains-quaternary">VP of Engineering</p>
</div>

API Reference

All CSS classes available for the Testimonial component.

Class	Type	Description
`vt-max-w-md`	Layout	Constrains testimonial card width
`vt-text-center`	Layout	Centers quote text and attribution
`vt-rounded-2xl`	Style	Large border radius for card variant
`vt-border-border-default`	Style	Subtle border for card variant
`vt-text-mains-tertiary`	Color	Muted color for quote text
`vt-text-mains-quaternary`	Color	Subdued color for role/company text
`vt-text-warning-primary`	Color	Star rating color
`vt-bg-info-background`	Color	Avatar background tint
`vt-text-info-primary`	Color	Avatar initials color
`vt-grid vt-grid-cols-1 vt-sm:grid-cols-2`	Layout	Responsive grid for multiple testimonials

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantics	Use blockquote and cite elements for testimonial quotes
Images	Author avatars need alt text with the person name
Structure	Group testimonials in a section with heading for context