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

core.basicedgeapplication
ID
BasicEdgeApplication
Name
Represents the root asset type for all edge applications
Description
<div class="keyValueList">
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconMdsp asset black" 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 iconMdsp asset black" 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 iconMdsp asset black" 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

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 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 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">
				350<span class="keyValue__unit">€</span>
			</div>
		</div>
	</div>
	<div class="keyValueWrapper has-alignment-center">
		<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">
				190<span class="keyValue__unit">€
				</span>
			</div>
		</div>
	</div>
	<div class="keyValueWrapper">
		<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>

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
.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--black Applies a black font weight just for the value. By default, a regular font weight is used.
.keyValue__value .keyValue__value--bold Applies a bold 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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top