detail

inside details

One row of details: a field's name and its value.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"value

tone

Props

"text"textThe field's name, e.g. "Plan".required

valuestringThe value to show, usually an {expression}, e.g. value={order.total} or value="{money(total)}". Empty shows —.required

tonedefault · muted · accent · good · warn · badShow the value as a colored badge, for a status: good, warn, bad, accent or muted. Leave out for plain text.default

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Only inside: details

For your model

The exact guide entry a model gets for detail, generated from the same definition.

  detail "<text>"  — One row of details: a field's name and its value.
    "<text>" (required)  The field's name, e.g. "Plan".
    value=<string, required>  The value to show, usually an {expression}, e.g. value={order.total} or value="{money(total)}". Empty shows —.
    tone=<default|muted|accent|good|warn|bad>  Show the value as a colored badge, for a status: good, warn, bad, accent or muted. Leave out for plain text.
    only inside: details
    example:
      detail "Status" value="At risk" tone=bad

  details "<text>"  — One record as label and value rows, for a single customer, order, policy or ticket: its fields one per line, with an optional status badge. Use detail children; for many records use a table.
    "<text>"  A title above the rows, usually the record's name.
    subtitle=<string>  A muted line under the title, e.g. the company and city.
    children: detail
    example:
      state renewal="Jan 14, 2027"
      details "Ada Lovelace" subtitle="Analytical Engines Ltd · London"
        detail "Plan" value="Enterprise · 240 seats"
        detail "Renewal" value={renewal}
        detail "Status" value="At risk" tone=bad

More data

stat rating chart chart-line chart-rule chart-note meter table table-column compare compare-row details schedule board tree flow map pin

All data elements on one page →