Trust Security Cert
Compliance badges (SOC 2, ISO 27001, GDPR, PCI DSS) in a centered flex row at 0.65 opacity with 30% grayscale. Positioned at the bottom of the page where procurement teams look.
$ prime install @community/pattern-trust-security-cert Projection
Always in _index.xml · the agent never has to ask for this.
TrustSecurityCert [pattern] v1.0.0
Compliance badges (SOC 2, ISO 27001, GDPR, PCI DSS) in a centered flex row at 0.65 opacity with 30% grayscale. Positioned at the bottom of the page where procurement teams look.
Loaded when retrieval picks the atom as adjacent / supporting.
TrustSecurityCert [pattern] v1.0.0
Compliance badges (SOC 2, ISO 27001, GDPR, PCI DSS) in a centered flex row at 0.65 opacity with 30% grayscale. Positioned at the bottom of the page where procurement teams look.
Label
Security Certifications Badge Row
Problem
Enterprise buyers scan for compliance certifications as a procurement requirement before signing contracts — but these badges distract early visitors who are not yet at the decision stage.
Solution
A lightly-styled, centered badge row at the bottom of the page with a small all-caps 'Compliance & Security' label. Images at 32px height, 0.65 opacity, grayscale(30%) — present and credible but not visually dominant.
Structure
.cert-badge-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
justify-content: center;
opacity: 0.65;
}
.cert-badge-row img {
height: 32px;
width: auto;
filter: grayscale(30%);
}
.cert-label {
font-size: 0.6875rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
color: hsl(var(--muted-foreground));
margin-bottom: 0.75rem;
}
<!-- HTML -->
<div class="cert-section">
<p class="cert-label">Compliance & Security</p>
<div class="cert-badge-row" role="list" aria-label="Security certifications">
<img src="/certs/soc2.svg" alt="SOC 2 Type II certified" role="listitem" />
<img src="/certs/iso27001.svg" alt="ISO 27001 certified" role="listitem" />
<img src="/certs/gdpr.svg" alt="GDPR compliant" role="listitem" />
<img src="/certs/pci-dss.svg" alt="PCI DSS compliant" role="listitem" />
</div>
</div>
Loaded when retrieval picks the atom as a focal / direct hit.
TrustSecurityCert [pattern] v1.0.0
Compliance badges (SOC 2, ISO 27001, GDPR, PCI DSS) in a centered flex row at 0.65 opacity with 30% grayscale. Positioned at the bottom of the page where procurement teams look.
Label
Security Certifications Badge Row
Problem
Enterprise buyers scan for compliance certifications as a procurement requirement before signing contracts — but these badges distract early visitors who are not yet at the decision stage.
Solution
A lightly-styled, centered badge row at the bottom of the page with a small all-caps 'Compliance & Security' label. Images at 32px height, 0.65 opacity, grayscale(30%) — present and credible but not visually dominant.
Structure
.cert-badge-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
justify-content: center;
opacity: 0.65;
}
.cert-badge-row img {
height: 32px;
width: auto;
filter: grayscale(30%);
}
.cert-label {
font-size: 0.6875rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
color: hsl(var(--muted-foreground));
margin-bottom: 0.75rem;
}
<!-- HTML -->
<div class="cert-section">
<p class="cert-label">Compliance & Security</p>
<div class="cert-badge-row" role="list" aria-label="Security certifications">
<img src="/certs/soc2.svg" alt="SOC 2 Type II certified" role="listitem" />
<img src="/certs/iso27001.svg" alt="ISO 27001 certified" role="listitem" />
<img src="/certs/gdpr.svg" alt="GDPR compliant" role="listitem" />
<img src="/certs/pci-dss.svg" alt="PCI DSS compliant" role="listitem" />
</div>
</div>
Label
Security Certifications Badge Row
Problem
Enterprise buyers scan for compliance certifications as a procurement requirement before signing contracts — but these badges distract early visitors who are not yet at the decision stage.
Solution
A lightly-styled, centered badge row at the bottom of the page with a small all-caps 'Compliance & Security' label. Images at 32px height, 0.65 opacity, grayscale(30%) — present and credible but not visually dominant.
Structure
.cert-badge-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
justify-content: center;
opacity: 0.65;
}
.cert-badge-row img {
height: 32px;
width: auto;
filter: grayscale(30%);
}
.cert-label {
font-size: 0.6875rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
color: hsl(var(--muted-foreground));
margin-bottom: 0.75rem;
}
<!-- HTML -->
<div class="cert-section">
<p class="cert-label">Compliance & Security</p>
<div class="cert-badge-row" role="list" aria-label="Security certifications">
<img src="/certs/soc2.svg" alt="SOC 2 Type II certified" role="listitem" />
<img src="/certs/iso27001.svg" alt="ISO 27001 certified" role="listitem" />
<img src="/certs/gdpr.svg" alt="GDPR compliant" role="listitem" />
<img src="/certs/pci-dss.svg" alt="PCI DSS compliant" role="listitem" />
</div>
</div>
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-trust-security-cert/atom.yaml