# PriceList

> A menu or price list for a landing: named groups of items, each a name joined to its price by a dotted leader, with a line of description under it.

```ts
import { PriceList } from "@sdxc/ui/landing";
```

Lays its groups into columns that each stay at least `columnWidth` wide, starting every
group at the top of its cell so a short group keeps its own height. Server markup and CSS
alone; group titles rule off in `--ui-landing-hairline`, set in `--ui-landing-display-weight`.

## Examples

```tsx
<PriceList>
	<PriceList.Group title="Bread">
		<PriceList.Item name="Country sourdough" price="$9">Two-day ferment, 900 g</PriceList.Item>
	</PriceList.Group>
</PriceList>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `columnWidth?` | `string` | Narrowest a column gets, as a CSS length; the list fits as many columns as clear it. |
| `children` | `RemixNode` | One or more PriceList.Group elements. |

Also accepts everything in `TagProps<"div">`.


### PriceList.Group

One named group: its heading, an optional line under it, then the items as a list.

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` | The group's name, rendered as a heading at the ambient level. |
| `description?` | `RemixNode` | A line under the title, such as when the group is served. |
| `children` | `RemixNode` | One or more PriceList.Item elements. |

Also accepts everything in `Omit<TagProps<"div">, "title">`.


### PriceList.Item

One item: the name and the price on a shared baseline with a dotted leader filling the gap, and the description under them.

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `RemixNode` | What the item is called. |
| `price` | `RemixNode` | The price as the reader should see it, currency included. |
| `children?` | `RemixNode` | A short line under the name: what is in it, or how it is sold. |

Also accepts everything in `Omit<TagProps<"li">, "children">`.