ITestimonialCard ​

Someone's words, with their face and their job under it.

<ITestimonialCard
  quote="We stopped chasing invoices entirely. The reminders do it."
  name="Rae Ellis"
  role="Finance lead, Meridian Foods"
  avatar="/people/rae.jpg"
/>

<ITestimonialCard quote="Month end used to be a weekend." name="Tomas Vidal" role="Owner, Halcyon Labs" />

The curly quotes are added for you — pass the sentence, not the punctuation.

The words render as a blockquote, and the attribution sits outside it: who someone is was never part of what they said.

The avatar ​

avatar is the photo. Without one, IAvatar derives initials from name, so a card with no image still looks deliberate.

Its alt is deliberately empty. The name is printed right beside it, and a screen reader announcing it twice is worse than not announcing it at all. The photo is decorative in every case — the identity lives in the text, never in the image — so a card crediting only a role loses nothing by not describing the face.

Without a name ​

The attribution renders if either name or role is given, so a quote can be credited to a job title alone. Leave both out and no footer renders at all — useful for a pull quote from a review site, where the source belongs in the body rather than under a face.

Size ​

size scales the quote alone; the attribution stays put, since a name set in 18px reads as a heading rather than as a credit.

Props ​

Slots ​

Use quote for plain text, and the default slot when the words need markup of their own. The slot still renders inside the blockquote, but the quote marks come with the prop — supply your own punctuation.