Meta list

Label and value rows separated by hairlines, for the facts about a project, a photo or a record. A stacked version handles long keys and values.

CSS: css/components/meta-list.css

01 — Example

Project details

A description list: labels on the left, values on the right.

Role: Art direction, design
Client: Northlight Press
Year: 2026

Stacked

.meta--stacked puts each label above its value, for long keys and values such as Kubernetes labels, paths and IDs. Long strings wrap instead of widening the page. On phones every meta list stacks like this.

Namespace: default
Node: aks-pool-1-38291746-vmss000002
app.kubernetes.io/managed-by: Helm
Image: ghcr.io/example/api@sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08

02 — Usage

Use it for

Short facts: role, client, year, camera, location.
The details of a record in a drawer, stacked.

Avoid

Numbers to highlight. Use a stat.