Single testimonial card

Use it when

One wide card with a person at real scale beside what they said, closing on a strip across the foot of the card that states the outcome.

Category

Trust

Layout archetype

Register grid

Page position

middle

Purpose

reassure

Field

light

Interaction

static

Motifs

Elevation frame, Margin note

Content it requires

• Exactly one cleared statement
• A named, consenting person with a one-line context
• An outcome of 8 to 14 words
• A portrait at card height

Do not use it when

• One entry. A second turns considered testimony into a wall of praise and weakens the outcome strip.
• The outcome must be a stated change, not a restatement of the quote. If it cannot be written, the entry is not ready.
• The one place a person is not shown as a circle. A circular avatar at this size reads as a byline, not a person.
• The play control only appears when an href is supplied. Never imply video that does not exist.
• Attribution stays labelled as a placeholder until a statement is cleared in writing.

Variants

href and hrefLabel per entry add a native play control over the portrait for a video statement.

Implementation

src/components/patterns/TrustTestimonyRegister.astro

---
import TrustTestimonyRegister from '../components/patterns/TrustTestimonyRegister.astro';
---

<TrustTestimonyRegister />

Import directly. Do not route production through patternComponents. This specimen is rendered with Pattern Lab demo props (entries) that a production page should replace with its own content.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

• Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
• No interactive controls beyond links and buttons inherited from the design system.
• Colour never carries meaning alone: every state marker is paired with text.
• Motion respects prefers-reduced-motion.