Die Cards-Gruppe

    Die Cards-Gruppe

    Die Cards-Gruppe ist ein Gestaltungselement zur übersichtlichen Darstellung mehrerer gleichwertiger Inhalte. Sie eignet sich besonders für Themenstartseiten, Übersichtsseiten und Orientierungsebenen. Die Cards-Gruppe eignet sich besonders gut für Seiten, auf denen Nutzer*innen mit einer konkreten Frage oder einem Anliegen landen. Statt lange Texte zu lesen, suchen sie schnelle Orientierung: „Wo bin ich richtig?“, „Was ist mein nächster Schritt?“

    Cards unterstützen genau dieses Nutzungsszenario:

    • Sie bündeln Inhalte themen- oder problemorientiert

    • Sie ermöglichen einen schnellen Überblick

    • Sie führen gezielt zu passenden Zielseiten, Formularen oder Kontakten

    Gerade auf Themenstart-, Übersichts- oder Service-Seiten ist die Cards-Gruppe daher ein zentrales Navigationselement.



    Aufbau einer Cards-Gruppe

    Eine Cards-Gruppe besteht aus:

    • einem gemeinsamen Rahmen (Container)

    • mehreren einzelnen Cards mit:

      • Überschrift

      • optionalem Bild oder Icon

      • kurzem Beschreibungstext

      • Verlinkung auf eine Zielseite

    Alle Cards innerhalb einer Gruppe sollten inhaltlich und visuell vergleichbar sein.


    Gestaltungs- und Inhaltsprinzipien

    Einheitlichkeit

    In den Einstellungen der Cards-Gruppe kann unter Erscheinungsbild → Höhe → gleiche Höhe festgelegt werden, ob alle Cards die gleiche Größe erhalten sollen.

    Empfehlung:

    • Aktivieren Sie diese Option, wenn mehrere Cards nebeneinander stehen

    • Ein einheitliches Höhenbild wirkt ruhiger, strukturierter und professioneller

    • Besonders sinnvoll bei textlastigen Cards oder gemischten Inhalten

    • Alle Cards einer Gruppe folgen der gleichen Struktur

    • Ähnliche Textlängen und Tonalität verwenden

    • Keine inhaltlichen „Ausreißer"

    Reduktion

    • Cards sind kein Ersatz für Fließtext

    • Pro Card: eine klare Aussage, ein Ziel

    • Details gehören auf die Zielseite, nicht auf die Card

    Nutzerführung

    • Cards dienen der Orientierung, nicht der Vollständigkeit

    • Jede Card sollte eine klare Erwartung an die Zielseite wecken


    Do’s & Don’ts bei Cards

    Do

    • Cards für Übersichten und Einstiege nutzen

    • kurze, prägnante Texte verwenden

    • klare, sprechende Überschriften wählen

    Don’t

    • zu viele Cards auf einer Seite platzieren

    • sehr lange Texte in Cards schreiben

    • Cards ohne klare Verlinkung einsetzen


    Varianten der Cards-Gruppe


    1.1 Link-Kachel groß

    Einsatz:
    Hervorgehobene Einstiege, zentrale Themen oder Hauptaktionen

    Gestaltung:

    • Überschrift: max. 65 Zeichen inkl. Leerzeichen

    • Text: rechtsbündig, unten ausgerichtet

    Hinweis:
    Kurze, prägnante Überschriften sind hier besonders wichtig, da diese Kachel stark visuell wirkt.

    1.2 Link-Kachel klein

    Einsatz:
    Übersichten mit mehreren gleichwertigen Einstiegen

    Gestaltung:

    • Überschrift: max. 75 Zeichen inkl. Leerzeichen

    • Text: linksbündig, oben ausgerichtet

    Diese Variante eignet sich gut, um viele Inhalte strukturiert darzustellen, ohne zu dominant zu wirken.

    1.3 Link-Kacheln (nur Text)

    Einsatz:
    Reine Navigations- oder Serviceübersichten

    Gestaltung:

    • 4-spaltig

    • Text: linksbündig, oben ausgerichtet

    • Überschrift: max. 75 Zeichen inkl. Leerzeichen

    Empfehlung:
    Diese Variante ist besonders gut für funktionale Inhalte geeignet, bei denen Bilder keinen Mehrwert bieten.

    1.4 Kontaktkachel mit Bild

    Einsatz:
    Darstellung von Ansprechpartner*innen, Abteilungen oder Servicekontakten

    Gestaltung:

    • 4-spaltig

    • fixe Breite, variable Höhe

    • Ausrichtung: oben

    • Optionen:

      • mit Überschrift über der Kachel

      • ohne Überschrift über der Kachel

    Inhaltliche Empfehlung:

    • Auch wenn es keine feste Zeichenbegrenzung gibt:

      • Texte kurz und übersichtlich halten

      • Fokus auf Erreichbarkeit und Zuständigkeit

    Mögliche Verlinkungen:

    • Profilseite

    • Abteilungsseite

    • Telefonnummer

    • E-Mail-Link

    1.5 Weiterführende Links & Downloads

    Einsatz:
    Sammlung weiterführender Informationen, Downloads oder externer Verweise

    Gestaltung:

    • 4-spaltig

    • Verlinkungen zu:

      • internen Seiten

      • externen Seiten

      • Dateien (z. B. PDFs)

    Empfehlungen:

    • Auch wenn keine Begrenzung besteht:

      • Anzahl der Links überschaubar halten

      • Inhalte thematisch bündeln

      • klare, sprechende Linktexte verwenden

    1.6 Einrichtung

    Eine Card-Variante um Einrichtungen bzw Kontakt und Anschrift-Daten auszugeben.
    Folgende Felder können gepflegt werden:

    • Überschrift (optional)
    • Bild (optional)
    • Textfeld (Pflichtfeld)
    • Linkfeld (optional)

    Einfügen der Telefonnummer
    1. Kontaktfelder öffnen
    2. unter Telefon den Link-Button anklicken
    3. Telefonnummer einfügen und auf Link setzen klicken


    Hier im Redaktionsbereich finden Sie eine Übersicht aller Cards-Elemente. Mittels der Vorschau-Funktion (Web-Site anzeigen lassen) können Sie sich anschauen, wie die einzelnen Elemente im Front-End für die User aussehen.

    Redaktionelle Leitplanken für alle Cards

    • Eine Card = ein Thema / ein Ziel

    • Keine vollständigen Inhalte in Cards unterbringen

    • Cards ersetzen keinen Fließtext, sondern führen weiter

    • Einheitlichkeit innerhalb einer Cards-Gruppe ist wichtiger als maximale Informationsdichte

    Veröffentlicht