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>

Renders

<dl>

Profile

Comes from

starter

View as Markdown

Read https://www.prongs.dev/docs/intents/layout/details.md and tell me whether layout.details fits what I am building.

Example

Preview

What

Intro call

When

Tue 14 Oct, 10:00

Who

Ada and Alan

<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

Choosing between neighbours

If it is
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
Records with the same fields, compared across
layout.table
A short line of facts under a title
text.meta

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
Children in a column, free to shrink inside a row or grid
```
flex min-w-0 flex-col
```
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"
```
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

'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' },
  ],
},