Key-value list

meta data list key-value

Introduction

The key-value list is used to visualize properties.

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green

View in Groundhog

Styleguide

The key-value list behaves responsively with a maximum width of 580px.

Meta data list example

Key

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500
line-height: 28px
text-align: left

Separating line

line: 1px dotted $gray-300;
min-width: 24px

Value

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
line-height: 28px
text-align: right

Multiple columns

Meta data list columns

x: 60px

Multiple lines

Meta data list multiple lines