PhiaUi.Components.TestimonialCard (phia_ui v0.1.17)

Copy Markdown View Source

TestimonialCard — a customer quote card with author info, optional star rating, and three layout variants.

Variants

VariantDescription
:default.card wrapper with shadow-sm
:bordered.card wrapper with border-2
:minimalPlain div, no card chrome

Examples

<.testimonial_card
  quote="Phia UI saved us weeks of work."
  author_name="Jane Doe"
  author_role="CTO"
  rating={5}
/>

<.testimonial_card
  quote="Minimal and clean."
  author_name="Bob"
  variant={:minimal}
/>

Summary

Functions

Renders a customer testimonial card.

Functions

testimonial_card(assigns)

Renders a customer testimonial card.

The card body contains (top to bottom):

  1. Star row — rendered only when rating (1–5) is provided; fills amber stars then empty stars.
  2. Decorative quote mark — a large " in text-muted-foreground/20 for visual interest.
  3. Quote text — italic paragraph in normal foreground colour.
  4. Author row — avatar (if author_src provided) + name + role/company.

When variant={:minimal}, the card chrome is omitted and the body is rendered inside a plain <div>. For all other variants, the body is wrapped in a PhiaUi.Components.Card.

Examples

<%!-- Default card with stars and author --%>
<.testimonial_card
  quote="PhiaUI saved our team weeks of UI work. Absolutely love it."
  author_name="Jane Doe"
  author_role="CTO"
  author_src="/avatars/jane.jpg"
  rating={5}
/>

<%!-- Bordered variant --%>
<.testimonial_card
  quote="Clean components, great documentation."
  author_name="Alex Smith"
  author_role="Lead Engineer"
  company="Acme Corp"
  variant={:bordered}
  rating={4}
/>

<%!-- Minimal (no card chrome) for embedding in dark sections --%>
<.testimonial_card
  quote="The best Phoenix component library I have used."
  author_name="Maria"
  variant={:minimal}
/>

<%!-- Testimonials grid from a list --%>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <.testimonial_card
    :for={t <- @testimonials}
    quote={t.quote}
    author_name={t.author}
    author_role={t.title}
    author_src={t.avatar_url}
    rating={t.rating}
  />
</div>

Attributes

  • quote (:string) (required) - The testimonial quote text.
  • author_name (:string) (required) - Author's full name.
  • author_role (:string) - Author's job title. Defaults to nil.
  • author_src (:string) - Author avatar image URL. Defaults to nil.
  • company (:string) - Company name. Defaults to nil.
  • rating (:integer) - Star rating 1–5; nil = no stars. Defaults to nil.
  • variant (:atom) - Visual variant. Defaults to :default. Must be one of :default, :bordered, or :minimal.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the outer element.