Key value

A key value pair is the easiest way to visually associate a key with a value.

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

Key value pairs, key above

ID
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>

Key value pairs, key below

ID
core.basicedgeapplication
Name
BasicEdgeApplication
Description
Represents the root asset type for all edge applications
<div class="keyValueList">
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconMdsp assetInverted" 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 iconMdsp assetInverted" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<div class="keyValue__key">
				Name
			</div>
			<div class="keyValue__value">
				BasicEdgeApplication
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconMdsp assetInverted" aria-hidden="true"></span>
		<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
			<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 next to

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

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 iconMdsp asset black" 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 iconMdsp asset black" 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 iconMdsp asset black" 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 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 iconMdsp 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--black">
						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 iconMdsp asset black" 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--black">
						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 iconMdsp 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--black">
						60<span class="keyValue__unit">€
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Key value in container

ID
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 iconMdsp asset black" aria-hidden="true"></span>
			<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
				<div class="keyValue__key">
					ID
				</div>
				<div class="keyValue__value keyValue__value--black">
					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
34
WARNING
10
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 iconMdsp errorAlert black has-color-forced-validationRed" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">ERROR
					</div>
					<div class="keyValue__value has-color-forced-validationRed">34
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--large">
				<span class="keyValueWrapper__icon iconMdsp attention black has-color-forced-functionalYellow" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">WARNING
					</div>
					<div class="keyValue__value has-color-forced-functionalYellow">10
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="container__content">
			<div class="keyValueWrapper keyValueWrapper--large">
				<span class="keyValueWrapper__icon iconMdsp information black has-color-forced-stateBlue100" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">INFORMATION
					</div>
					<div class="keyValue__value has-color-forced-stateBlue100">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-contextYellow600">
					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-accentGreenDark">
					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-accentRedDark">
					200<span class="keyValue__unit">h
					</span>
				</div>
			</div>
		</div>
	</div>
</div>

Usage

ElementClassDescription
.keyValue .keyValue--reverse Displays the value above the key. By default the key is above the value.
.keyValue .keyValue--row Displays the key next to the value. By default the key is above the value.
.keyValueWrapper .has-alignment-center The key value pair will be horizontally centered. Without using this modifier class the key value pair is left aligned by default.
.keyValueWrapper .has-alignment-right The key value pair will be right aligned. Without using this modifier class 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--black Applies the black Siemens font family just for the value. By default the regular Siemens font family is used.
.keyValue__value .keyValue__value--bold Applies the bold Siemens font family just for the value. By default the regular Siemens font family 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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top