Key-Value Pair

A two-column layout for displaying labelled data. Use for detail views, settings panels, and metadata displays.

Preview

NameAlice Martin

Emailalice@thepace.io

RoleEngineer

StatusActive

Striped variant

PlanPro

BillingAnnual

Next invoice1 May 2026

Amount$199.00

Horizontal layout

Created12 Mar 2026

Updated28 Mar 2026

Version2.1.0

Variants

Variant	Description
Default	Clean rows with a bottom divider
Striped	Alternating row backgrounds for easier scanning
Horizontal	Side-by-side layout for compact metadata

Props

Prop	Type	Default	Description
variant	'default' | 'striped' | 'horizontal'	'default'	Layout variant
items	{ key: string; value: ReactNode }[]	--	Data pairs

Code example

React

import { KeyValue } from '@thepace/lexicon/components';

<KeyValue
  items={[
    { key: 'Name', value: 'Alice Martin' },
    { key: 'Email', value: 'alice@thepace.io' },
    { key: 'Role', value: 'Engineer' },
    { key: 'Status', value: <Badge variant="success" dot>Active</Badge> },
  ]}
/>

Vanilla HTML

<div class="lex-kv">
  <div class="lex-kv__row">
    <span class="lex-kv__key">Name</span>
    <span class="lex-kv__value">Alice Martin</span>
  </div>
  <div class="lex-kv__row">
    <span class="lex-kv__key">Email</span>
    <span class="lex-kv__value">alice@thepace.io</span>
  </div>
</div>

CSS class reference

Class	Purpose
.lex-kv	Container
.lex-kv--striped	Striped row backgrounds
.lex-kv--horizontal	Horizontal layout
.lex-kv__row	Key-value pair row
.lex-kv__key	Label text
.lex-kv__value	Value text

Accessibility

• Use <dl>, <dt>, <dd> for semantic description list markup when appropriate.
• Ensure sufficient colour contrast between keys and values.
• Values can contain any component (badges, links, etc.).

Guidelines

Do

• Use for detail/profile views where a table is too heavy.
• Use the striped variant for long lists of key-value pairs.
• Use the horizontal variant for compact metadata like timestamps.

Don't

• Don't use for comparing items side-by-side — use a Table.
• Don't mix layout variants in the same view.