Descriptions

WxDescriptions is a record read rather than edited: a list of label-and-value pairs, laid out in columns. It is what a drawer shows before you press Edit.

Plain

Order WX-4100

Customer

Nova Build

Email

office@novabuild.example

Placed

11 September 2026

Status

Shipped

Note

Leave at the gate; the yard is open until six.

Bordered, three across

Invoice

WX-4100

Net

€3 400.00

VAT

€680.00

Terms

30 days

Total

€4 080.00

Labels above their values

Items

3

Weight

12.4 kg

Carrier

Nova Post

Tracking

1Z 999 AA1

Usage

<template>
  <wx-descriptions title="Order WX-4100" :columns="2">
    <wx-descriptions-item label="Customer">{{ order.customer }}</wx-descriptions-item>
    <wx-descriptions-item label="Email">{{ order.email }}</wx-descriptions-item>
    <wx-descriptions-item label="Note" :span="2">{{ order.note }}</wx-descriptions-item>
  </wx-descriptions>
</template>

A grid, not a table

The pairs are a list, not tabular data — nothing lines up down a column except by accident, and Customer above Placed means nothing at all. So this is a <dl> laid out as a grid, which is what the markup already says it is, and which a table cannot be talked into doing: a grid folds to one column when the panel is narrow.

That folding is decided by the panel, not the window. A record in a 380px drawer on a wide desktop is narrow, and the window has nothing to say about it.

Each pair is two grid items rather than a box holding two — that is what lets labels in different rows share a column and line up. Wrapping a pair would end it.

Spanning

span counts columns, not cells:

<wx-descriptions-item label="Note" :span="2">…</wx-descriptions-item>

A span never asks for more columns than the list has, and folds to one along with the list: a pair that spans two is a pair like any other once the panel is down to a single column. Neither is a setting — a span wider than the grid is not a wider grid, it is a pair placed off the end of the one there is, taking the placement of everything after it along.

Bordered

bordered draws the lattice. It is the grid's own gaps opened to a pixel over a background in the border colour — exact at any number of columns and under any span, where a border per cell doubles up along every shared edge.

Labels above their values

layout="vertical" stacks each label over its value, which suits short figures in many columns — four or six facts across a card. The pairs become single grid items there, since there is nothing left to line up. A label sits 2px over its value and the next pair 12, 16 or 24px further down (sm, md, lg), so a label never reads as the tail of the value above it. A fact that is a few lines of its own — who a letter went to — is still one pair: its rows go in the value.

Descriptions

Prop	Type	Default	Description
title	string	—	Heading above the list
columns	number	2	Most pairs side by side
bordered	boolean	false	Rules around every cell
size	'sm' | 'md' | 'lg'	'md'	Spacing and cell padding
layout	'horizontal' | 'vertical'	'horizontal'	Label beside its value, or above
labelWidth	string	—	Width of the label column

Slots: title; extra — beside the heading; default — the pairs.

DescriptionsItem

Prop	Type	Default	Description
label	string	—	The name of the fact
span	number	1	How many columns it takes

Slots: label; default — the value.

A pair renders as a fragment — a <dt> and a <dd>, side by side in the grid — so it has no single element of its own to take a class. Style the list, or the cells through it.