1. Container
2. Überschrift
3. Auf-/Zuklappen-Funktion (optional)
4. Inhalt

Jede Inhaltskachel enthält immer eine Überschrift und einen Inhaltsbereich. Die Überschrift entspricht visuell dem Schrifttyp H3. Die Überschriftenhierarchie im Code ist je nach Seitentyp von Designern festzulegen (in der Regel “H3” oder “H2”).

Der Titel der Kachel sollte so kurz und präzise wie möglich formuliert sein. Ist der Titel dennoch länger, so wird er bei Bedarf mehrzeilig.

Jede Kachel (inkl. Titel, Badges, Auf-/Zuklappenbutton und Inhaltsbereich) ist im Code als Region gekennzeichnet und die Regionsbeschriftung entspricht der Kachelüberschrift.

Außerdem kann optional im Header der Kachel:

• Eine Funktion zum Auf- und Zuklappen der Kachel (Bedienung wie beim Element Zwischensektionen/Akkordeons in Formularen).
• Maximal ein Badge, zur Darstellung des Status des Kachelinhalts. Der Badge ist Teil des Titels.

Die Positionierung und horizontale Größe von Inhaltskachel richtet sich am jeweiligen Seitenraster aus (siehe Inhaltskachel-Gruppe und siehe Seitenaufbau Startseite mit Inhaltskacheln).

Die Höhe jeder Kachel orientiert sich am jeweiligen Kachelinhalt. Innerhalb der Kachel gilt das Formularraster.

Kacheln dienen zur Anzeige von Informationen und können beispielsweise folgende Elemente enthalten:

• Read-Only Eingabe-/Auswahlfelder
• Buttons
• Links
• Tabellen
• Listen

Ein Bearbeiten von Kachelinhalten direkt innerhalb der Kachel ist nicht möglich. Falls Inhalte dennoch bearbeitbar sind, kann dies folgendermaßen gelöst werden:

• Bearbeiten-Button: Dieser öffnet ein Modal. In diesem können die Inhalte bearbeitet und die Änderungen gespeichert werden.
• Link zu einer anderen Seite: Inhalte können dann auf einer anderen Seite bearbeitet werden. Bei Zurückkehren zur Übersichts-/Startseite werden die aktualisierten Daten angezeigt.

Mehrere Inhaltskacheln können zu Gruppen kombiniert werden. 

Hinweis: Lücken sind nach Möglichkeit zu vermeiden aber nicht ausgeschlossen.

Bei ausreichend Platz ist es möglich, mehrere Gruppen nebeneinander anzuordnen (maximal 3). 

Ähnlich wie bei Eingabeelementen innerhalb von Formularen pro Element die Breite im Formularlayout definiert werden muss, so muss auch bei jeder Inhaltskachel in einer Gruppe individuell (je nach Screenbreite) definiert werden, wie viele Spalten des jeweiligen Seitenlayouts sie füllt (siehe Raster & Breakpoints: Seitenlayout). Auch der horizontale Abstand von Kacheln zueinander (immer 48px) ergibt sich aus dem Seitenlayout. 

Es gelten folgende Regeln/Umbruchpunkte:

(Die hier angegebenen Pixelwerte beziehen sich auf die Gesamtfensterbreite). 

• Über 1064 px: Max. 3 Kacheln pro Zeile;

Minimale Breite einer Kachel: 4 Spalten im Seitenlayout; Maximale 12 Spalten

• Unter 1064px: Max. 2 Kacheln pro Zeile;

Minimale Breite einer Kachel: 6 Spalten im Seitenlayout, Maximal 12 Spalten

• Unter 760px: Max. 1 Kachel pro Zeile

(Daraus ergibt sich eine Minimalbreite einer Inhalts-Kachel von 288 Pixel.)

Alle Kacheln innerhalb einer Zeile müssen immer die gleiche Höhe haben. Da sich die Höhe der einzelnen Kacheln am jeweiligen Inhalt orientiert, orientiert sich die Höhe der Kacheln innerhalb einer Zeile an der Kachel mit dem längsten Inhalt. 

Sobald mehrere Zeilen von Kacheln vorkommen, bleibt zwischen den Zeilen in der vertikalen ein Abstand von 48 Pixeln bestehen.

Während bei Screengrößen über 760 Pixeln die Akkordeon-Funktion von Inhaltskacheln noch optional ist (je nach fachlicher Anforderung), ist sie bei unter 760 Pixeln (sobald das Seitenlayout in ein einspaltiges Layout umbricht) verpflichtend. Im Standardfall sind bei dieser Screengröße alle Kacheln geöffnet.

Wenn das Laden einer Kachelansicht länger dauert, dann wird anstelle des ganzen Kachel-Bereichs ein Platzhalterbereich mit rotierendem Ladesymbol angezeigt.

Sobald alle Daten der Kachelansicht vollständig geladen sind, verschwindet das Ladesymbol, alle Kacheln inklusive Inhalte werden angezeigt. Befindet sich der Tastaturfokus zu diesem Zeitpunkt auf dem Ladezustand, so springt er auf das erste interaktive Element im Kachelbereich. Befindet sich der Tastaturfokus zu diesem Zeitpunkt auf einem anderen Element auf der Seite, so ändert sich dieser nicht.

Der Bereich der Ladeansicht ist fokussierbar und trägt den Alternativtext “Daten werden geladen”. Der Alternativtext des Ladezustands wird automatisch vom Screenreader ausgegeben, auch wenn sich der Fokus nicht auf dem Icon befindet. Allerdings wird er, um Audionoise zu vermeiden, erst dann ausgegeben, wenn 2 Sekunden nach Öffnen der Seite die Formularinhalte noch nicht vollständig geladen sind. Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Daten werden geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.

Nach vollständigem Laden der Formularinhalte wird der Text “Daten geladen” vom Screenreader ausgegeben. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden. Die Ausgabe erfolgt unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.

Die Ausgabereihenfolge für den Screenreader ist: Zuerst Titel der Kachel, dann der Status-Badge.

Bei nicht aktiver Akkordeon-Funktion: 

• Keine Interaktion möglich.

Bei aktiver Akkordeon-Funktion:

• (Tastaturbedienung siehe Akkordeons: Tastaturbedienung)
• (Für Tastaturbedienung im Inhaltsbereich der Kachel siehe entsprechendes Element)

Bei nicht aktiver Akkordeon-Funktion: 

• Keine Interaktion möglich.

Bei aktiver Akkordeon-Funktion:

• (Tastaturbedienung siehe Akkordeons: Tastaturbedienung)
• (Für Tastaturbedienung im Inhaltsbereich der Kachel siehe entsprechendes Element)

• Mit Tab wird der Platzhalterbereich fokussiert.
• Erneutes Drücken der Tab-Taste setzt den Fokus auf das nächste interaktive Element

Bei nicht aktiver Akkordeon-Funktion: 

• Keine Interaktion möglich.

Bei aktiver Akkordeon-Funktion:

• (Tastaturbedienung siehe Akkordeons: Mausbedienung)
• (Für Tastaturbedienung im Inhaltsbereich der Kachel siehe entsprechendes Element)

Bei nicht aktiver Akkordeon-Funktion: 

• Keine Interaktion möglich.

Bei aktiver Akkordeon-Funktion:

• (siehe Akkordeons: Mausbedienung)

(Für Mausbedienung im Inhaltsbereich der Kachel siehe entsprechendes Element)

• Klicken mit linker Maustaste auf den Platzhalterbereich fokussiert diesen.