# layout.details

Label and value pairs about one thing: an order’s totals, a booking’s What / When / Who, a record’s details. Renders <dl>; each pair is a <div> with a text.label as="dt" and its value as="dd"

Component: [`<Layout>`](https://www.prongs.dev/docs/components/layout.md) · Renders: `<dl>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md) · Comes from: starter

## Example

```tsx
<Layout intent="layout.details">
  <div>
    <Text intent="text.label" as="dt">When</Text>
    <Text intent="text.body" as="dd">Tue 14 Oct, 10:00</Text>
  </div>
</Layout>
```

## Connections

- Built from: [`arrange.stack`](https://www.prongs.dev/docs/intents/ui.md#arrange-stack)

## Choosing between neighbours

| If it is for… | Use |
|---|---|
| Label and value pairs about one thing: an order’s totals, a booking’s What / When / Who, a record’s details. Renders <dl>; each pair is a <div> with a text.label as="dt" and its value as="dd" | `layout.details` (this page) |
| Records with the same fields, compared across | [`layout.table`](https://www.prongs.dev/docs/intents/layout/table.md) |
| A short line of facts under a title | [`text.meta`](https://www.prongs.dev/docs/intents/text/meta.md) |

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How layout.details resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`arrange.stack`](https://www.prongs.dev/docs/intents/ui.md#arrange-stack) — Children in a column, free to shrink inside a row or grid

  ```
  flex min-w-0 flex-col
  ```

- `layout.details` (this page) — Label and value pairs about one thing: an order’s totals, a booking’s What / When / Who, a record’s details. Renders <dl>; each pair is a <div> with a text.label as="dt" and its value as="dd"

  ```
  m-0 gap-2 [&>div]:flex [&>div]:justify-between [&>div]:gap-4
  [&_dd]:m-0
  ```

Final classes

```
flex min-w-0 flex-col m-0 gap-2 [&>div]:flex
[&>div]:justify-between [&>div]:gap-4 [&_dd]:m-0
```

Definition

```ts
'layout.details': {
  kind: 'semantic',
  description: 'Label and value pairs about one thing: an order’s totals, a booking’s What / When / Who, a record’s details. Renders <dl>; each pair is a <div> with a text.label as="dt" and its value as="dd"',
  refs: ['arrange.stack'],
  binding: {
    element: 'dl',
    classes: 'm-0 gap-2 [&>div]:flex [&>div]:justify-between [&>div]:gap-4 [&_dd]:m-0',
  },
  notFor: [
    {
      context: 'records with the same fields, compared across',
      instead: 'layout.table',
    },
    { context: 'a short line of facts under a title', instead: 'text.meta' },
  ],
},
```