Testimonial

Overview

A Testimonial sits inside a section as a card on canvas. By the layering rule that means it always renders on background.accent.<hue>.subtler — the next step up from the section's opening surface. The decorative quote glyph inks in text.accent.<hue> (the 900 step) so the card stays inside the section's ramp.

Anatomy

Three vertical zones — the quote glyph, the quote body, the attribution. Standard padding 24 px (default) or 40 px (feature), with a generous 40 / 56 px gap between the quote block and the attribution.

Accents

Six accents, each rendering on the hue's subtler weight. Pick the accent that matches the surrounding section. The quote glyph inherits text.accent.<hue> so the testimonial stays inside one ramp top-to-bottom.

Sizes

Two sizes. Default is the 3-up grid card; feature is the full-width pull-quote — one per landing, treated as the marquee quote on the page.

Avatar

Optional. Add an avatar when the page carries multiple testimonials at once — it gives each speaker a distinct visual anchor in a grid. Skip it on a single-testimonial page; the name carries enough on its own.

In a grid

The most common composition — three testimonials in a row on a marketing landing. Each card sits on the same surface; the variety comes from the words, not from the chrome.

Behavior

• 01Quote real merchants, never fictionalise. Every testimonial in the product is a thing a real person said. Get it on the record (signed release for the name + role) before it ships.
• 02Cap the quote at four lines. Past four lines the testimonial reads as an article. If the speaker said more than four lines worth, edit it down — the best quote is the one that lands in the first read.
• 03No stars, no badges, no logos inside. The testimonial is just the words. We don't rate testimonials, we don't mark them “verified”, we don't hang the speaker's company logo inside the card. The role line carries that weight.
• 04One feature per landing. The feature size is a marquee — one per route at most. Use it to anchor the page; reach for the default size when you need three quotes in a row.
• 05Match the accent to the section. If the section above opens on orange.subtlest, the testimonial uses orange. The two surfaces should read as one thought, not two competing hues.

Accessibility

• Semantic structure: the testimonial renders as a <figure> with a <blockquote> wrapping the quote and a <figcaption> holding the attribution. Screen readers announce “quote, [body], end of quote, [name], [role]” without any ARIA wiring.
• Decorative glyph is hidden. The quote SVG carries aria-hidden="true" so it doesn't double-announce the quote role.
• Contrast: every accent ships text that meets WCAG AA on its surface. The neutral surface gives the body 17 : 1; the inverse surface gives 21 : 1. The role line uses the secondary ink (~7 : 1) so it stays AA at 12 px.
• Avatars need a label. If the avatar is an image, set alt="" (the name in the figcaption already carries the speaker's identity). If you must use an alt, name the person, not the image (“Lola”, not “Photo of a woman”).

Code

Pass the quote, the name, and the role. Optional avatar slot accepts any element so consumers can drop in an image, an Avatar component, or stylized initials.

import { Testimonial, Avatar } from "@flatpay-dk/ui";

// The Capital flyer's Citat 1
<Testimonial
  quote="In the furniture industry, purchases are often large and expensive items. Flatpay Capital makes it possible to act flexibly when opportunities arise."
  name="Marc"
  role="Owner of Refurnd"
/>

// Feature pull-quote — one per landing, anchored above the testimonial grid
<Testimonial
  size="feature"
  accent="orange"
  quote="The new refunds preview saves me from a phone call every time a customer disputes a charge."
  name="Pieter"
  role="Front of house, Brouwerij & co."
  avatar={<Avatar src="/people/pieter.jpg" alt="" size="md" />}
/>

// Categorical accents live on Testimonial itself; Sections stay neutral.
<Testimonial
  accent="green"
  quote="Capital was funded in five business days."
  name="Lola"
  role="Owner, Café Norden"
/>

Best practices

Props

Related