---
title: Bento
description: Use the bento to present content in a responsive grid layout.
keywords: ['grid', 'layout', 'responsive', 'container', 'masonry']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Bento/Bento.tsx
storybook: '/brand/storybook/?path=/story/components-bento--default'
a11yReviewed: true
---

> This component is deprecated and will be removed in a future release. Use CTA banner or River instead.

```js
import {Bento} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
  <Bento>
    <Bento.Item />
    <Bento.Item />
    <Bento.Item />
  </Bento>
</Box>
```

### Example layout

```jsx
<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
  <Bento>
    <Bento.Item columnSpan={12} rowSpan={2} />
    <Bento.Item columnSpan={7} rowSpan={2} />
    <Bento.Item columnSpan={5} rowSpan={2} />
    <Bento.Item columnSpan={12} rowSpan={2} />
  </Bento>
</Box>
```

### Dark mode items

```jsx
<Bento>
  <Bento.Item columnSpan={7} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={5} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
  <Bento.Item columnSpan={12} rowSpan={2} colorMode="dark" />
</Bento>
```

### Responsive behavior

Use `columnSpan`, `rowSpan`, `columnStart`, `rowStart`, `flow`, `verticalAlign`, `horizontalAlign` with an `Object` of breakpoint-specific keys and values corresponding to each type to enable responsive behavior for each of these properties.
Breakpoints use `min-width`, where it will also apply your chosen `span` value to all larger breakpoints.

> Bento items can render in a different source order to what is presented visually. It's important to ensure that the
> content of each item is self-contained and can be read independently of its adjacent items.

```jsx
<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
  <Bento>
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 4,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 2,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 6,
      }}
      rowSpan={{
        xsmall: 4,
        large: 4,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 3,
      }}
      rowStart={{
        large: 5,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 3,
      }}
      rowSpan={{
        xsmall: 4,
        large: 5,
      }}
    />
    <Bento.Item
      columnSpan={{
        xsmall: 12,
        small: 6,
        large: 6,
      }}
      rowSpan={{
        xsmall: 4,
        large: 3,
      }}
    />
  </Bento>
</Box>
```

#### Responsive flow

```jsx
<Box style={{backgroundColor: 'var(--base-color-scale-gray-2)'}} padding="normal">
  <Bento>
    <Bento.Item
      flow={{
        xsmall: 'row',
        small: 'row',
        medium: 'column',
      }}
    >
      <Bento.Content padding="normal">
        <Bento.Heading as="h3">Heading</Bento.Heading>
        <Link href="#">Call to action</Link>
      </Bento.Content>
      <Bento.Visual>
        <img alt="placeholder, blank area with an gray background color" src="/images/placeholder.png" />
      </Bento.Visual>
    </Bento.Item>
  </Bento>
</Box>
```

## Component props

### Bento

| Name        | Type     | Default | Required | Description                             |
| :---------- | :------- | :-----: | :------- | --------------------------------------- |
| `className` | `string` |         | `false`  | Sets a custom class on the root element |

The `Bento` component API supports all standard HTML attribute props for the interface `HTMLDivElement`.

### Bento.Item

| Name                 | Type                                                                                                             |  Default  | Required | Description                                                                                                                     |
| :------------------- | :--------------------------------------------------------------------------------------------------------------- | :-------: | :------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `className`          | `string`                                                                                                         |           | `false`  | Sets a custom class on the root element                                                                                         |
| `children`           | `React.ReactNode[]`                                                                                              |           | `false`  | The children to be rendered within the `Bento.Item`                                                                             |
| `columnStart`        | `'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9' \| '10' \| '11' \| '12' \| 'ResponsiveColumnIndex'` |           | `false`  | The column number in which this content should start                                                                            |
| `columnSpan`         | `'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9' \| '10' \| '11' \| '12' \| 'ResponsiveColumnIndex'` |           | `false`  | The number of columns this content should span                                                                                  |
| `rowStart`           | `'number' \| 'ResponsiveRowIndex'`                                                                               |           | `false`  | The row number in which this content should start                                                                               |
| `rowSpan`            | `'number' \| 'ResponsiveRowIndex'`                                                                               |           | `false`  | The number of rows this content should span                                                                                     |
| `flow`               | `'"row"' \| '"column"' \| 'ResponsiveFlow'`                                                                      |           | `false`  | The flow of the `Bento.Content` and `Bento.Visual` within the `Bento.Item`                                                      |
| `colorMode`          | `'"light"' \| '"dark"'`                                                                                          | `"light"` | `false`  | The color mode specified for this `Bento.Item`                                                                                  |
| `visualAsBackground` | `boolean`                                                                                                        |  `false`  | `false`  | Determines if the `Bento.Visual` child element is set as the background for the `Bento.Item` with the `Bento.Content` overlayed |
| `order`              | `'"default"' \| '"reversed"' \| 'ResponsiveOrder'`                                                               | `default` | `false`  | Determines the visual order for the `Bento.Item`. This changes the semantic ordering of elements for accessibility.             |

The `Bento.Item` component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.

### Bento.Content

| Name              | Type                                                                 |   Default  | Required | Description                                                     |
| :---------------- | :------------------------------------------------------------------- | :--------: | :------- | --------------------------------------------------------------- |
| `className`       | `string`                                                             |            | `false`  | Sets a custom class on the root element                         |
| `children`        | `React.ReactNode[]`                                                  |            | `false`  | The children to be rendered within the `Bento.Content`          |
| `leadingVisual`   | `ReactElement`                                                       |            | `false`  | Sets the icon before the heading text                           |
| `padding`         | `'"condensed"' \| '"normal"' \| '"spacious"' \| 'ResponsivePadding'` | `"normal"` | `false`  | Sets a custom class on the root element                         |
| `horizontalAlign` | `'"start"' \| '"center"' \| '"end"' \| 'ResponsiveAlign'`            |  `"start"` | `false`  | The horizontal alignment of children within the `Bento.Content` |
| `verticalAlign`   | `'"start"' \| '"center"' \| '"end"' \| 'ResponsiveAlign'`            |  `"start"` | `false`  | The vertical alignment of children within the `Bento.Content`.  |

The `Bento.Content` component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.

### Bento.Heading

Required node that is used to provide a heading for the `Bento.Content`.

| name        | type                       | default     | required | description                                           |
| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
| `className` | `string`                   |             | `false`  | Custom class name for the heading component           |
| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the heading component. |

Forwards all props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.

### Bento.Visual

| Name        | Type                                                                 |   Default   | Required | Description                                                                                              |
| :---------- | :------------------------------------------------------------------- | :---------: | :------- | -------------------------------------------------------------------------------------------------------- |
| `className` | `string`                                                             |             | `false`  | Sets a custom class on the root element                                                                  |
| `fillMedia` | `boolean`                                                            |    `true`   | `false`  | Determines how the visual reacts within its container. Either filling the container or contained within. |
| `position`  | `string`                                                             | `"50% 50%"` | `false`  | The positioning of the visual.                                                                           |
| `padding`   | `'"condensed"' \| '"normal"' \| '"spacious"' \| 'ResponsivePadding'` |             | `false`  | Sets a custom class on the root element                                                                  |

The `Bento.Visual` component API supports all standard HTML attribute props for the interface `HTMLDivElement`, while providing some additional behavior as described above.