HabMetaList

Read-only facts about the thing on screen — created, updated, version, seats.

Created

3 Mar 2026

Updated

26 Aug 2026

Version

1.14.2

Seats

412 / 480

row under a header or a form

Created

3 Mar 2026

Updated

26 Aug 2026

Version

1.14.2

Seats

412 / 480

column in a narrow side panel

<HabMetaList
	:items="[
		{ key: 'Created', value: '3 Mar 2026' },
		{ key: 'Version', value: '1.14.2' },
	]"
/>

Never use it for editable values. That is a HabInput. A key-over-value pair that looks like a field but cannot be typed into is a worse affordance than either one on its own.

Direction

row under a form or a header, where the facts read as a strip. column in a narrow side panel, where a row would wrap into an unreadable grid.

Accessibility

• It is a real <dl> with <dt> and <dd>. These are pairs, and the markup is what makes a screen reader announce "Created, 3 Mar 2026" rather than two unrelated lines.
• Values are tabular, so a column of dates or versions aligns. Digits that jitter down a column are a real legibility cost, not a nicety.
• The labels are uppercased with CSS rather than in the content, so a screen reader still receives the original casing.

API

Props

Prop	Type	Default	Description
direction	"row" | "column"	"row"	row under a form or header, column in a narrow side panel.
items	HabMetaItem[]	[]	—