Testimonial

apps/www/src/sections/Testimonial.astro · 31 lines · group Testimonials

Testimonial — one item of <Testimonials>. `quote` is the text (or the slot), `avatar`/`logo` are image file names.

In the fleet

Used on 1 site built with this engine.

Samples 1

sampleshown inside <Testimonials>

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	Required
name	string	yes
role	string
quote	string
avatar	string
logo	string

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

---
/**
 * Testimonial — one item of <Testimonials>. `quote` is the text (or the
 * slot), `avatar`/`logo` are image file names.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';

interface Props {
  name: string;
  role?: string;
  quote?: string;
  avatar?: string;
  logo?: string;
}
const { name, role, quote, avatar, logo } = Astro.props;
const avatarImg = avatar ? await resolveImage(avatar) : undefined;
const logoImg = logo ? await resolveImage(logo) : undefined;
---

<li class="rounded-lg bg-primary-900/40 px-4 py-8 text-center xl:px-8 xl:text-left">
  {avatarImg && <Image src={avatarImg} alt="" widths={[400]} class="mx-auto h-40 w-40 rounded-full object-cover xl:h-44 xl:w-44" />}
  <div class="mt-4 space-y-1 text-lg">
    <h3 class="text-2xl font-medium text-white">{name}</h3>
    {role && <p class="text-xl font-medium text-primary-200">{role}</p>}
    {quote && <p class="text-xl text-gray-300">{quote}</p>}
    <slot />
  </div>
</li>

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.