Testimonial

Displays customer quotes and reviews.

If it doesn’t make you a little nervous, it’s probably not growth.

Jules Mercer
Travel photographer

---
import Testimonial from "@core-elements/testimonial/Testimonial.astro";
---

<Testimonial alignmentHorizontal="start" authorDescription="Travel photographer" authorImage="/src/assets/images/component-docs/profile.jpg" authorName="Jules Mercer">
  If it doesn’t make you a little nervous, it’s probably not growth.
</Testimonial>

---
blocks:
  - _component: building-blocks/core-elements/testimonial
    text: If it doesn’t make you a little nervous, it’s probably not growth.
    authorName: Jules Mercer
    authorDescription: Travel photographer
    authorImage: /src/assets/images/component-docs/profile.jpg
    alignmentHorizontal: start
---

Overview #

A component for showcasing customer quotes and reviews. Includes optional author name, role, and avatar. Ideal for social proof sections, testimonials, and case studies.

Properties #

text string | default: My testimonial text.

Quotation marks will be added around the text.

authorName string | default: Charlie Parker

The person to whom you're attributing the quotation.

authorDescription string | default: Author

The role or company of the person.

authorImage string

The image of the author.

alignmentHorizontal enum | default: start

The horizontal alignment of the testimonial.

Accepted values:

start
center

Slots #

default

The quote. Used only when the text property is not set.

Examples #

AlignX #

The impact was immediate. Our workflow feels lighter, and results speak for themselves

Casey Lin
Author

---
import Testimonial from "@core-elements/testimonial/Testimonial.astro";
---

<Testimonial alignmentHorizontal="start" authorDescription="Author" authorImage="/src/assets/images/component-docs/profile.jpg" authorName="Casey Lin">
  The impact was immediate. Our workflow feels lighter, and results speak for themselves
</Testimonial>

---
blocks:
  - _component: building-blocks/core-elements/testimonial
    text: The impact was immediate. Our workflow feels lighter, and results speak for themselves
    authorName: Casey Lin
    authorDescription: Author
    authorImage: /src/assets/images/component-docs/profile.jpg
    alignmentHorizontal: start
---

The impact was immediate. Our workflow feels lighter, and results speak for themselves

Casey Lin
Author

---
import Testimonial from "@core-elements/testimonial/Testimonial.astro";
---

<Testimonial alignmentHorizontal="center" authorDescription="Author" authorImage="/src/assets/images/component-docs/profile.jpg" authorName="Casey Lin">
  The impact was immediate. Our workflow feels lighter, and results speak for themselves
</Testimonial>

---
blocks:
  - _component: building-blocks/core-elements/testimonial
    text: The impact was immediate. Our workflow feels lighter, and results speak for themselves
    authorName: Casey Lin
    authorDescription: Author
    authorImage: /src/assets/images/component-docs/profile.jpg
    alignmentHorizontal: center
---

Author description #

This completely changed how our team works together — smoother, faster, and with way less friction.

Riley James
VP of Product, TechCompany

---
import Testimonial from "@core-elements/testimonial/Testimonial.astro";
---

<Testimonial alignmentHorizontal="start" authorDescription="VP of Product, TechCompany" authorName="Riley James">
  This completely changed how our team works together — smoother, faster, and with way less friction.
</Testimonial>

---
blocks:
  - _component: building-blocks/core-elements/testimonial
    text: This completely changed how our team works together — smoother, faster, and with way less friction.
    authorName: Riley James
    authorDescription: VP of Product, TechCompany
    alignmentHorizontal: start
---