Zum Inhalt springen
UI Kit
Accent

Logo Clouds für Kunden und Partner

Kunden und Partner auf einen Blick, in acht Aufbauten von der ruhigen Reihe bis zum Laufband und dunklen Band.

8 Variants
Kategorie wechseln

Referenzen, ruhig gezeigt

Eine Logo Cloud zeigt auf einen Blick, wer schon mit dir arbeitet. Die acht Varianten hier nehmen deine Logos als Inline-SVG oder Bild, und SVG-Logos übernehmen eine ruhige Textfarbe, so konkurrieren zwanzig Markenfarben nicht mit deiner eigenen Seite.

Die Reihe passt zu fünf bis sieben Logos direkt unter dem Hero. Das Raster mit Haarlinien fasst ein Dutzend und mehr in ordentliche Zellen. Das Laufband lässt eine lange Liste endlos laufen und hält bei Hover und Fokus an. „Mit Zitat“ und „Mit Zahl“ ergänzen einen Satz oder eine Zahl, „Im Wechsel“ tauscht Gruppen an derselben Stelle, „Auf dunklem Band“ gibt der Reihe eine eigene Fläche zwischen zwei hellen Sections.

Frag vorher, ob du ein Kundenlogo zeigen darfst. Gib allen Logos dieselbe Höhe statt derselben Breite, dann wirken breite und quadratische Marken ausgewogen. Jedes Logo trägt den Firmennamen für Screenreader, gib ihn als name mit jedem Eintrag mit.

Logo-Wolke

Reihe

Eine ruhige Zeile Logos unter einer kurzen Zeile.

Im Studio öffnen

Raster mit Haarlinien

Zwölf Zellen, die lückenlos schließen und beim Darüberfahren aufhellen.

Im Studio öffnen

Laufband

Zwei Reihen laufen gegeneinander, halten beim Darüberfahren, stehen bei reduzierter Bewegung still.

Im Studio öffnen

Karten

Jedes Logo auf einer eigenen Karte mit Branche und Link zur Geschichte.

Im Studio öffnen

Mit Zitat

Eine Kundenstimme links, die Logos in einem gefassten Raster rechts.

Im Studio öffnen

Mit Zahl

Eine große Zahl führt, die Logos folgen in einer Reihe mit Haarlinien dazwischen.

Im Studio öffnen

Im Wechsel

Sechs Plätze tauschen nacheinander ihr Logo, achtzehn Logos auf dem Platz von sechs.

Im Studio öffnen

Auf dunklem Band

Ein dunkles Band mit weichem Akzentlicht, in beiden Modi dunkel.

Im Studio öffnen

Details

Was Logo-Wolke mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
8
Version
1.0.0 · seit 1.0.0
Datei
components/ui/logos.tsx
Bringt mit
utilskiticonsectionrevealnumber-tickermotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 2 eigene Texte
Studio
Alle 8 Variants bearbeitbar
In Sammlungen
SaaS-Landingpage
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • variantoptional
    LogosVariant

    rowgridmarqueecardswith-quotewith-numberrotatingon-dark-band

  • titleoptional
    React.ReactNode

    Short line above the logos, e.g. "Trusted by teams at"

  • descriptionoptional
    React.ReactNode
  • logosPflicht
    LogoItem[]
  • quoteoptional
    LogosQuote

    with-quote

  • numberoptional
    { value: string; label: React.ReactNode }

    with-number: a big figure and what it counts

  • actionoptional
    { label: string; href: string }

    A link under or next to the logos

Eingebaute Texte

Diese Texte schreibt Logo-Wolke selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 2 Texte anzeigen
customersEnglisch CustomersDeutsch Kunden
storyEnglisch Read the storyDeutsch Zur Geschichte

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-label, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rolle group.
  • 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. 11 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Logo-Wolke?

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

Welche Varianten hat Logo-Wolke?

8 Varianten, Reihe, Raster mit Haarlinien, Laufband, Karten, Mit Zitat, Mit Zahl, Im Wechsel und Auf dunklem Band. Du wählst sie mit der Prop variant, zum Beispiel variant="grid".

Kann ich die Texte von Logo-Wolke übersetzen?

Ja. Logo-Wolke bringt 2 eigene Texte auf Deutsch und Englisch mit, etwa „Kunden“ und „Zur Geschichte“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Logo-Wolke einbauen?

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

Kann ich Logo-Wolke ohne Code anpassen?

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

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Logo Clouds stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert