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

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

BasicEdgeApplication

Name

Represents the root asset type for all edge applications

Description

<div class="keyValueList">
	<div class="keyValueWrapper">
		<span class="keyValueWrapper__icon iconMdsp 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 iconMdsp 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 iconMdsp 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">
		<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 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 iconMdsp 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 iconMdsp 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 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--bolder">
				350<span class="keyValue__unit">€</span>
			</div>
		</div>
	</div>
	<div class="keyValueWrapper has-alignment-center">
		<span class="keyValueWrapper__icon iconMdsp 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 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--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 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--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 iconMdsp 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 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--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 iconMdsp 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 iconMdsp 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 iconMdsp attention filled has-color-forced-error" 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 iconMdsp information filled has-color-forced-primary" aria-hidden="true"></span>
				<div class="keyValueWrapper__keyValue keyValueWrapper__keyValue--reverse">
					<div class="keyValue__key">INFORMATION
					</div>
					<div class="keyValue__value has-color-forced-primary">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-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

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.