Key value is used to structure information found under each section of a record pane.

Example of key value in an accordion core section

Structure

A key value is composed of a key and a value:

The key

It is a unique identifier/label that allows easy access to the value associated with it.

User page with key focused.

The value

The value is the information associated with a key. It can be anything such as a number, text, a list…

User page with value focused.

Behavior

Key value allows the database to store data as a collection of key/value pairs.

When users edit a pane, the key should become the text field label and the value, the text field input.

Style

The key is always placed above its value in a lighter grey making the value much more visible.

Related pages

The accordion list allows users to show/hide details from a list item.
The accordion core allows users to quickly see the main information of a record.
When an app has a large amount of information that needs to be sorted and retrieved,  the Sort & Filter layout is best suited.