Trust Badge Row
Small pill badges communicate tangible trust attributes (security, compliance, reliability) inline without interrupting the reading flow. Placed directly below or beside the primary hero CTA.
$ prime install @community/pattern-trust-badge-row Projection
Always in _index.xml · the agent never has to ask for this.
TrustBadgeRow [pattern] v1.0.0
Small pill badges communicate tangible trust attributes (security, compliance, reliability) inline without interrupting the reading flow. Placed directly below or beside the primary hero CTA.
Loaded when retrieval picks the atom as adjacent / supporting.
TrustBadgeRow [pattern] v1.0.0
Small pill badges communicate tangible trust attributes (security, compliance, reliability) inline without interrupting the reading flow. Placed directly below or beside the primary hero CTA.
Label
Trust Badge Row
Problem
Visitors need immediate reassurance that a product is legitimate and safe immediately after reading the hero CTA — but full security sections would interrupt the conversion flow.
Solution
A flex row of pill-shaped badges with an icon + short label. Each badge sits in a rounded container with a subtle border and muted surface. Row wraps on mobile.
Structure
.trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface-warm); /* slightly warm white or light neutral */
padding: 6px 16px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
border: 1px solid hsl(var(--border));
white-space: nowrap;
}
.trust-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
}
.trust-badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
<!-- HTML -->
<div class="trust-badge-row" role="list" aria-label="Trust attributes">
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- shield icon --></svg>
Audited
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- umbrella icon --></svg>
Insured
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- clock icon --></svg>
24/7 Monitoring
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- lock icon --></svg>
256-bit Encryption
</span>
</div>
Loaded when retrieval picks the atom as a focal / direct hit.
TrustBadgeRow [pattern] v1.0.0
Small pill badges communicate tangible trust attributes (security, compliance, reliability) inline without interrupting the reading flow. Placed directly below or beside the primary hero CTA.
Label
Trust Badge Row
Problem
Visitors need immediate reassurance that a product is legitimate and safe immediately after reading the hero CTA — but full security sections would interrupt the conversion flow.
Solution
A flex row of pill-shaped badges with an icon + short label. Each badge sits in a rounded container with a subtle border and muted surface. Row wraps on mobile.
Structure
.trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface-warm); /* slightly warm white or light neutral */
padding: 6px 16px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
border: 1px solid hsl(var(--border));
white-space: nowrap;
}
.trust-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
}
.trust-badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
<!-- HTML -->
<div class="trust-badge-row" role="list" aria-label="Trust attributes">
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- shield icon --></svg>
Audited
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- umbrella icon --></svg>
Insured
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- clock icon --></svg>
24/7 Monitoring
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- lock icon --></svg>
256-bit Encryption
</span>
</div>
Label
Trust Badge Row
Problem
Visitors need immediate reassurance that a product is legitimate and safe immediately after reading the hero CTA — but full security sections would interrupt the conversion flow.
Solution
A flex row of pill-shaped badges with an icon + short label. Each badge sits in a rounded container with a subtle border and muted surface. Row wraps on mobile.
Structure
.trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface-warm); /* slightly warm white or light neutral */
padding: 6px 16px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
border: 1px solid hsl(var(--border));
white-space: nowrap;
}
.trust-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
}
.trust-badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
<!-- HTML -->
<div class="trust-badge-row" role="list" aria-label="Trust attributes">
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- shield icon --></svg>
Audited
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- umbrella icon --></svg>
Insured
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- clock icon --></svg>
24/7 Monitoring
</span>
<span class="trust-badge" role="listitem">
<svg aria-hidden="true"><!-- lock icon --></svg>
256-bit Encryption
</span>
</div>
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-trust-badge-row/atom.yaml