When to use
Use a key value pair in the following cases:
- When you need to display data in a consistent way.
- When you need to visually associate a key with a value.
- When you need to decrease the lookup time for a value.
There are the following key value pair types:
Key above value
Use this type if the key has an equal importance to the value.
Key below value
Use this type if you want to emphasize the value.
Key next to value
Use this type if you want to create a list with many items.
A key value pair consists of the following elements:
Various value types:
- The key is a field name, identifier or attribute.
- The key is muted text.
- The value is the content of the key field. It is the data that is being stored and identified.
- The value can be:
- Plain text single line
- Plain text multiline
- Array of items, for example lists, categories (tags or badges)
- Any generic entity, lists, tables or another key value pair.
3. Supporting visual
- A supporting visual may be an icon, pictogram (for example avatar) or image.
- A supporting visual is optional.
- A unit is, for example, meters, seconds, hours etc.
- A unit is recommended but not required.
By default, all types of key value pairs are aligned left. It can also be aligned center or right.
- Key and value can have an individual font size.
- The font size of a key is never bigger than the value.
- The font size of a value can be as big as required for good information structure and readability.
- The font size of the unit can be
- half of the value.
- the same as the value.
- the same as the key.
Font weight level
Weight level makes it possible to emphasize the information according to their importance. There are three available font weights.
Use a custom color to additionally highlight the content.
On small screen sizes, key value pairs that are next to each other rearrange to one below the other.
Do’s & Don’ts
- Ensure consistency.
- Do not mix too many types and options in one context.
This chapter shows several key value pair styles in the design system.
The following table gives reference to the different colors and shades used:
|Key||all||Foreground color||Gray 400|
|Value||all||Foreground color||Gray 800|
|Unit||all||Foreground color||Gray 400|
The following table gives reference to the different font sizes and weights used in the component:
|Key||below, above||Siemens Sans||12px||16px||left, center, right|
|Key||next to each other||Siemens Sans||14px||20px||left, center, right|
|Value||all||Siemens Sans||14px||20px||left, center, right|
|Unit||all||Siemens Sans||Refer to corresponding value||Refer to corresponding value||left|
Sizing and spacing
The following measurements show the dimensions for this component:
All outer spacings are dependent on the wrapper element (list, table, container …).
Key above and below value
Key next to value
- These are the default spacings.
- Use compact spacing if there is less space like in a list item or table row.
- Can be an increment of 4px. Use this spacing for key value pairs with individual font size.