# Testimonial · MIAN

One large pull quote, or a wall of short customer quotes.

- Id: `testimonial` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/testimonial
- Use for: customer quote, testimonials, reviews, social proof, pull quote, press quote.
- On a page: proof · prominence medium · density low. Usually after: bento, feature-grid, process. Usually before: pricing, cta, faq.
- Alternatives: figures, logo-cloud, review-summary.
- Avoid: Never invent quotes, names or roles. One specific, attributed quote beats a wall of vague ones.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-quote`: A <figure> with a large <blockquote> and a <figcaption> (avatar, name, role). mn-quote-center centres it.
- `mn-testimonials`: A masonry wall of mn-testimonial cards: 1, 2, then 3 columns.
- `mn-testimonial`: A short quote. Add mn-card for the noodle’s surface.

## Accessibility

- Use <figure>, <blockquote> and <figcaption> so the quote and its author are associated.
- Name real people with their permission; never invent quotes.

## Examples

### Pull quote

```html
<section class="mn-section mn-section-sm"><div class="mn-container">
  <figure class="mn-quote">
    <blockquote><p>“We used to lose the last week of every month to reconciliations. Now the close is a Tuesday meeting.”</p></blockquote>
    <figcaption><span class="mn-avatar">MR</span><span><strong>Maren Richter</strong><small>Head of Finance, Halden &amp; Co</small></span></figcaption>
  </figure>
</div></section>
```

### Testimonial wall

```html
<section class="mn-section mn-section-sm"><div class="mn-container mn-testimonials">
  <figure class="mn-card mn-testimonial"><blockquote><p>Setup took an afternoon. The first close took three days instead of eleven.</p></blockquote><figcaption><span class="mn-avatar mn-avatar-sm">JO</span><span><strong>Jonas Olsen</strong><small>Controller, Kestrel</small></span></figcaption></figure>
  <figure class="mn-card mn-testimonial"><blockquote><p>The audit trail is the feature. Our auditors asked which tool we were using.</p></blockquote><figcaption><span class="mn-avatar mn-avatar-sm">AP</span><span><strong>Ana Popescu</strong><small>CFO, Orbital</small></span></figcaption></figure>
  <figure class="mn-card mn-testimonial"><blockquote><p>Eight entities, four currencies, one person. That used to be impossible.</p></blockquote><figcaption><span class="mn-avatar mn-avatar-sm">LK</span><span><strong>Lea Kim</strong><small>Finance lead, Marrow</small></span></figcaption></figure>
</div></section>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/testimonial/source