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