Security and trust

Proof that data is safe, in seven layouts: drawn certificate seals, privacy promises, a status board, a guarantee stamp, a security diagram, security questions and a compact row of badges.

7 variants

Switch category

Certificates

Four drawn, neutral seals with issuer, date and a link to the report.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="certificates" items={[{ shape, codeTop, code, title, description, meta, href }]} />

Source

Privacy promises

Four promises in a hairline grid next to a card that says where data lives.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="privacy" items={[{ icon, title, description }]} aside={{ title, rows, action }} />

Source

Uptime with status bar

Ninety days per service as bars, thirty on the phone, with legend and status page link.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="status" components={[{ name, uptime, days }]} statusHref="…" />

Source

Guarantee

A slowly turning stamp with the promise around the edge, terms beside it.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="guarantee" guarantee={{ ring, value, unit, points }} title="…" actions={…} />

Source

Security architecture

The path of data from device to storage as a diagram, across on desktop and down on the phone.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="architecture" layers={[{ title, icon, points }]} links={["TLS 1.3", …]} items={[…]} />

Source

Security questions

The questions IT departments ask, with a card to reach the security team.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="faq" items={[{ icon, title, description }]} aside={{ title, description, action }} />

Source

Badge row

A compact row of seals for under a hero or above a footer.

Open in Studio

Installv1.0.0

aiw add @ai-website/trust

Brings along utils, kit, icon, section, reveal

Usage

<Trust variant="badges" title="…" items={[{ shape, codeTop, code, title, meta }]} />

Source

Details

What Security and trust brings along, read from the registry and the source.

Area: Marketing
Variants: 7
Version: 1.0.0 · since 1.0.0
File: components/ui/trust.tsx
Brings along: utilskiticonsectionreveal
npm packages: None
Languages: English and German, 16 texts of its own
Studio: All 7 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The TrustProps interface from components/ui/trust.tsx, with the comments from the code.

variantoptional
TrustVariant
certificatesprivacystatusguaranteearchitecturefaqbadges
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
itemsoptional
TrustItem[]
certificates, privacy, faq (title is the question, description the answer), badges
componentsoptional
TrustComponent[]
status: the services with their daily history
statusHrefoptional
string
status: link to the full status page
guaranteeoptional
{ ring: string; value: string; unit: string; points?: string[] }
guarantee: the stamp. ring runs around the edge, value and unit sit in the middle.
layersoptional
TrustLayer[]
architecture: the layers from device to storage, and the label on each connection
linksoptional
string[]
asideoptional
{ icon?: IconName; title: string; description?: React.ReactNode; rows?: { label: string; value: string }[]; action?: React.ReactNode }
privacy and faq: a highlighted card, e.g. where data lives or how to reach security

Built-in texts

Security and trust writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 16 texts

Key	English	German
report	English View report	German Bericht ansehen
operational	English All systems operational	German Alle Systeme laufen
degraded	English Partial degradation	German Teilweise eingeschränkt
uptime	English uptime	German Verfügbarkeit
daysAgo	English days ago	German Tagen
today	English Today	German Heute
ok	English Operational	German In Betrieb
slow	English Degraded	German Eingeschränkt
down	English Outage	German Ausfall
history	English Status history	German Statusverlauf
statusPage	English Open status page	German Statusseite öffnen
updated	English Updated every minute	German Jede Minute aktualisiert
contact	English Talk to our security team	German Mit unserem Sicherheitsteam sprechen
encrypted	English encrypted	German verschlüsselt
faq	English Security questions	German Fragen zur Sicherheit
flow	English Data flow	German Datenfluss

Read from the source of the component.

Security and trust handles the keys Arrow left, Arrow right and Space itself.
Sets aria-label, aria-valuemax, aria-valuemin, aria-valuenow and aria-valuetext, so screen readers announce purpose and state.
Uses the roles group and slider.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 15 places in the code switch motion off then.

Frequent questions

How do I install Security and trust?

With aiw add @ai-website/trust. The command puts components/ui/trust.tsx into your project, the code is yours from then on. It brings along icon, section and reveal. It needs no further npm packages.

Which variants does Security and trust have?

7 variants, Certificates, Privacy promises, Uptime with status bar, Guarantee, Security architecture, Security questions and Badge row. You pick one with the variant prop, for example variant="privacy".

Can I translate the texts of Security and trust?

Yes. Security and trust carries 16 texts of its own in English and German, such as “View report”, “All systems operational” and “Partial degradation”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Security and trust?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Security and trust with aiw_components and install it with aiw_add @ai-website/trust. Name the variant in your prompt, for example variant="certificates", and the assistant writes your content straight into the props.

Can I adjust Security and trust without code?

Yes, in the Studio. All 7 variants are editable there, texts, lists and switches. The Studio writes the matching Trust code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Security and trust on a page.