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
1. Key, 2. Value, 3. Supporting visual, 4. Unit

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

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.

key-value-style-custom-color
Key value pair with custom color

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

key-value-usage-do-mix-style

key-value-usage-dont-mix-style

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

Style

This chapter shows several key value pair styles in the design system.

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-centered
Key value pair with supporting visual. 1. Icon, 2. Pictogram (for example avatar), 3. Image

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

Color

The following table gives reference to the different colors and shades used:

Name State Property Color name
Key all Foreground color Gray 400
Value all Foreground color Gray 800
Unit all Foreground color Gray 400

Typography

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

Name State Font-family Font-size Line-height Text-align
Key below, above Siemens Sans Regular 12px 16px left, center, right
Key next to each other Siemens Sans Regular 14px 20px left, center, right
Value all Siemens Sans Regular 14px 20px left, center, right
Unit all Siemens Sans Regular 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

  1. Standard spacing
    • These are the default spacings.
  2. Compact spacing
    • Use compact spacing if there is less space like in a list item or table row.
  3. Individual spacing
    • Can be an increment of 4px. Use this spacing for key value pairs with individual font size.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top