Prometheus Design System

Key-Value Table

Two-column table with a bold label column and a value column. Used for Build/Runtime info (system fields) and Top-N label stats (monospace fields).

DO

Right-align numeric values for readability in Top-N tables.

DON'T

Sort key-value tables alphabetically — the source order carries meaning (build → runtime).

Design

default

Version3.0.0
Go versiongo1.22

Bold label column, regular value column.

Component reference (screenshots)
/status
/status light
/tsdb-status
/tsdb-status light

Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.

Implementation

<KeyValueTable rows={[['Version','3.0.0'], ['Go version','go1.22']]} />

Layout

PropertyValue
key-font-weight700
cell-padding7px 10px

Accessibility

Screen readerUse <th scope='row'> on the key cells so screen readers announce 'Version: 3.0.0'.