Testimonials

apps/www/src/sections/Testimonials.astro · 27 lines · group Testimonials

Testimonials — quotes with a face and a role. Cards with a round photo on a band (<Testimonial>); a standalone pull quote is <Quote>. columns 1|2|3

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

The people who run them

Anna Lindqvist
Head of agronomy, Almara Farms
The first frost night paid for the whole installation.
Marco Ferreira
Orchard manager, Kestrel
I stopped driving out at three in the morning to check a thermometer.

MDX of this sample

<Testimonials title="The people who run them" columns={2}>
  <Testimonial name="Anna Lindqvist" role="Head of agronomy, Almara Farms" avatar="avatar-01.jpg" quote="The first frost night paid for the whole installation." />
  <Testimonial name="Marco Ferreira" role="Orchard manager, Kestrel" avatar="avatar-02.jpg" quote="I stopped driving out at three in the morning to check a thermometer." />
</Testimonials>

Props

Name	Type	Default
id	string
title	string
description	string
columns	1 \| 2 \| 3	2
theme	Theme	'dark'

Source apps/www/src/sections/Testimonials.astro @ gitt.one

---
/**
 * Testimonials — quotes with a face and a role.
 *
 * Cards with a round photo on a band (<Testimonial>); a standalone pull
 * quote is <Quote>. columns 1|2|3
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  columns?: 1 | 2 | 3;
  theme?: Theme;
}
const { id, title, description, columns = 2, theme = 'dark' } = Astro.props;
const cols = { 1: 'max-w-3xl mx-auto', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 lg:grid-cols-3' }[columns];
---

<Section id={id} title={title} description={description} theme={theme} heading="left">
  <ul class:list={['grid list-none grid-cols-1 gap-6', cols]} data-variant="grid">
    <slot />
  </ul>
</Section>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.