Trust Testimonial Micro
A single inline testimonial — one sentence, one 36px avatar, one attribution — with a 3px primary-color left border accent. Placed contextually beside pricing to answer 'has someone like me succeeded?'
$ aoe install @community/pattern-trust-testimonial-microProjection
Always in _index.xml · the agent never has to ask for this.
TrustTestimonialMicro [pattern] v1.0.0
A single inline testimonial — one sentence, one 36px avatar, one attribution — with a 3px primary-color left border accent. Placed contextually beside pricing to answer 'has someone like me succeeded?'
Loaded when retrieval picks the atom as adjacent / supporting.
TrustTestimonialMicro [pattern] v1.0.0
A single inline testimonial — one sentence, one 36px avatar, one attribution — with a 3px primary-color left border accent. Placed contextually beside pricing to answer 'has someone like me succeeded?'
Label
Testimonial Micro-Quote
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Problem
Full testimonial carousels require interaction and are often skipped. Visitors beside the pricing block need a single peer validation to overcome the final conversion hesitation.
Solution
A
Structure
.testimonial-micro {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
background: hsl(var(--surface));
border: 1px solid hsl(var(--border));
border-left: 3px solid hsl(var(--primary));
border-radius: 0 0.5rem 0.5rem 0;
max-width: 36rem;
}
.testimonial-micro .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.testimonial-micro .quote {
font-size: 0.875rem;
color: hsl(var(--foreground));
line-height: 1.4;
font-style: italic;
}
.testimonial-micro .attribution {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
font-style: normal;
margin-top: 0.25rem;
display: block;
}
<!-- HTML -->
<figure class="testimonial-micro">
<img
class="avatar"
src="/avatars/sarah-k.jpg"
alt="Sarah K., Head of Finance at Meridian"
/>
<figcaption>
<p class="quote">"Setup took under 10 minutes and we were earning the same day."</p>
<span class="attribution">Sarah K. — Head of Finance, Meridian</span>
</figcaption>
</figure>
Loaded when retrieval picks the atom as a focal / direct hit.
TrustTestimonialMicro [pattern] v1.0.0
A single inline testimonial — one sentence, one 36px avatar, one attribution — with a 3px primary-color left border accent. Placed contextually beside pricing to answer 'has someone like me succeeded?'
Label
Testimonial Micro-Quote
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Problem
Full testimonial carousels require interaction and are often skipped. Visitors beside the pricing block need a single peer validation to overcome the final conversion hesitation.
Solution
A
Structure
.testimonial-micro {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
background: hsl(var(--surface));
border: 1px solid hsl(var(--border));
border-left: 3px solid hsl(var(--primary));
border-radius: 0 0.5rem 0.5rem 0;
max-width: 36rem;
}
.testimonial-micro .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.testimonial-micro .quote {
font-size: 0.875rem;
color: hsl(var(--foreground));
line-height: 1.4;
font-style: italic;
}
.testimonial-micro .attribution {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
font-style: normal;
margin-top: 0.25rem;
display: block;
}
<!-- HTML -->
<figure class="testimonial-micro">
<img
class="avatar"
src="/avatars/sarah-k.jpg"
alt="Sarah K., Head of Finance at Meridian"
/>
<figcaption>
<p class="quote">"Setup took under 10 minutes and we were earning the same day."</p>
<span class="attribution">Sarah K. — Head of Finance, Meridian</span>
</figcaption>
</figure>
Relations
related: [@community/pattern-trust-badge-row, @community/pattern-trust-logo-strip, @community/pattern-trust-social-proof-numbers, @community/pattern-trust-security-cert, @community/rule-trust-signal-placement, @community/rule-trust-signal-critical, @community/anti-pattern-fake-trust-signals]
Label
Testimonial Micro-Quote
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Problem
Full testimonial carousels require interaction and are often skipped. Visitors beside the pricing block need a single peer validation to overcome the final conversion hesitation.
Solution
A
Structure
.testimonial-micro {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
background: hsl(var(--surface));
border: 1px solid hsl(var(--border));
border-left: 3px solid hsl(var(--primary));
border-radius: 0 0.5rem 0.5rem 0;
max-width: 36rem;
}
.testimonial-micro .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.testimonial-micro .quote {
font-size: 0.875rem;
color: hsl(var(--foreground));
line-height: 1.4;
font-style: italic;
}
.testimonial-micro .attribution {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
font-style: normal;
margin-top: 0.25rem;
display: block;
}
<!-- HTML -->
<figure class="testimonial-micro">
<img
class="avatar"
src="/avatars/sarah-k.jpg"
alt="Sarah K., Head of Finance at Meridian"
/>
<figcaption>
<p class="quote">"Setup took under 10 minutes and we were earning the same day."</p>
<span class="attribution">Sarah K. — Head of Finance, Meridian</span>
</figcaption>
</figure>
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/pattern-trust-testimonial-micro/atom.yaml