Layout & display

DescriptionList

Key and value pairs, as a real dl. The markup is the point: a grid of divs states no relationship between a label and the value under it, so a screen reader reads a run of unattached strings and the listener works out which value belongs to which term. dt and dd say it outright.

Basic

Every row runs the same grid, so two pairs stay aligned however long either value is, and two pages showing the same record line up with each other.

Stacked

stacked puts the value under its term, for a narrow column or for values long enough that a three-column grid leaves the terms stranded. A long value always wraps and is never truncated: a clipped identifier cannot be read out, cannot be selected and cannot be copied, and an id or a key is exactly what a detail page is opened for. An unbroken token breaks across lines rather than pushing the page sideways.

A value that is not text

detail is a snippet rendered in place of value. Keep value set anyway: it is the pair's plain-text reading, and the snippet is the presentation of it.

Inside a panel

A record on a detail page is a labeled group, so it usually sits in a Panel rather than carrying its own heading.

API

Item