Karten

Die Komponente Card bzw. Themenkarte soll erste wichtige Informationen zu einem Thema (Produkt oder Service) einleiten, um das Interesse des Nutzers zu wecken.

Durch den Einsatz von mehreren Cards, kann der Nutzer eine Auswahl nach seinem Bedarf treffen und durch einen weiterführenden Link "mehr Informationen" und "Details" erhalten.

Mit "Layout Card" kann der Redakteur mehrere Cards nebeneinander platzieren. Für den mobile Einsatz empfiehlt sich der Card Slider.

Vorteile für Nutzer und Redakteure

Vorteile für Ihre Kunden

Es gibt verschiedene Varianten der Karte, um die Inhalte optimal darzustellen und Informationen an den Kunden weiterzugeben.

Schneller Überblick die Produktstruktur

Optimale Darstellung und Anzeige von Bildern

Möglichkeit, mehrere Karten optimal auf allen Devices darzustellen.

Welche Karten gibt es?

Layout Card

Vertikale Card

Horizontale Card

Infocard

Card Slider

Wiederverwendbare Card

Horizontale Karte

Wie vielseitig das Step Display einsetzbar ist, zeigen die folgenden Beispiele: einmal im Versicherungsabschluss, wo Kunden Schritt für Schritt durch den Antragsprozess geführt werden, und einmal im Bewerbungsprozess, der transparent und klar strukturiert dargestellt wird.

Für die redaktionelle Pflege muss zunächst die Komponente "Step Display" innerhalb eines Containers ausgewählt und auf einer Seite mit Basistemplate platziert werden.

Beispiel 1: Horizontale Karte mit einem Bild rechts

Gemeinsam zu Ihrer Online KFZ-Versicherung: Los geht´s!

Eine Hausratversicherung schützt vor den finanziellen Folgen von Diebstahl, Vandalismus, Brand, Wasser- und Sturmschäden. Sie deckt Schäden an Möbeln, Elektronik, Kleidung und Wertsachen ab und übernimmt Reparaturen oder den Ersatz beschädigter Gegenstände. Auch bei Naturgewalten wie Überschwemmungen oder Blitzschlägen bietet sie Schutz. Zudem wird häufig ein weltweiter Schutz für mobile Geräte oder Wertsachen auf Reisen angeboten. Eine Hausratversicherung ist vergleichsweise günstig und gibt dir Sicherheit im Alltag. In vielen Fällen, vor allem bei Mietverhältnissen, kann sie sogar eine Pflichtversicherung sein. Insgesamt sorgt sie für psychologische Entlastung, indem sie im Schadensfall schnelle Hilfe leistet.

Beispiel 2: Horizontale Karte mit einem Bild links

Gemeinsam zu Ihrer Online KFZ-Versicherung: Los geht´s!

Hinweise zur Anwendung

Ein Step Display wie dieses eignet sich ideal, um den Abschlussprozess einer Versicherung transparent darzustellen. Kunden sehen auf einen Blick, welche Schritte notwendig sind – von der Produktauswahl bis zur erfolgreichen Absicherung. So werden Unsicherheiten reduziert, der Online-Abschluss klar strukturiert und die Wahrscheinlichkeit eines erfolgreichen Vertragsabschlusses steigt.

Zusätzlich können die einzelnen Schritte farblich hervorgehoben werden, sodass Nutzer sofort erkennen, welcher Schritt bereits abgeschlossen ist und wie es weitergeht.

Beispiel 2: Vertikale Card

Du willst Teil des Teams werden? So einfach ist eine Bewerbung bei uns!

Onlinebewerbung

Reichen Sie Ihre Unterlagen bequem online ein – schnell, einfach und jederzeit möglich.

Bewertung der Bewerbung

Ihr Profil wird sorgfältig geprüft, damit wir Ihre Stärken und Erfahrungen kennenlernen können.

Online Test

Zeigen Sie Ihr Wissen und Ihre Fähigkeiten in einem kurzen Online-Test – flexibel von zu Hause aus.

Einladung zum Matching Day

Bei positivem Ergebnis laden wir Sie zu einem persönlichen Kennenlernen im Matching Day ein.

Vertragsabschluss

Nach einer Zusage erhalten Sie Ihren Vertrag direkt von der Direktion oder Geschäftsstelle.

Hinweise zur Anwendung

Auch im Bewerbungsprozess lässt sich das Step Display wirkungsvoll einsetzen. Bewerber erkennen sofort, welche Schritte sie erwarten – von der Online-Bewerbung über das Vorstellungsgespräch bis zur finalen Zusage. So entsteht Transparenz, der Prozess wirkt strukturiert und die Candidate Experience verbessert sich deutlich.

Zusätzlich können die einzelnen Schritte farblich hervorgehoben werden, sodass Bewerber jederzeit sehen, welchen Teil sie bereits abgeschlossen haben und was als Nächstes folgt.

Redaktionelle Hinweise

Checkliste: So pflegen Sie ein Step Display richtig

Mit dem Step Display lassen sich Inhalte flexibel an den jeweiligen Use Case anpassen. Sie können sowohl die Darstellung als auch die einzelnen Schritte individuell konfigurieren:

Darstellung wählen: Entscheiden Sie, ob das Step Display horizontal oder vertikal angezeigt werden soll. Hinweis: Auf Tablets (small) und Smartphones (x-small) wird automatisch die vertikale Variante ausgespielt.

Steps anlegen: Über den Button „Hinzufügen“ weitere Schritte einfügen und mit Inhalten befüllen.

Icons oder Zahlen einsetzen: Symbole aus dem Icon Font auswählen – alternativ stehen auch Zahlen als Icons zur Verfügung. Achten Sie auf ein korrekt gesetztes ARIA-Attribut, damit Screenreader die Inhalte vorlesen können.

Status pflegen: Default: Step ist noch nicht abgeschlossen; Completed: Step ist erledigt und wird farblich hervorgehoben

Überschrift festlegen: Wählen Sie für jeden Step das gewünschte H-Level (p, h1–h6). Diese Einstellung hat keinen Einfluss auf die Optik, sorgt aber für eine saubere Struktur im Quellcode.

Dos

Die horizontale Ausprägung kann je nach Viewport (Spaltenmenge 12, 8, 4) eine begrenzte Anzahl an Schritten haben (3 bis max 6 Schritte).

Bei Verwendung eines Grids von 1040px ist die Verwendung der horizontalen Ausprägung nur in L-XL sinnvoll, ab M vertikal.

Verwenden Sie gleiche Formate (nur SVG oder nur Iconfont) für die Symbole in den Steps.

Schreiben Sie die Anleitung in leichter Sprache, kurz und anschaulich.

Die Anleitung sollte mit dem tatsächlichen Flow übereinstimmen.

Don'ts

Zuviel Text.

Zu viele Schritte (mehr als 6 Schritte).

Mischung der Formate (SVG plus Iconfont) erzeugt schlechtes Alignment und verschiedene Größen.

Weitere Informationen und eine detaillierte Anleitung finden Sie in unserem Redaktionsguide.

Zum Redaktionsguide

Slider

Layout Card

Karte Icon Text

Infobox

Individuelle Beratung für Ihre Use Cases

Ob Produktabschluss, Schadenmeldung oder Bewerbungsprozess: Wir unterstützen Sie dabei, das Step Display optimal einzusetzen. Sprechen Sie uns an – wir beraten Sie gerne zu den passenden Use Cases.

Jetzt beraten lassen