Key value

A key value pair is the easiest way to visually represent any data.

Usage

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.

Types

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-value-usage-key-above — Key above value, left aligned

Key below value

Use this type if you want to emphasize the value.

key-value-usage-key-below — Key below value, left aligned

Key next to value

Use this type if you want to create a list with many items.

key-value-usage-left — Key next to value, left aligned

General construction

A key value pair consists of the following elements:

key-value-usage-general-construction-2 — 1. Key, 2. Value, 3. Supporting visual, 4. Unit

Various value types:

key-value-usage-value-types — 1. Plain text single line, 2. Plain text multiline, 3. Array of items, 4. Image, 5. Video, 6. Any generic entity

1. Key

The key is a field name, identifier or attribute.
The key is muted text.

2. Value

The value is the content of the key field. It is the data that is being stored and identified.
The value can be:
1. Plain text single line
2. Plain text multiline
3. Array of items, for example lists, categories (tags or badges)
4. Image
5. Video
6. 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.

4. Unit

A unit is, for example, meters, seconds, hours etc.
A unit is recommended but not required.

Options

The following key value pair options are available:

Alignment

By default, all types of key value pairs are aligned left. It can also be aligned center or right.

key-value-usage-key-above-centered — Key above value, center aligned

key-value-usage-key-below-centered — Key above value, right aligned

Scaling

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.

key-value-usage-font-size — Key value pair with individual font sizes

Font weight level

Weight level makes it possible to emphasize the information according to their importance. There are three available font weights.

key-value-usage-font-weight — 1. Black, 2. Bold, 3. Regular

Custom color

Use a custom color to additionally highlight the content.

Behavior

On small screen sizes, key value pairs that are next to each other rearrange to one below the other.

key-value-usage-responsive-next — 1. Key value pair next to each other

key-value-usage-responsive-below — 2\. Key value pair one below the other on small screens

Do’s & Don’ts

Ensure consistency.
Do not mix too many types and options in one context.

Style

This chapter shows several key value pair styles in the User Experience Toolkit.

Overview

key-value-style-key-above — Key value pairs with key above value, left aligned

key-value-style-key-below — Key value pair with key below value and custom color

key-value-style-left — Key value pairs next to each other, left aligned

key-value-style-centered — Key value pair next to each other, key right aligned, value left aligned

key-value-style-unit — Key value pair with supporting visual and unit, key below value

key-value-style-unit-2 — Key value pair with supporting visual and unit, key next to value

key-value-style-all-in-list — Key value pair in list within a container with frameless content area

key-value-style-in-container — Key value pairs in simple container

key-value-style-all-in-grid — Key value pairs in grid

key-value-style-value-types — Key value pairs in list within a container

key-value-style-structure — Key value pairs in simple container

key-value-style-options — Key value pairs in grid

Typography

The following table gives reference to the different font sizes and weights:

Name	State	Font-family	Font-size	Line-height	Text-align
Key	below, above	Siemens Sans Roman	12px	16px	left, center, right
Key	next to each other	Siemens Sans Roman	14px	20px	left, center, right
Value	all	Siemens Sans Roman	14px	20px	left, center, right
Unit	all	Siemens Sans Roman	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-value-style-sizing-above-below — Spacing of key above and below value

Key next to value

key-value-style-sizing-next — 1. Standard spacing, 2. Compact spacing, 3.Individual spacing

Standard spacing
- These are the default spacings.
Compact spacing
- Use compact spacing if there is less space like in a list item or table row.
Individual spacing
- Can be an increment of 4px.
- Use this spacing for key value pairs with individual font size.

To see a detailed explanation of all existing helper classes, please refer to the usage table below.

Key value pairs, key above

core.basicedgeapplication

Name

BasicEdgeApplication

Description

Represents the root asset type for all edge applications

<div class="keyValueList">
	<div class="keyValueWrapper">
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__key">
				ID
			</div>
			<div class="keyValue__value">
				core.basicedgeapplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__key">
				Name
			</div>
			<div class="keyValue__value">
				BasicEdgeApplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__key">
				Description
			</div>
			<div class="keyValue__value">
				Represents the root asset type for all edge applications
			</div>
		</div>
	</div>
</div>

core.basicedgeapplication

Name

BasicEdgeApplication

Description

Represents the root asset type for all edge applications

<div class="keyValueList">
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__key">
				ID
			</div>
			<div class="keyValue__value">
				core.basicedgeapplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__key">
				Name
			</div>
			<div class="keyValue__value">
				BasicEdgeApplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__key">
				Description
			</div>
			<div class="keyValue__value">
				Represents the root asset type for all edge applications
			</div>
		</div>
	</div>
</div>

Key value pairs, key below

core.basicedgeapplication

BasicEdgeApplication

Name

Represents the root asset type for all edge applications

Description

<div class="keyValueList">
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
			<div class="keyValue__value">
				core.basicedgeapplication
			</div>
			<div class="keyValue__key">
				ID
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<div class="keyValue__value">
				BasicEdgeApplication
			</div>
			<div class="keyValue__key">
				Name
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<div class="keyValue__value">
				 Represents the root asset type for all edge applications
			</div>
			<div class="keyValue__key">
				Description
			</div>
		</div>
	</div>
</div>

Key value pairs, key next to

core.basicedgeapplication

Name

BasicEdgeApplication

Description

Represents the root asset type for all edge applications

<div class="keyValueList">
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue">
			<div class="keyValue__key">
				ID
			</div>
			<div class="keyValue__value">
				core.basicedgeapplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue">
			<div class="keyValue__key">
				Name
			</div>
			<div class="keyValue__value">
				BasicEdgeApplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue">
			<div class="keyValue__key">
				Description
			</div>
			<div class="keyValue__value">
				Represents the root asset type for all edge applications
			</div>
		</div>
	</div>
</div>

Key value with supporting visuals in different types

Asset Instance Upgrade ("next to")

180EUR

Asset Instance Upgrade ("below")

180EUR

Asset Instance Upgrade ("below, reversed")

180EUR

<div class="keyValueWrapper">
	<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
	<div class="keyValueWrapper__keyValue">
		<div class="keyValue__key">
			Asset Instance Upgrade ("next to")
		</div>
		<div class="keyValue__value">
			180<span class="keyValue__unit">EUR
			</span>
		</div>
	</div>
</div>

<div class="keyValueWrapper">
	<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
	<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
		<div class="keyValue__key">
			Asset Instance Upgrade ("below")
		</div>
		<div class="keyValue__value">
			180<span class="keyValue__unit">EUR
			</span>
		</div>
	</div>
</div>

<div class="keyValueWrapper">
	<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
	<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
		<div class="keyValue__key">
			Asset Instance Upgrade ("below, reversed")
		</div>
		<div class="keyValue__value">
			180<span class="keyValue__unit">EUR
			</span>
		</div>
	</div>
</div>

Key value alignment options

Agents Upgrade

350€

Asset Instance Upgrade

190€

Asset Type Upgrade

60€

<div class="keyValueList">
	<div class="keyValueWrapper has-alignment-right">
		<span class="keyValueWrapper__icon iconUxt package" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<div class="keyValue__key">
				Agents Upgrade
			</div>
			<div class="keyValue__value keyValue__value--bolder">
				350<span class="keyValue__unit">€</span>
			</div>
		</div>
	</div>
	<div class="keyValueWrapper has-alignment-center">
		<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<div class="keyValue__key">
				Asset Instance Upgrade
			</div>
			<div class="keyValue__value keyValue__value--bolder">
				190<span class="keyValue__unit">€
				</span>
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconUxt types" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<div class="keyValue__key">
				Asset Type Upgrade
			</div>
			<div class="keyValue__value keyValue__value--bolder">
				60<span class="keyValue__unit">€
				</span>
			</div>
		</div>
	</div>
</div>

Key value with scaling options

Agents Upgrade

360€

Asset Instance Upgrade

180€

Asset Type Upgrade

60€

<div class="containergroup">
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--large">
				<span class="keyValueWrapper__icon iconUxt package" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">
						Agents Upgrade
					</div>
					<div class="keyValue__value keyValue__value--bolder">
						360<span class="keyValue__unit">€</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--medium">
				<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">
						Asset Instance Upgrade
					</div>
					<div class="keyValue__value keyValue__value--bolder">
						180<span class="keyValue__unit">€
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--medium">
				<span class="keyValueWrapper__icon iconUxt types" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">
						Asset Type Upgrade
					</div>
					<div class="keyValue__value keyValue__value--bolder">
						60<span class="keyValue__unit">€
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Key value in container

core.basicedgeapplication

Name

Basic Edge Application

Description

Represents the root asset type for all edge applications

<div class="container">
    <div class="container__content">
        <div class="keyValueWrapper">
        	<span class="keyValueWrapper__icon iconUxt asset filled" aria-hidden="true"></span>
			<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
				<div class="keyValue__key">
					ID
				</div>
				<div class="keyValue__value keyValue__value--bolder">
					core.basicedgeapplication
				</div>
			</div>
        </div>
    </div>
</div>

<div class="container">
    <div class="container__content">
        <div class="keyValueWrapper">
			<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
				<div class="keyValue__key">
					Name
				</div>
				<div class="keyValue__value keyValue__value--bold">
					Basic Edge Application
				</div>
			</div>
        </div>
    </div>
</div>

<div class="container">
    <div class="container__content">
        <div class="keyValueWrapper">
			<div class="keyValueWrapper__keyValue">
				<div class="keyValue__key">
					Description
				</div>
				<div class="keyValue__value">
					Represents the root asset type for all edge applications
				</div>
			</div>
        </div>
    </div>
</div>

Key value with custom color in container

ERROR

WARNING

INFORMATION

580

Asset 1

229h

Asset 2

120h

Asset activity

200h

<div class="containergroup">
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--large">
				<span class="keyValueWrapper__icon iconUxt errorAlert filled has-color-forced-error" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">ERROR
					</div>
					<div class="keyValue__value has-color-forced-error">34
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--large">
				<span class="keyValueWrapper__icon iconUxt attention filled has-color-forced-warning" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">WARNING
					</div>
					<div class="keyValue__value has-color-forced-warning">10
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--large">
				<span class="keyValueWrapper__icon iconUxt information filled has-color-forced-info" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">INFORMATION
					</div>
					<div class="keyValue__value has-color-forced-info">580
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container">
	<div class="container__content">
		<div class="keyValueWrapper keyValueWrapper">
			<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
				<div class="keyValue__key">Asset 1
				</div>
				<div class="keyValue__value has-color-forced-warning-dark">
					229<span class="keyValue__unit">h
					</span>
				</div>
			</div>
		</div>
		<hr class="content__divider" />
		<div class="keyValueWrapper keyValueWrapper">
			<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
				<div class="keyValue__key">Asset 2
				</div>
				<div class="keyValue__value has-color-forced-success-dark">
					120<span class="keyValue__unit">h
					</span>
				</div>
			</div>
		</div>
		<hr class="content__divider" />
		<div class="keyValueWrapper keyValueWrapper">
			<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--column">
				<div class="keyValue__key">Asset activity
				</div>
				<div class="keyValue__value has-color-forced-error-dark">
					200<span class="keyValue__unit">h
					</span>
				</div>
			</div>
		</div>
	</div>
</div>

Usage

Element	Class	Description
`.keyValueWrapper__keyValue`	`.keyValue--reverse`	Displays the value above the key. By default, the key is above the value.
`.keyValueWrapper__keyValue`	`.keyValueWrapper__keyValue--column`	Displays the key above or below the value. By default, the key is positioned horizontally next to the value.
`.keyValueWrapper`	`.has-alignment-center`	The key value pair will be horizontally centered. If this modifier class is not used, the key value pair is left aligned by default.
`.keyValueWrapper`	`.has-alignment-right`	The key value pair will be horizontally right aligned. If this modifier class is not used, the key value pair is left aligned by default.
`.keyValueWrapper`	`.keyValueWrapper--large`	Applies a very big font-size to the key value pair.
`.keyValueWrapper`	`.keyValueWrapper--medium`	Applies a bigger font-size to the key value pair.
`.keyValue__value`	`.keyValue__value--bold`	Applies a bold/700 font weight just for the value. By default, a regular font weight is used.
`.keyValue__value`	`.keyValue__value--bolder`	Applies a bolder/900 font weight just for the value. By default, a regular font weight is used.
`.keyValue__value`	`.has-color-forced-<color name>`	Forces a different foreground color for the value. Any of the color-force helper classes can be used.