Descriptions

Pass items a list of label and children pairs, and with no column set the grid picks a column count for the screen width.

Set bordered to draw the pairs as a table, with each label in its own shaded cell.

Set size to small, medium or large to change the padding around every pair, from a compact panel to a roomy detail page.

Set column to how many pairs sit on a row, as a number or a breakpoint object that drops to one on phones, and the last item stretches to fill a short row.

Set layout="vertical" to put each label above its value, which gives long values the full width of their cell.

Pass column a breakpoint object like { xs: 1, sm: 2, xl: 4 } to change the count per screen width, and give an item's span one too.

Set an item's span to a number of columns, or to "filled" to take whatever is left on its row, like a long notes field.

Put any node in an item's children, like a Badge or a row of Tags, and a status in extra beside the title.

A one-column booking summary with an icon before each label, no colon, and every value aligned to the right edge.

An invoice card with a payment status, a bordered two-column summary, a full-width notes row and the actions to settle it.