Nueva Handbook

# ContentKeyValueList

The ContentKeyValueList component provides a definition list<dl> with two columns to display key-value pairs.

Example

Storyblok

This component exists in Storyblok too. Uses custom Storyblok plugin "key-val-list".

blok: {
  // required
  list: {
    // Custom plugin key-val-list
    list: [
      {
        key: '',
        value: ''
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# Dependencies

None.

# Props

Name Type Required Default Description
list Object true - The object is expected to have a property list:[Array]. Each item in the list is an Object: { key: "", value: ""}.

# Variants

None.

# Example

Good

<!-- Use the prop to pass the content to the component. -->
<ContentKeyValueList
  :list="{ list: [{key: 'Key 1', value: 'Value 1'}]}"
/>

<!-- Pass data from an object -->
<ContentKeyValueList :list="blok.list" />
1
2
3
4
5
6
7

Bad

<!-- Use the props for passing the content.
  This Component does not have a slot. -->
<ContentKeyValueList>
  lorem impsum
</ContentKeyValueList>
1
2
3
4
5