## Margin Quote (S—012)

Editorial testimonials with a hanging-punctuation serif pull quote, margin attribution and tick progress.

- URL: https://sundaeui.dev/components/margin-quote
- Category: Page sections · Art direction: Editorial
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/margin-quote.json`
- Tags: tailwind, typography, testimonial, section, animated, carousel, react, landing-page

Testimonials set like a magazine spread, not a row of cards with avatars and stars. The quote is large and serif, with the opening mark hung outside the text block so the left edge stays clean. Attribution sits in a narrow margin column separated by a hairline rule.
Quotes advance on their own, and the active tick fills to show the time left. Hovering or focusing pauses everything. Transitions slide and un-blur in the direction you are moving.
Written in Tailwind with the stone palette. It collapses to a single column on small screens, with attribution moving below the quote.

### Usage

```tsx
import { MarginQuote } from '@/components/sundae/margin-quote'

<MarginQuote
  interval={7000}
  quotes={[
    { quote: 'We stopped designing a new modal for every feature…', name: 'Ines Duarte', role: 'Head of Design, Fieldnote', note: 'Customer since 2024' },
    { quote: '…', name: '…', role: '…' },
  ]}
/>
```

### Props

- `quotes` (`Quote[]`, required): { quote, name, role, note? }.
- `interval` (`number`, default `7000`): Auto-advance in ms. Pass 0 to disable.
- `label` (`string`, default `'Testimonials'`): Accessible name of the carousel.

### Accessibility

- Uses aria-roledescription="carousel". Auto-rotation pauses on hover and focus, and never runs with reduced motion.
- The live region is polite only while the user is interacting, so screen readers are not interrupted by automatic changes.
- Arrow keys move between quotes, and each tick is a labelled tab button.