99.99%: Service reliability
52-minute annual error budget
An availability target is paired with public incident review and named operational ownership.
Evidence documented
Trust Evidence Grid
A free logo and stats section that turns trust badges into readable, inspectable evidence.
SOC 2: Independent controls review
12-month audit window
Illustrative security and availability controls are evidenced across a complete operating period.
Review evidenceISO 27001: Security management map
93 controls mapped
Responsibilities, risk treatment and operating evidence stay connected to one documented control set.
Review evidenceGDPR: European data rights
30-day request workflow
Access, export, correction and deletion requests follow a documented owner and response path.
Review evidenceRTO: Recovery planning
Under 4-hour restore target
Quarterly restoration exercises validate backups, escalation paths and accountable responders.
Evidence documentedTLS 1.3: Transport security
Encrypted connections by default
Supported traffic uses modern transport protection while stored records remain encrypted at rest.
Evidence documented
Customise
3
2.4s
0.08s
4px
22px
Code
<LogoTrustEvidence evidence={evidence} />Trust Evidence Grid is a free trust badges section React and Next.js teams can use to pair compliance marks with concrete operating facts, supporting detail and optional source links. Styled with Tailwind, it renders each item as readable text inside a semantic list, so the meaning survives without logo artwork, colour, motion or a working destination.
Motion reveals the cards once with a bounded 18 pixel rise and configurable stagger. A restrained verified marker may pulse only while the section is on screen and the document is visible, while linked cards receive equal hover and keyboard-focus treatment. Reduced motion renders the complete grid immediately with no rise, lift or pulse, and the rail layout always wraps instead of becoming an autoplaying marquee.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/logo-trust-evidenceUsage
import { LogoTrustEvidence } from "@/components/logo-trust-evidence";
const evidence = [
{
id: "soc-2",
mark: "SOC 2",
name: "Independent controls review",
fact: "12-month audit window",
detail: "Security and availability controls reviewed across a full period.",
href: "/trust/soc-2",
},
{
id: "availability",
mark: "99.99%",
name: "Service reliability",
fact: "52-minute annual error budget",
detail: "Availability backed by incident review and named ownership.",
},
{
id: "recovery",
mark: "RTO",
name: "Recovery planning",
fact: "Under 4-hour restore target",
detail: "Quarterly exercises validate backups and escalation paths.",
},
];
export function AssuranceProfile() {
return <LogoTrustEvidence evidence={evidence} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| evidence | ReadonlyArray<{ id; mark; name; fact; detail; href? }> | required | Three to eight valid items with unique ids. Malformed items and duplicates are omitted without mutating the input; fewer than three valid items render nothing. Root-relative and HTTP(S) destinations become links, while empty, fake or unsafe hrefs stay plain articles. |
| layout | "grid" | "rail" | "grid" | Wide-screen evidence composition. The rail wraps and never autoplays. |
| columns | 2 | 3 | 4 | 3 | Maximum wide-screen grid columns, clamped by the valid item count. |
| markerPulse | number | 2.4 | Verified-marker cycle in seconds, clamped to 1.2 through 6. Zero disables it. |
| stagger | number | 0.08 | Entrance stagger in seconds, clamped to 0 through 0.2. |
| lift | number | 4 | Linked-card hover and focus lift in CSS pixels, clamped to 0 through 10. |
| radius | number | 22 | Evidence-card radius in CSS pixels, clamped to 0 through 44. |
| className | string | undefined | Additional classes merged onto the labelled section. |
Customisation
Trust Evidence Grid exposes three Tier 3 tokens. Use --trust-evidence-accent for the compliance mark, marker, focus outline and linked-card emphasis, --trust-evidence-panel for card surfaces, and --trust-evidence-divider for card separators. All three fall back to semantic theme tokens. Because the accent also colours the 12px mark, give it a token that clears 4.5:1 on your panel; --primary-accent is the rung tuned for exactly that. Layout and movement stay bounded through the six scalar props:
.assurance-profile {
--trust-evidence-accent: var(--primary-accent);
--trust-evidence-panel: var(--surface);
--trust-evidence-divider: var(--border);
}
<LogoTrustEvidence
evidence={evidence}
className="assurance-profile"
layout="rail"
columns={4}
markerPulse={3.2}
stagger={0.12}
lift={6}
radius={28}
/>Frequently asked questions
- Is Trust Evidence Grid free for commercial use?
- Yes. Trust Evidence Grid is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Trust Evidence Grid remain accessible without marks or motion?
- Yes. Every standard or status has a readable name, concrete fact and supporting detail in semantic list markup. Optional destinations are real anchors with visible focus, while unlinked evidence stays a plain article. Reduced motion removes the entrance movement, card lift and marker pulse, and no JavaScript leaves every fact visible in the server HTML.
- How do I customise the evidence layout and movement?
- Choose a grid or wrapping rail, set two to four maximum grid columns, and tune markerPulse, stagger, lift and radius within their documented bounds. Set markerPulse to zero for a static marker. The accent, panel and divider tokens let the cards follow your theme without editing component code.