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.
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
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
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle TrustProps aus components/ui/trust.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalTrustVariantcertificatesprivacystatusguaranteearchitecturefaqbadges
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodeactionsoptionalReact.ReactNodeitemsoptionalTrustItem[]certificates, privacy, faq (title is the question, description the answer), badges
componentsoptionalTrustComponent[]status: the services with their daily history
statusHrefoptionalstringstatus: 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.
layersoptionalTrustLayer[]architecture: the layers from device to storage, and the label on each connection
linksoptionalstring[]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
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| report | Englisch View report | Deutsch Bericht ansehen |
| operational | Englisch All systems operational | Deutsch Alle Systeme laufen |
| degraded | Englisch Partial degradation | Deutsch Teilweise eingeschränkt |
| uptime | Englisch uptime | Deutsch Verfügbarkeit |
| daysAgo | Englisch days ago | Deutsch Tagen |
| today | Englisch Today | Deutsch Heute |
| ok | Englisch Operational | Deutsch In Betrieb |
| slow | Englisch Degraded | Deutsch Eingeschränkt |
| down | Englisch Outage | Deutsch Ausfall |
| history | Englisch Status history | Deutsch Statusverlauf |
| statusPage | Englisch Open status page | Deutsch Statusseite öffnen |
| updated | Englisch Updated every minute | Deutsch Jede Minute aktualisiert |
| contact | Englisch Talk to our security team | Deutsch Mit unserem Sicherheitsteam sprechen |
| encrypted | Englisch encrypted | Deutsch verschlüsselt |
| faq | Englisch Security questions | Deutsch Fragen zur Sicherheit |
| flow | Englisch Data flow | Deutsch 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.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Marketing, demselben Bereich des Kits.
- Use CasesEin Angebot, gezeigt für die Menschen, die es nutzen.
- Changelog und RoadmapWas neu ist und was als Nächstes kommt.
- ServicesWas du anbietest, als Cards, Listen und Detail Rows.
- Launch und WaitlistCountdowns, Waitlists und Launch-Momente.
- Alles aus MarketingSections, die verkaufen. Heroes, Features, Pricing, Social Proof und Calls to Action.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Security und Trust stehen.
Quellcode lädt