Card Testimonial

Fetch pattern JSON: curl https://webspire.de/patterns/cards/testimonial.json

testimonial.html

<div class="ws-cards rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 shadow-sm">
  <!-- Stars -->
  <div class="flex gap-0.5">
    <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" /></svg>
    <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" /></svg>
    <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" /></svg>
    <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" /></svg>
    <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" /></svg>
  </div>

  <!-- Quote -->
  <blockquote class="mt-4">
    <p class="text-base text-[var(--ws-cards-text-soft)]">"This tool completely changed how our team ships product. We cut our development time in half and the quality went up significantly. Can't imagine going back."</p>
  </blockquote>

  <!-- Author -->
  <div class="mt-6 flex items-center gap-3">
    <div class="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0">
      <svg class="h-6 w-6 text-[var(--ws-cards-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
    </div>
    <div>
      <p class="text-sm font-semibold text-[var(--ws-cards-text)]">Sarah Mitchell</p>
      <p class="text-sm text-[var(--ws-cards-text-muted)]">VP of Engineering, Acme Corp</p>
    </div>
  </div>
</div>

Details

Family

cards

Tier

enhanced

Kind

component

Extends

cards/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

cardtestimonialreviewratingstarsquote

Slots

Name	Required	Description
rating	Yes	Star rating display.
quote	Yes	Testimonial text.
author	Yes	Author avatar, name, and role.

Standalone testimonial card with 5-star rating at the top, quote text in the middle, and author info (avatar, name, role) at the bottom. Bordered with subtle shadow. Works as a standalone component or inside a grid.