# Bento

> Equal columns of claim cells — separate raised cards by default, or one hairline-ruled mosaic — for a purpose row, a claim strip or a product bento whose cells can lead with a fading illustration.

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

Bento grid of claim cells. The host is the named sizing container; an inner
wrapper holds the tracks so the query can restyle a descendant: one column
on a phone, two from the `md` container (36rem), `columns` from `lg` (48rem).
Cell titles render one heading level below the band title.

## Examples

```tsx
<Bento columns={3}>
	<Bento.Cell>
		<Bento.Title>{t("purpose.one")}</Bento.Title>
		<Bento.Body>{t("purpose.one.body")}</Bento.Body>
	</Bento.Cell>
</Bento>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `columns?` | `Columns` | Columns at the `lg` container. Defaults to DEFAULT_COLUMNS. |
| `variant?` | `Variant` | Grid chrome. Defaults to DEFAULT_VARIANT. |
| `children` | `RemixNode` | Bento.Cell children to lay out. |

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


### Bento.Cell

One bento cell, padded 1.5rem and 2.5rem from the `lg` container.

| Prop | Type | Description |
| --- | --- | --- |
| `"data-corner"?` | `string` | Outer corners this cell rounds at the `lg` step, space separated (`"start-start end-start"`). Setting it on any cell hands every `lg` outer corner to the page, for cells that span columns. |
| `children` | `RemixNode` | Cell content: an optional Bento.Media or glyph, then title and body. |

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


### Bento.Media

Illustration at the top of the cell, bleeding past the cell padding and fading into the fill; hidden below the `md` container.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Illustration or screenshot drawn edge to edge at the top of the cell. |

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


### Bento.Title

Cell title at the ambient heading depth, balanced across its lines: 1.25rem rising to 1.5rem on 2rem leading from the `md` container, or `base` semibold for dense claims.

| Prop | Type | Description |
| --- | --- | --- |
| `size?` | `"base" \| "lg"` | Title step. Defaults to DEFAULT_TITLE_SIZE. |
| `children` | `RemixNode` | Title copy for the cell. |

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


### Bento.Body

Supporting copy under a bento title, with emphasis fragments in the heading ink.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Supporting copy for the cell; `<strong>` fragments render in the heading ink. |

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


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `TitleSize` | `"base" \| "lg"` | Title step: `lg`, 1.25rem rising to 1.5rem, for a bento's cells, or `base` for a dense grid of short claims. |