LogoCloud

Partner- und Förderer-Logos als Vertrauenselement. Das statische Grid passt sich automatisch an die Containerbreite an. Die Marquee-Variante scrollt CSS-only und pausiert beim Hover. Logos werden grau angezeigt und färben sich beim Hover ein.

Förderer-Logos (statisch)

Einsatz auf Projektseiten und Förder-Landingpages um institutionelle Glaubwürdigkeit zu schaffen.

Gefördert von — statisches Grid

Gefördert von

<LogoCloud title="Gefördert von" align="center" grayscale>
  <img src="/logos/bmuv.svg" alt="Bundesministerium für Umwelt und nukleare Sicherheit" />
  <img src="/logos/kfw.svg" alt="KfW Förderbank" />
  <img src="/logos/nrwbank.svg" alt="NRW.BANK" />
  <img src="/logos/eu.svg" alt="Europaeische Union — Europaeischer Fonds für regionale Entwicklung" />
</LogoCloud>

Partner-Logos (Marquee)

Für eine große Anzahl an Partnerlogos ohne viel Platz — z.B. Verkehrsverbuende, Kommunen oder Anbieter.

Unsere Partner — scrollende Leiste

Pausiert beim Hover. Bei prefers-reduced-motion automatisch statisch.

Unsere Partner

<LogoCloud title="Unsere Partner" variant="marquee" grayscale>
  <img src="/logos/vrr.svg" alt="Verkehrsverbund Rhein-Ruhr" />
  <img src="/logos/rvk.svg" alt="Regionalverkehr Koeln" />
  <img src="/logos/stadtwerke-ms.svg" alt="Stadtwerke Muenster" />
  <img src="/logos/bogestra.svg" alt="Bogestra — Bochum-Gelsenkirchener Strassenbahnen" />
  <img src="/logos/ruhrbahn.svg" alt="Ruhrbahn Essen Muelheim" />
</LogoCloud>

Linksbuendig ohne Graustufen

Für Footers oder Seiten-Sektionen, wo Logos farbig und linksbuendig erscheinen sollen.

Zertifizierungen — linksbuendig, farbig

Zertifiziert und ausgezeichnet

<LogoCloud title="Zertifiziert und ausgezeichnet" align="left" grayscale={false}>
  <img src="/logos/tuev.svg" alt="TUeV Rheinland — Oekostrom geprüft" />
  <img src="/logos/ok-power.svg" alt="ok-power Guetesiegel" />
</LogoCloud>

Redakteurshinweise

Wann einsetzen

Förder-Landingpages: Zuschuss-Geber prominent zeigen
Über dem Footer: Partner-Kooperationen und Zertifizierungen
Unter Hero-Bereichen: "Gefördert von" als Vertrauensanker
Bei mehr als 8 Logos: Marquee-Variante bevorzugen

Inhalts-Empfehlungen

Mindestens 3, maximal 12 Logos pro Block
Einheitliche Logo-Höhe: 40–48 px Soll-Höhe
Bevorzugt SVG für scharfe Darstellung auf Retina-Displays
Alt-Text immer vollstaendiger Organisationsname, nie leer lassen

Mobile & A11y

Grid skaliert via auto-fill automatisch auf schmale Container
Marquee pausiert beim Hover und Focus-within
Bei prefers-reduced-motion: Marquee wird automatisch statisch
Duplizierte Logos im Marquee sind aria-hidden

Pitfalls

Logos mit schlechtem Kontrast auf weissem Hintergrund: SVG mit eingebettetem Hintergrund verwenden
Kein Logo ohne Alt-Text — der Name muss für Screen-Reader lesbar sein
Nicht zu viele verschiedene Logo-Größen mischen
PNG-Logos: mindestens 320 px Breite und transparenter Hintergrund

Installation

cp-components add logocloud