TestimonialCard
Reusable testimonial card component.
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
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
quote | string | Optional | "Great product." |
name | string | Optional | "Customer" |
role | string | Optional | "" |
company | string | Optional | "" |
avatar | string | Optional | "" |
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>
}
}