Zum Inhalt springen
UI Kit
Accent

Security und Trust

Belege, dass Daten sicher sind, in sieben Aufbauten: gezeichnete Siegel, Datenschutz-Zusagen, Statusleiste, Garantie-Stempel, Sicherheitsdiagramm, Fragen zur Sicherheit und eine kompakte Siegelreihe.

7 Variants
Kategorie wechseln

Sicherheit und Vertrauen

Zertifikate

Vier gezeichnete, neutrale Siegel mit Prüfstelle, Datum und Link zum Bericht.

Im Studio öffnen

Datenschutz-Zusagen

Vier Zusagen im Haarlinien-Raster neben einer Karte, die sagt, wo Daten liegen.

Im Studio öffnen

Verfügbarkeit mit Statusleiste

Neunzig Tage je Dienst als Balken, dreißig auf dem Telefon, mit Legende und Link zur Statusseite.

Im Studio öffnen

Garantie

Ein langsam drehender Stempel mit dem Versprechen am Rand, die Bedingungen daneben.

Im Studio öffnen

Sicherheitsarchitektur

Der Weg der Daten vom Gerät bis zum Speicher als Diagramm, quer am Desktop und senkrecht auf dem Telefon.

Im Studio öffnen

Fragen zur Sicherheit

Die Fragen, die IT-Abteilungen stellen, mit einer Karte zum Sicherheitsteam.

Im Studio öffnen

Siegelreihe

Eine kompakte Reihe von Siegeln für unter einem Hero oder über dem Footer.

Im Studio öffnen

Details

Was Sicherheit und Vertrauen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
7
Version
1.0.0 · seit 1.0.0
Datei
components/ui/trust.tsx
Bringt mit
utilskiticonsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 16 eigene Texte

Props

Die Schnittstelle TrustProps aus components/ui/trust.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Sicherheit und Vertrauen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 16 Texte anzeigen
reportEnglisch View reportDeutsch Bericht ansehen
operationalEnglisch All systems operationalDeutsch Alle Systeme laufen
degradedEnglisch Partial degradationDeutsch Teilweise eingeschränkt
uptimeEnglisch uptimeDeutsch Verfügbarkeit
daysAgoEnglisch days agoDeutsch Tagen
todayEnglisch TodayDeutsch Heute
okEnglisch OperationalDeutsch In Betrieb
slowEnglisch DegradedDeutsch Eingeschränkt
downEnglisch OutageDeutsch Ausfall
historyEnglisch Status historyDeutsch Statusverlauf
statusPageEnglisch Open status pageDeutsch Statusseite öffnen
updatedEnglisch Updated every minuteDeutsch Jede Minute aktualisiert
contactEnglisch Talk to our security teamDeutsch Mit unserem Sicherheitsteam sprechen
encryptedEnglisch encryptedDeutsch verschlüsselt
faqEnglisch Security questionsDeutsch Fragen zur Sicherheit
flowEnglisch Data flowDeutsch Datenfluss

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Sicherheit und Vertrauen reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-label, aria-valuemax, aria-valuemin, aria-valuenow und aria-valuetext, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group und slider.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 15 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Sicherheit und Vertrauen?

Mit aiw add @ai-website/trust. Der Befehl legt die Datei components/ui/trust.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Sicherheit und Vertrauen?

7 Varianten, Zertifikate, Datenschutz-Zusagen, Verfügbarkeit mit Statusleiste, Garantie, Sicherheitsarchitektur, Fragen zur Sicherheit und Siegelreihe. Du wählst sie mit der Prop variant, zum Beispiel variant="privacy".

Kann ich die Texte von Sicherheit und Vertrauen übersetzen?

Ja. Sicherheit und Vertrauen bringt 16 eigene Texte auf Deutsch und Englisch mit, etwa „Bericht ansehen“, „Alle Systeme laufen“ und „Teilweise eingeschränkt“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Sicherheit und Vertrauen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Sicherheit und Vertrauen mit aiw_components und installieren sie mit aiw_add @ai-website/trust. Nenn im Prompt die Variante, etwa variant="certificates", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Sicherheit und Vertrauen ohne Code anpassen?

Ja, im Studio. Alle 7 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Trust-Code zum Kopieren.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert