Inhaltsbereich Navigation Navigation Fußzeile

Kacheln / Cards

Verwendung

Eine statische und eine editierbare Kachel mit Bleistift-Iconbutton.

Kacheln werden verwendet, um Inhalte und Links mit zusätzlichen Informationen zu gruppieren und anschaulich von weiteren Inhalten abzugrenzen.

Sie können Bilder und Icons, Pills, Überschriften, Textabsätze und Listen enthalten. Eine Kachel enthält oftmals einen Link, der entweder auf der gesamten Fläche der Kachel klickbar ist, oder in Form eines Blocklinks innerhalb der Kachel dargestellt ist. Kacheln enthalten keine Subgrids oder Tabellen, Tooltips können nur in begründeten Ausnahmen verwendet werden.

2 nebeneinander angeordnete Kacheln jeweils mit Bild, darunter Überschrift und Text.

Ausprägungen

Es gibt verschiedenen Arten von Inhalts-Kacheln, sowie einige anwendungsspezifische Kacheln.

  • Kacheln ohne Bild – die Kachel enthält eine, auf die ganze Kachel ausgedehnte, verlinkte Überschrift und einen Text.
  • Kacheln mit Bild – die Kachel enthält ein Bild, eine, auf die ganze Kachel ausgedehnte, verlinkte Überschrift und einen Text.
  • Kacheln mit interaktiven Elementen – die Kachel enthält eine Überschrift, eine Text und einen Blocklink, um eine Aktion auszuwählen.
  • Editierbare Kacheln – die Kacheln enthält einen Icon-Button, mit dem Nutzende den Zustand der Inhalte von darstellend auf editierbar umschalten können.
2 untereinander angeordnete Kacheln jeweils mit Bild, daneben Überschrift und Text.

Verschiedene Kachelarten können nach Bedarf kombiniert werden. Dies zeigt sich am Beispiel einer Kachel des Registrierungsprozesses, welche aus einer, auf die ganze Kachel ausgedehnten, verlinkten Überschrift, einem Icon und einem Text besteht.

Weitere Beispiele für die Anwendung der Kachelarten:

  • Kacheln Dienstleistungen – die Kachel dient der Auswahl der Dienstleistungen. Sie entspricht einer Kachel ohne Bild, die sich über die gesamte Breite zieht und enthält einen Bereich für den Link „weitere Informationen“ und einen Bewertungs-Icon-Button. Die Kachel kann zudem eine Pill „Neu“, sowie den Text „eingeschränkter Zugang“ enthalten.
  • Kacheln Startseite – diese Kacheln befinden sich zurzeit nur auf der Startseite.
    • Anmeldung – die Kachel dient der Auswahl des Zugangsmittels (Elster oder Personalausweis) für die Anmeldung und enthält eine, auf die ganze Kachel ausgedehnte, verlinkte Überschrift und ein Icon.
  • Registrierung – die Kachel entspricht einer Kachel mit interaktiven Elementen und enthält zusätzlich ein Tooltip.
  • Alternativanmeldung – die Kachel entspricht einer Kachel mit interaktiven Elementen und zusätzlich Input-Feldern für E-Mail und Passwort.
  • Dienstleitungsteaser – die Kachel dient der Auswahl von Bürgerkonto-Dienstleistungen oder Geschäftskonto-Dienstleistungen und entspricht einer Kachel mit interaktiven Elementen. Sie enthält jedoch zwei interaktive Elemente und zusätzlich Icons
  • Videoteaser – die Kachel dient der Vorschau der Erklärvideos zu einem Bürger-, bzw. Geschäftskundenkonto. Sie ähnelt einer Kachel mit Bild, ist jedoch anders strukturiert.
  • Kacheln Registrierungsprozess – die Kachel dient der Auswahl des Zugangsmittels (Elster oder Personalausweis) für die Registrierung, sowie der Auswahl der Kontoart (Bürgerkonto, Geschäftskundenkonto, Benutzerkonto für existierendes Geschäftskundenkonto).

Positionierung & responsives Verhalten

Varianten: Kachel & Bild-Kachel (vertikal)

Ab dem Breakpoint SM (≥ 576px)
  • Kacheln werden nur innerhalb des Inhaltsbereichs platziert (erste bis letzte Spalte des Grids).
  • In einer Zeile darf nur eine Kachel stehen.
  • Der vertikale Abstand zwischen zwei Kacheln orientiert sich an der Steg-Breite.
Ab dem Breakpoint MD (≥ 768px)

In einer Zeile dürfen maximal zwei Kacheln stehen.

Ab dem Breakpoint XL (≥ 1200px)

In einer Zeile dürfen maximal drei Kacheln stehen.

Variante: Bild-Kachel (horizontal)

Ab dem Breakpoint SM (≥ 576px)
  • Trotz horizontaler Bildausrichtung steht das Bild auf kleinen Breakpoints (XS, SM) noch über der Kachel.
  • Kacheln werden nur innerhalb des Inhaltsbereichs platziert (Erste bis letzte Spalte des Grids).
  • In einer Zeile darf nur eine Kachel stehen.
  • Der vertikale Abstand zwischen zwei Kacheln orientiert sich an der Breite des Stegs.
Ab dem Breakpoint MD (≥ 768px)
  • Ab diesem Breakpoint kann das Bild neben der Kachel platziert werden (links oder rechts).
  • Die Breite eines Bildes ist 2/6 (4/12) Spalten.
  • In einer Zeile darf nur eine Kachel stehen.
Ab dem Breakpoint XL (≥ 1200px)
  • In einer Zeile dürfen maximal zwei Kacheln stehen.
  • Die Breite eines Bildes ist 2/12 Spalten.

Do’s and Dont’s

So:
Kacheln einer Zeile oder eines Kachel-Grids nehmen unabhängig von ihrem Inhalt immer die Höhe der höchsten Kachel ihrer Zeile ein.
So nicht:
Jede Kachel einer Zeile (oder eines Kachel-Grids) ist, je nach Inhalt, unterschiedlich hoch.
So:
Alle Kacheln innerhalb eines Kachel-Grids sind vom gleichen Typ.
So nicht:
Kacheln unterschiedlicher Typen in einem Grid kombiniert.
So:
Alle Bilder-Kacheln innerhalb eines Kachel-Grids sind gleich orientiert.
So nicht:
Die Orientierung von Bild-Kacheln frei kombiniert.