Testimonials

Overview

Testimonials is a CORE-OWNED section component in src/core/components/sections/Testimonials.astro. It renders quote cards from a structured data array with two layout variants: a multi-card grid or a single centered highlight. Unlike the card-grid sections (InfoCards, FeatureGrid), Testimonials renders its own <figure>/<blockquote>/<figcaption> markup rather than delegating to SectionCard.

Props

Prop	Type	Default	Description
layout	"grid" | "centered"	"grid"	Layout variant (see Behavior)
cardBackground	SectionBackground	"soft"	Card surface variant for all testimonial cards
items	TestimonialItem[]	required	Array of testimonial data objects (see Items below)
class	string	—	Additional CSS classes

All other HTML attributes (id, aria-*, data-*, etc.) are forwarded to the root <div> via attribute passthrough.

Items

Each item in the items array has this shape:

Field	Type	Description
quote	string	The testimonial quote text
name	string	Person’s name
role	string	Person’s role or title
avatarSrc	string	URL to an avatar image
avatarAlt	string	Alt text for the avatar (defaults to "")
attributionHref	string	Link URL wrapping the person’s name

Behavior

Layout variants

• grid (default) — All items render in a responsive auto-fit grid with minmax(min(100%, 20rem), 1fr) column sizing.
• centered — Only the first item is displayed, centered within a max-width of 52rem. Use this for a single highlight testimonial.

Card backgrounds

Each card receives a testimonials__card--bg-{variant} class that applies the background color and remaps --st-color-link and --st-color-link-hover tokens. This ensures link colors remain accessible on every surface variant. The available variants match the standard SectionBackground values: default, soft, strong, contrast, inverted.

Attribution

When both name and attributionHref are provided, the name renders as a link with the canonical focus ring. When name is provided without attributionHref, it renders as plain text. The role renders below the name with reduced opacity.

Avatar

When avatarSrc is provided, a circular avatar image renders to the left of the attribution text. The image uses loading="lazy" and defaults avatarAlt to an empty string if not provided.

Heading composition

Testimonials does not render its own heading. Callers compose headings as siblings before the component, inside the same LayoutSection:

• Visible heading: Place a <Heading> before <Testimonials> inside the same LayoutSection
• Screen-reader-only naming: Use the LayoutSection label prop to set aria-label on the wrapping <section>

CSS API

BEM root class: testimonials

Class	Element
.testimonials	Component root (<div>)
.testimonials__list	Grid/list container (<ul>)
.testimonials__item	List item (<li>)
.testimonials__card	Card (<figure>)
.testimonials__quote	Quote text (<blockquote>)
.testimonials__attribution	Attribution container (<figcaption>)
.testimonials__avatar	Avatar image
.testimonials__attribution-text	Name and role wrapper
.testimonials__name	Name (plain text)
.testimonials__name-link	Name (linked)
.testimonials__role	Role text

Modifier classes applied automatically:

Modifier	Applied when
.testimonials--grid	layout="grid"
.testimonials--centered	layout="centered"
.testimonials__list--grid	layout="grid"
.testimonials__list--centered	layout="centered"
.testimonials__card--bg-{variant}	Per cardBackground value

These classes are available as CSS API hooks for site-level overrides in src/site/styles/.

Usage

A grid of testimonials with sibling heading:

<LayoutSection>
  <Heading level={2}>What Our Clients Say</Heading>
  <p class="mt-sm mb-lg">We let our work speak for itself.</p>
  <Testimonials
    items={[
      {
        quote:
          "They brought structure and speed to a project that had been stalled.",
        name: "Morgan Chen",
        role: "Director of Digital, Bayside Health",
      },
      {
        quote:
          "Every recommendation was backed by data and delivered on schedule.",
        name: "Priya Kapoor",
        role: "Head of Product, Greenline Logistics",
      },
    ]}
    layout="grid"
    cardBackground="soft"
  />
</LayoutSection>

A single centered highlight:

<LayoutSection>
  <Heading level={2} class="text-center">Featured Testimonial</Heading>
  <Testimonials
    items={[
      {
        quote: "Our site performance scores went from the low 60s to above 95.",
        name: "James Whitfield",
        role: "CTO, Meridian Education",
        avatarSrc: "/images/james.jpg",
        attributionHref: "https://example.com",
      },
    ]}
    layout="centered"
  />
</LayoutSection>

Note: To customize Testimonials appearance at the site level, target the BEM classes above in site-owned stylesheets rather than modifying the core component.