# Key\-Value Facet
Eine Key\-Value Facet zeigt gepaarte Daten an, um Informationen übersichtlich darzustellen.
# Overview
## Intro
Die Key\-Value Facets werden häufig in Lists verwendet, um Datensätze lesbar und kompakt darzustellen. Am häufigsten tauchen Key\-Value Facets in Objektseiten auf, sie können aber auch in anderen Kontexten verwendet werden.
#### Key
* Halte die Länge von Keys kurz
* Keys können durch Text oder Icons dargestellt werden
* Die Visualität der Keys in Textform darf nicht verändert werden
* Icons müssen, um die Barrierefreiheit zu gewährleisten, im Rahmen von Key\-Value Facets, in Kombination mit Text verwendet werden. Siehe Icons Abschnitt „ [Icons in Kombination mit Text]() ".
#### Value
* Values können Links enthalten
* Values können farblich hervorgehoben werden, verwende dazu `\-\-mate\-text\-error, \-\-mate\-text\-success, \-\-mate\-text\-warning`
* Values können Icons neben dem Text beinhalten
* Leere Values werden mit \- angezeigt
#### Zu beachten:
* In der Regel nicht mehr als 5 Key\-Value Paare vertikal in einer List verwenden. Ausnahme: Eine List von 6 ist oft besser als eine künstliche Aufteilung in 5 \+ 1. Einzelne verwaiste Items sollten vermieden werden. Auf keinen Fall sollten mehr wie 7 Items in einer List sein.
* Einheitliche Textausrichtung der Values in einer List ist Pflicht
* In einer List darf nur eine Variante, wie z.B. die Standard Variante (Stacked), oder die Horizontale Variante, verwendet werden
## Verwendung
|👍 Do|👎 Don't|
|-|-|
|... wenn Datensätze ausschließlich zum Lesen angezeigt werden sollen.
... wenn Kontextinformationen dargestellt werden sollen.|... wenn Daten in Formularen, unter bestimmten Bedingungen, nicht manipuliert werden können. Verwende dazu gesperrte Eingabefelder.
...wenn Fließtexte angezeigt werden sollen. Verwende dafür die Fließtext\-Facette (In Planung vom UX Team).
...wenn Key Performance Indicators (KPI’s) angezeigt werden sollen. Verwende dafür die KPI Facet.|
# Guidelines
## Aufbau
1. Listüberschrift: Werden innerhalb einer Sektion zwei oder mehr Lists dargestellt, muss jede List mit einer Überschrift versehen werden. Besteht eine Sektion nur aus einer List, ist keine Listüberschrift zu verwenden.
1. Keys: Keys werden visuell weniger prominent analog zum Label von Eingabefeldern dargestellt. Am Ende eines Keys wird automatisch ein Doppelpunkt eingefügt.
1. Value: Values sind visuell klar vom dazugehörigen Key getrennt.
1. Leere Listüberschriften: Zudem können auch leere Überschriften genutzt werden, um größere Gruppen visuell voneinander zu unterscheiden.
1. Leere Values: Leere Values werden mit \- gekennzeichnet.
## Varianten/Typen
### Standard Variante (Stacked)
|👍 Do|👎 Don't|
|-|-|
|... wenn ein Standardfall vorliegt, da diese Variante die neue Standardvariante ist.|... wenn an der Höhe im Layout gespart werden muss, wie z.B. in der Kopfzeile auf Objektseiten. Verwende dafür die Inline Variante.
... wenn Zahlen so ähnlich wie bei einem Kassenzettel zum Vergleichen übereinander stehen sollten. Verwende dafür die horizontale Variante und richte die Values rechts aus.
... wenn Icons als Keys verwendet werden sollen, verwende dafür die Inline Variante.
... wenn längere Fließtexte wie z.B. Notizen dargestellt werden sollen, verwende dafür die Fließtext\-Facette.|
### Inline Variante
|👍 Do|👎 Don't|
|-|-|
|... wenn an der Höhe im Layout gespart werden soll, wie z.B. durch die Verwendung in der Kopfzeile der Objektseite.
... wenn Icons als Keys verwendet werden sollen.|... wenn unterschiedlich lange Keys und Values in einer List stehen. Verwende dafür wie in den meisten Fällen die Standard Variante (Stacked).
... wenn nicht an der Höhe im Layout gespart werden muss. Verwende dafür wie in den meisten Fällen die Standard Variante (Stacked).
... wenn Zahlen so ähnlich wie bei einem Kassenzettel zum Vergleichen übereinander stehen sollen. Verwende dafür die horizontale Variante und richte den Values rechts aus.
... wenn längere Fließtexte wie z.B. Notizen dargestellt werden sollen, verwende dafür die Fließtext\-Facette.|
### Horizontale Variante
|👍 Do|👎 Don't|
|-|-|
|... wenn Zahlen so ähnlich wie bei einem Kassenzettel zum Vergleichen übereinander stehen sollen. Verwende dafür die horizontale Variante und richte den Values rechts aus.|... wenn Icons als Keys verwendet werden sollen, verwende dafür die Inline Variante.
... wenn unterschiedlich lange Keys und Values in einer List stehen. Verwende dafür, wie in den meisten Fällen, die Standard Variante (Stacked).
... wenn nicht an der Höhe im Layout gespart werden muss. Verwende dafür, wie in den meisten Fällen, die Standard Variante (Stacked).
...wenn längere Fließtexte wie z.B. Notizen dargestellt werden sollen, verwende dafür die Fließtext\-Facette.|
### Weitere Leitlinien zur Verwendung
#### Verwendung von Value Texten mit Icons
|👍 Do|👎 Don't|👍 Do|
|-|-|-|
|
Nutze Icons immer mit einem Text zusammen, um Values die nicht eindeutig aus dem Icon hervorgehen können dazustellen.|
Icons ohne Texte sind für Values, die nicht eindeutig ableitbar sind, nicht erlaubt. |Wenn Values mit 1 oder 0 (Ja oder Nein) den Zustand beschrieben, dann können auch nur Icons verwendet werden. In diesem Fall müssen aria\-label Attribute und Tooltips verwendet werden, um die Barrierefreiheit und die Screenreader Unterstützung zu gewährleisten.|
#### Nicht mehr als 5 Key\-Value Paare in einer List verwenden
|👍 Do|👎 Don't|
|-|-|
|
Key Value Facet List mit maximal 5 Paaren|
Key Value Facet List mit mehr als 5 Paaren|
#### Einheitliche Textausrichtung der Values in einer List
|👍 Do|👎 Don't|
|-|-|
|
Einheitliche Textausrichtung der Values|
Nicht einheitliche Textausrichtung der Values|
#### Weitere Informationen zu einem Value oder Key lassen sich gut in Tooltips unterbringen
|👍 Do|👎 Don't|
|-|-|
|
Verwende z.B. ein Tooltip, um weitere Informationen zu einem Value oder Key zu geben.|
Zu lange Keys können den User verwirren und unübersichtlich wirken.|
## Verhalten
### Fehlende Values
[Figma](https://www.figma.com/design/VsozVyODV3kmHhjP6Y25L2/?node-id=2639:81009)
### Längere Texte
Bei langen Texten wird der zur Verfügung stehende Platz benutzt und danach Ellipsis eingesetzt. Die vollständigen Texte können dann über einen Tooltip eingesehen werden.
### Icon Keys
Icons, die anstelle von Keys verwendet werden, müssen immer mit einem Tooltip aufgelöst werden. Für mehr Informationen: Hier liegt das selbe Verhalten wie im Abschnitt „Icon zur Darstellung eines Status“ in der Dokumentation zu den Icons vor.
### Doppelpunkt nach Key
Der Doppelpunkt nach dem Key wird immer automatisch hinzugefügt, damit er nicht vergessen werden kann.
Dies ist in allen Variante der Fall, lediglich bei der Verwendung von Icons als Key wird der Doppelpunkt nicht angefügt.