Quotes

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

Quotes — one or two big pull quotes side by side, each a white <Quote> card with the speaker's name and photo in a brand-coloured footer. Use for: a strong statement from a customer or a partner on a light page, with the company logo if there is one. Not for: many short reviews on a dark band (<Testimonials>). Children: <Quote> tags, one (centered) or two (side by side).

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	Description
id	string		anchor of the section
title	string		the section heading
description	string		a paragraph under the heading
columns	1 \| 2	1	one centered card, or two side by side
theme	'light' \| 'muted' \| 'dark' \| 'brand' \| 'brand-dark'	'light'	background of the section

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

---
/**
 * Quotes — one or two big pull quotes side by side, each a white <Quote> card
 *   with the speaker's name and photo in a brand-coloured footer.
 *
 * Use for: a strong statement from a customer or a partner on a light page,
 *   with the company logo if there is one.
 * Not for: many short reviews on a dark band (<Testimonials>).
 * Children: <Quote> tags, one (centered) or two (side by side).
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** one centered card, or two side by side */
  columns?: 1 | 2;
  /** background of the section */
  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@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.