TestimonialCard

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<TestimonialCard
  quote="Great product."
  name="Customer"
  role="role"
  company="company"
  avatar="avatar"
/>

Legacy mount name: data-component="TestimonialCard".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TestimonialCard.wrn

component TestimonialCard {
  props {
    class = ""
    quote = "Great product."
    name = "Customer"
    role = ""
    company = ""
    avatar = ""
  }
  view {
        <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900 {class}">
        <blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
        <Avatar src="{avatar}" initials="{name.slice(0,2)}" />
        <div>
        <div class="font-semibold">{name}</div>
        <div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span>
        </div>
        </div>
        </figcaption>
        </figure>
    }
}