Testimonial

Displays customer quotes and reviews.

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

Jules Mercer
Jules Mercer
Travel photographer
---
import Testimonial from "@core-elements/testimonial/Testimonial.astro";
---

<Testimonial alignX="start" authorDescription="Travel photographer" authorImage="/src/assets/images/component-library/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-library/profile.jpg
    alignX: 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.

alignX 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
Casey Lin
Author
---
import Testimonial from "@core-elements/testimonial/Testimonial.astro";
---

<Testimonial alignX="start" authorDescription="Author" authorImage="/src/assets/images/component-library/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-library/profile.jpg
    alignX: start
---

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

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

<Testimonial alignX="center" authorDescription="Author" authorImage="/src/assets/images/component-library/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-library/profile.jpg
    alignX: 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 alignX="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
    alignX: start
---