Testimonial
One large pull quote, or a wall of short customer quotes.
Pull quote
“We used to lose the last week of every month to reconciliations. Now the close is a Tuesday meeting.”
<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 & Co</small></span></figcaption>
</figure>
</div></section>Testimonial wall
Setup took an afternoon. The first close took three days instead of eleven.
The audit trail is the feature. Our auditors asked which tool we were using.
Eight entities, four currencies, one person. That used to be impossible.
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/testimonial.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.