Best way to display a key-value list with material design?

Question

For a "Material design" project, I need to display a key-value list with multiple items, something like that (example with an animal and 4 criteria):

• Name: Cat
• Category: Mammal
• Color: Black
• Size: Small

I would like to see a clear distinction between the key and the value.

But I can't find anything in the specification that offers an idea for the key-value lists: https://material.io/guidelines/components/lists.html

There are only lists that only display a sequence of values, or lists with a first black text followed by a second gray text (which specifies the previous text).

Do you have a good idea to post a clear and beautiful key-value list with Material Design please?

Thanks!

Answer 1

If you wanted a strict key value list, the data table guidelines are the most fitting. To bring out one column over the other, feel free to bold it or make it a disctintly lighter gray (not light gray, though—it still needs to be readable).

However, for most situations, carefully considering how to present each element works best.

Some ideas:

1. See how the name and address "John Doe", "Seattle, WA", don't require a label. Instead, the meaning and significance is obvious from the content, the layout, and the typography. Consider whether some of your key-value pairs could be translated into just values with the right typography and layout.

2. See how the phone area, the email area, and the location area all use icons as a label. If your keys are easy to translate into icons, this might be a solution.

3. Notice how the phone number and the email have a label below in a lighter gray. Consider a two-row layout like this, where the other row displays the category in a smaller, lighter text.

Answer 2

I think about 2 options: cards or chips. Just with chips, i would do left part colorful which would represent some category of keys and right side white background black text of value. If you only have 4 categories i would probably choose chips with left background with your primary color and right white background with black text.

E.g.: Instead of "C" enter "Color:" or another category

https://material.io/guidelines/components/cards.html https://material.io/guidelines/components/chips.html

Answer 3

One option is using table within a mat-card-content. Two cells in each row, one for key and the other one for the value plus some styling.