Testimonial Section

Section displaying a customer testimonial with author information.

This framework has completely changed the way we build. The sites come together fast, they run even faster, and the whole process feels effortless. I couldn't be happier with the results.

Richard Johnson
Richard Johnson
CEO, Tech Innovations
---
import TestimonialSection from "@page-sections/people/testimonial-section/TestimonialSection.astro";
---

<TestimonialSection authorDescription="CEO, Tech Innovations" authorImage="/src/assets/images/component-library/profile.jpg" authorName="Richard Johnson" backgroundColor="surface" paddingVertical="sm">
  This framework has completely changed the way we build. The sites come together fast, they run even faster, and the whole process feels effortless. I couldn't be happier with the results.
</TestimonialSection>
---
blocks:
  _component: page-sections/people/testimonial-section
  text: This framework has completely changed the way we build. The sites come together fast, they run even faster, and the whole process feels effortless. I couldn't be happier with the results.
  authorName: Richard Johnson
  authorDescription: CEO, Tech Innovations
  authorImage: /src/assets/images/component-library/profile.jpg
  paddingVertical: sm
  backgroundColor: surface
---

Overview

Use Testimonial Section to showcase customer feedback, reviews, or endorsements. It displays a quote with the author's name, description, and photo, helping build trust and credibility.

Properties

text string | default: This framework has completely changed the way we build. The sites come together fast, they run even faster, and the whole process feels effortless. I couldn't be happier with the results.

The testimonial quote text.

authorName string | default: Richard Johnson

Name of the testimonial author.

authorDescription string | default: CEO, Tech Innovations

Title or description of the author (e.g., job title, company).

authorImage string | default: /src/assets/images/component-library/profile.jpg

Photo of the testimonial author.

alignX enum | default: center

Horizontal alignment of the testimonial content.

Accepted values:
  • center
  • start
  • end

maxContentWidth enum | default: xl

Maximum width of the content area.

Accepted values:
  • sm
  • md
  • lg
  • xl
  • 2xl

paddingHorizontal enum | default: xl

Horizontal padding for the section.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl

paddingVertical enum | default: sm

Vertical padding for the section.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl

colorScheme enum | default: inherit

Color scheme theme applied to the section wrapper.

Accepted values:
  • inherit
  • default
  • contrast

backgroundColor enum | default: surface

Background color for the section.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight