Testimonial Card

<article
  class="ws-rating-widget max-w-sm rounded-2xl border p-6"
  style="
    --ws-rating-widget-bg: oklch(0.99 0.005 75);
    --ws-rating-widget-text: oklch(0.25 0.01 75);
    --ws-rating-widget-text-soft: oklch(0.45 0.01 75);
    --ws-rating-widget-text-muted: oklch(0.6 0.01 75);
    --ws-rating-widget-border: oklch(0.9 0.01 75);
    --ws-rating-widget-accent: oklch(0.8 0.16 85);
    --ws-rating-widget-accent-soft: oklch(0.94 0.06 85);
    background: var(--ws-rating-widget-bg);
    color: var(--ws-rating-widget-text);
    border-color: var(--ws-rating-widget-border);
  "
  aria-label="Customer review"
>
  <!-- Stars -->
  <div
    class="mb-3 flex gap-0.5 text-lg"
    role="img"
    aria-label="5 out of 5 stars"
    style="color: var(--ws-rating-widget-accent)"
  >
    <span>&#9733;</span>
    <span>&#9733;</span>
    <span>&#9733;</span>
    <span>&#9733;</span>
    <span>&#9733;</span>
  </div>

  <!-- Quote -->
  <blockquote class="mb-4 text-sm leading-relaxed" style="color: var(--ws-rating-widget-text-soft)">
    "Absolutely love this product. The build quality is exceptional and it exceeded all my expectations. Customer support was incredibly responsive when I had a question about setup."
  </blockquote>

  <!-- Reviewer -->
  <div class="mb-4 flex items-center gap-3">
    <div
      class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
      style="background: var(--ws-rating-widget-accent-soft); color: var(--ws-rating-widget-text)"
      aria-hidden="true"
    >S</div>
    <div class="flex flex-col">
      <div class="flex items-center gap-2">
        <span class="text-sm font-semibold">Sarah Mitchell</span>
        <span
          class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
          style="background: var(--ws-rating-widget-accent-soft); color: var(--ws-rating-widget-text-soft)"
        >
          <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"/>
          </svg>
          Verified Purchase
        </span>
      </div>
      <time class="text-xs" style="color: var(--ws-rating-widget-text-muted)" datetime="2026-03-18">March 18, 2026</time>
    </div>
  </div>

  <!-- Helpful -->
  <div class="flex items-center gap-1.5 text-xs" style="color: var(--ws-rating-widget-text-muted)">
    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3c0 .94-.26 1.82-.72 2.56a5.02 5.02 0 0 0-.28.44V6h4.5A2.5 2.5 0 0 1 17 8.5c0 .46-.13.89-.35 1.25a2.5 2.5 0 0 1-.59 4.27A2.5 2.5 0 0 1 13.5 17H7a3 3 0 0 1-3-3V8.5a1 1 0 0 1 .2-.6L8 2.8A1 1 0 0 1 9 2.5 2 2 0 0 1 11 3Z"/>
    </svg>
    <span>24 people found this helpful</span>
  </div>
</article>