Quotes

apps/www/src/sections/Quotes.astro · 26 lines · group Testimonials

Quotes — one or two big pull quotes side by side (<Quote>), each with the speaker and, if there is one, a company logo. <Testimonials> is the other shape: small cards with a round photo on a band.

In the fleet

Not used by any site yet.

Samples 1

sample

What they told us after the season

We used to argue about whether it was colder in the lower field. Now we know, and we plan the night around it.
Jakub Novak Farm owner, Orsa Berry

The alert names the field. That one detail is why the crew trusts it.
Sara Adeyemi Operations lead, Vinland Greens

MDX of this sample

<Quotes title="What they told us after the season" columns={2}>
  <Quote quote="We used to argue about whether it was colder in the lower field. Now we know, and we plan the night around it." name="Jakub Novak" role="Farm owner, Orsa Berry" />
  <Quote quote="The alert names the field. That one detail is why the crew trusts it." name="Sara Adeyemi" role="Operations lead, Vinland Greens" />
</Quotes>

Props

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

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

---
/**
 * Quotes — one or two big pull quotes side by side (<Quote>), each with the
 * speaker and, if there is one, a company logo. <Testimonials> is the other
 * shape: small cards with a round photo on a band.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

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

<Section id={id} title={title} description={description} theme={theme}>
  <div class:list={['grid grid-cols-1 gap-8', cols]}>
    <slot />
  </div>
</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.